:root{
  --pixel-size:2.5;
}
body{
  overflow: hidden;
  background-color: darkcyan;
  background-image:url("BodyBG.png");
  margin: 0;
}
#main{
  position: absolute;
  width: 100vw;
  height: 100vh;
  background-color: darkcyan;
  display: grid;
  align-items: center;
  justify-content: center;
  justify-items: center;
  z-index: 10;
  background-image: url("playBG.png");
}
#GameName{
  width: 50vw;
  height: 20vh;
  margin: 0;
  line-height: 20vh;
  font-size: 13vmin;
  text-align: center;
  background-color: white;
}
#play{
  height: 20vmin;
  width: 50vmin;
  font-size: 10vmin;
  border-radius: 10vmin;
  margin-bottom: 10vmin;
}
.game{
  width: 100vw;
  height: 100vh;
  display: grid;
  justify-items: center;
}
.UI{
  width: 100vmax;
  height: 30vmin;
  display: flex;
  justify-content: space-around;
}
#timer,#moves{
  width: 50vmin;
  height: 15vmin;
  font-size: 8vmin;
  text-align: center;
  line-height: 15vmin;
  border-radius: 10vmin;
  background-image: url("timerBG.png");
  background-repeat: no-repeat;
  background-size: 50vmin;
}
.grid1{
  background-color: purple;
  width: 30vmin;
  height: 30vmin;
  display: grid;
  gap: 1px;
}
.grid2{
  background-color: purple;
  width: 65vmin;
  height: 65vmin;
  display:grid;
  gap:1px;
}
.gameover{
  width: 50vw;
  height: 50vh;
  display: grid;
  background-color: firebrick;
  position: absolute;
  align-self: center;
  justify-content: center;
  justify-items: center;
  top: 30vmin;
  scale:0;
  border-radius: 10vmin;
  border: solid orangered 2vmin;
}
h2{
  width: 50vmin;
  margin: 0;
  align-self: center;
  text-align: center;
  font-size: 8vmin;
}

#playagain{
  display: block;
  align-self: center;
  width: 30vmin;
  height: 15vmin;
  margin-bottom: 3vmin;
  font-size: 8vmin;
  border:solid black 1vmin ;
  border-radius: 3vmin;
}

#puase{
  width: 20vmin;
  height: 20vmin;
  position: absolute;
  right: 8%;
  top: 48%;
  background-repeat: no-repeat;
  background-size: 20vmin;
}

#adTime{
  
  width: calc(58px * var(--pixel-size));
  height: calc(65px * var(--pixel-size));
  position:absolute;
  left: 12%;
  top:50%;
  overflow: hidden;
  scale: 0;
}
.sandClock{
  animation: moveSpriteSheet 1s steps(6) infinite;
  width: calc(373px * var(--pixel-size))
}
@keyframes moveSpriteSheet{
  from{
    transform: translate3d(0px,0,0);
  }
  to{
    transform: translate3d(-101%,0,0);
  }
}

.pixelart{
  image-rendering: pixelated;
}
#puaseAlret{
  width: 50vw;
  height: 30vh;
  position: absolute;
  justify-self: center;
  bottom: 25vh;
  font-size: 10vmin;
  text-align: center;
  line-height: 30vh;
  scale: 0;
  background-color: darkred;
  border-radius: 8vmin;
  border: solid orangered 2vmin;
}