@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&display=swap');

/* Variables */
:root {
  --black: #252525;
  --white: #f8f8f8;
  --board-size: 400px;
  --icon-size: 40px;
}

/* Essentials */
body {
  background-color: #18006d;
  font-size: 12px;
  
  animation: 1000s responsive-sky linear infinite;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
  animation-delay: -0s;

  overflow: hidden;
}

@keyframes responsive-sky {
    0% {
      background-color: #010306;
    }
    20% {
      background-color: #14113f;
    }
    25% {
      background-color: #e67e29;
    }
    28% {
      background-color: #549bff;
    }
    80% {
      background-color: #3083f7;
    }
    83% {
      background-color: #14113f;
    }
    85% {      
      background-color: #100e29;
    }
    100% {
      background-color: #010306;
    }
  }

header {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 100vw;
  margin-bottom: 1.2em;
}

  header img {
    width: 48px;
    height: 48px;
    filter: drop-shadow(.2rem .2rem #000);
  }

  header h1 {
    color: #fff;
    text-shadow: .2rem .2rem #000;
    font-size: 3.6rem;
    margin-left: .4rem;
  }

main {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  width: 100vw;
  height: 100vh;
}

img {
  image-rendering: pixelated;
}

/* Text Styles */
h1 {
  font-family: "Pixelify Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 2.4rem;
  margin: 0;

  width: auto;
  /* border: 4px solid black; */
}

p {
  font-family: "Lexend Deca", sans-serif;
  font-optical-sizing: auto;
  font-size: 1.2rem;
}

/* Containers */
main {
  position: absolute;
  width: 100vw;
  height: 100vh;
  left: 0; 
  top:0; 
  
  /* display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; */
}

#board {
  position: relative;
  width: var(--board-size);
  height: var(--board-size);
  border: 5px solid #000;
  background-color: rgb(149, 251, 195);
  box-shadow: 8px 8px #000;
  margin-bottom: 8px;
}

  #board::before {
    content: "";
    position: absolute;
    width: var(--board-size);
    height: var(--board-size);

    background-image: url(assets/misc/BackgroundTiles.png);
    background-size: 80px;
    image-rendering: pixelated;
    opacity: 25%;

  }

#score, #highScore {
  color: white;
  background: #E41111;

  margin-top: 8px;
  box-shadow: 4px 4px #000;
  border: 2px solid #000;
  padding: 4px 8px;

  text-shadow: 1px 1px #000;

  display: inline-block;
  font-size: 1.6rem;
}

  #highScore {
    background: #318B31;
    margin-left: 8px;
  }

.snake, .apple {
  display: block;
  width: var(--icon-size);
  height: var(--icon-size);
  position: absolute;
  user-select: none;
  background-image: url(assets/misc/Apple.png);
  image-rendering: pixelated;
  background-size: var(--icon-size);
  background-color: transparent !important;
}

.snake {
  background-color: transparent;
  border: 0 !important;
  inset: none;
  z-index: 2;
}

  .snake-texture {
    inset: none;
    border: 0 !important;
    image-rendering: pixelated;
    background-size: cover;
    width: var(--icon-size);
    height: var(--icon-size);
  }

  .flip-horizontal {
    transform: scaleX(-1);
  }

#snake-head {
  background-color: transparent;
}

.apple {
  background-color: red;
  z-index: 1;
}

/* Sky */
.sky span {
  position: absolute;
  left: 0; 
  top: 0;
  width: 100vw;
  height: 100vh;
  image-rendering: pixelated;
  background-size: cover;
  z-index: -2;
  /* object-position: 0%; */
}

  #cloud {
    z-index: -3 !important;
    opacity: 25%;
    animation: 60s infinite moving-sky linear;
  }

  #grass {
    animation: 80s infinite moving-sky linear;
  }

  #sun {
    padding-top: 5vh;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    z-index: -4;

    animation: 1000s time-anim linear infinite;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
    animation-delay: -1000s;
  }

  @keyframes time-anim {
    0% {
      transform: translateY(5vh) rotateZ(0deg);
    }
    19.9% {
      transform: translateY(70vh) rotateZ(0deg);
    }
    20% {
      transform: translateY(70vh) rotateZ(180deg);
    }

    50% {
      transform: rotateZ(180deg) translateY(-5vh);

    }
    82.9% {
      transform: translateY(70vh) rotateZ(180deg);
    }
    83% {
      transform: translateY(70vh) rotateZ(0deg);
    }
    100% {
      transform: translateY(5vh) rotateZ(0deg);
    }
  }

@keyframes moving-sky {
  0% {
    background-position: 0%;
  }

  100% {
    background-position: 100%;
  } 
}

/* Label */
input {
  position: absolute;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
}

input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 0px;
  height: 0px;
  border-radius: 9999px;
  background: #ffffff;
  box-shadow: none;
}

input::-moz-range-thumb {
  border: none;
  width: 0px;
  height: 0px;
  border-radius: 9999px;
  background: #ffffff;
  box-shadow: none;
}

input {
  -webkit-appearance: none; /* Remove default styling */
  appearance: none;
  height: 8px;
  background: #000000;
  border-radius: 5px;
  outline: none;
  opacity: 0.1;
  transition: opacity 0.2s;
}

/* Debugging */
.debug {
  position: absolute;
  z-index: 10;
  left: 8px;
  bottom: 8px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}

  .debug h6 {
    font-size: .8rem;
    margin: 0;
  }