:root{
  --background:url('https://mobimg.b-cdn.net/v3/fetch/5a/5ad7b220958504b0d2b7d8d8e3f3101a.jpeg') no-repeat center;
  --headerHeight:15%;
  --blur:rgba(0, 0, 0, 0.4);
  --textgradient:linear-gradient(to bottom right, yellow 25%, purple 40%, red 100%);
  --mouse:pointer;
  --mainHeight:70%;}
*{
  padding: 0;
  margin: 0;}
/* Body To Full Size */
body{
  background: var(--background);
  height: 100vh;
  width: 100vw;}
body >.blur {
  background-color: var(--blur);
  width: 100%;
  height: 100%;}
#Header {
  height: var(--headerHeight);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;}
#Header > h1 {
  background-image: var(--textgradient);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;}
#start {
  background-image: var(--textgradient);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  border: none;}
#start:hover {
  cursor: var(--mouse);}
#Board {
  height: var(--mainHeight);
  padding: 5% !important;
  box-sizing: border-box;
  display: flex;
  place-content: center;}
#chessboard{ 
  position: relative;
  height: 100%;
  aspect-ratio: 1/1;}
.square{ 
  position: absolute;
  height: calc(100%/8);
  width: calc(100%/8);
  outline: 1px solid;
  font-size: calc(100%*2.5);
  display: grid;
  justify-content: center;
  align-items: center;}
.chesstext{
  top: 0;
  left: 0;
  position: absolute;
  height: 100%;
  width: 100%;}
.p1{background-color: lime;}
.p2{background-color: white;}
.r1{top: calc(0*calc(100%/8));}
.r2{top: calc(1*calc(100%/8));}
.r3{top: calc(2*calc(100%/8));}
.r4{top: calc(3*calc(100%/8));}
.r5{top: calc(4*calc(100%/8));}
.r6{top: calc(5*calc(100%/8));}
.r7{top: calc(6*calc(100%/8));}
.r8{top: calc(7*calc(100%/8));}
.c1{left:calc(0*calc(100%/8));}
.c2{left:calc(1*calc(100%/8));}
.c3{left:calc(2*calc(100%/8));}
.c4{left:calc(3*calc(100%/8));}
.c5{left:calc(4*calc(100%/8));}
.c6{left:calc(5*calc(100%/8));}
.c7{left:calc(6*calc(100%/8));}
.c8{left:calc(7*calc(100%/8));}
div > img{
  position: absolute;
  height: 70%;
  width: 70%;
  top: 15%;
  left: 15%;}
.chesstext{
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;}
.circles{
  background-image: url(circle1.png);
  background-size: cover;}
.circle_clicked{
  background-image: url(circle2.png);
  background-size: cover;}
.circle_clicked:active{
  background-image: url(circle1.png);
}
.circles:active{
  background-image: url(circle2.png);
}
.target{
  background-image: url(circle.png);
  background-size: cover; 
}