@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Display:wght@300;600;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");
body {
  font-family: "Roboto Mono", monospace;
}
body h1, body h2, body h3 {
  color: #f9f6ee;
  margin-bottom: 2rem;
  margin-top: 0;
  text-transform: uppercase;
}
@media (min-width: 991px) {
  body h1, body h2, body h3 {
    margin-bottom: 0.7em;
  }
}
body h1 {
  font-family: "Press Start 2P", cursive;
  font-size: 1.5em;
  text-shadow: 2px 2px 6px rgb(0, 0, 255), -2px -2px 6px rgba(255, 0, 255, 0.7); /* Neon blue and pink glow */
}
@media (min-width: 1250px) {
  body h1 {
    font-size: 2.5rem;
  }
}
@media (min-width: 1440px) {
  body h1 {
    font-size: 3rem;
  }
}
body h2 {
  letter-spacing: 2.5px;
}

* {
  box-sizing: border-box;
}

body {
  overflow: hidden;
  background: radial-gradient(circle, #2C3550 10%, #1A1F30 40%, #0B0D15 80%);
}
@media (min-width: 991px) {
  body {
    background: url("../images/snake-bg.svg"), linear-gradient(45deg, #00b0ff, #4a00e0); /* Background image with gradient */
    background-size: cover; /* Ensures the image covers the full background */
    background-position: center; /* Centers the background image */
    animation: gradientAnimation 60s ease infinite; /* Slow gradient animation */
  }
  body body {
    display: flex;
    align-items: center;
    justify-content: center; /* Ensure centering vertically and horizontally */
  }
}

body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0.6;
  z-index: -1; /* Ensure the overlay is above the background */
  pointer-events: none; /* Allow interaction with elements below */
}

.snake-container {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  align-items: center;
  overflow: hidden;
  height: 100svh;
}
@media (min-width: 991px) {
  .snake-container {
    padding: 0;
  }
}

.snake-inner {
  margin: auto 0;
  padding: 20px 1em;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.square {
  width: 100%; /* Adjust size dynamically based on the grid */
  height: 100%;
}

.snake {
  background-color: #f9f6ee;
}

.apple {
  background-color: #00e676;
}

@keyframes rotate {
  100% {
    transform: rotate(1turn);
  }
}
.grid {
  display: grid;
  grid-template-columns: repeat(20, 1fr); /* Make each square flexible */
  grid-template-rows: repeat(20, 1fr);
  gap: 2px;
  width: 90vw; /* 90% of the viewport width */
  height: 90vw; /* Maintain a square aspect ratio */
  margin: 0 auto 3em; /* Center the grid */
  position: relative;
  overflow: hidden;
  padding: 1em;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
}
@media (min-width: 991px) {
  .grid {
    width: 300px; /* Optional: Limit the size on larger screens */
    height: 300px;
  }
}
@media (min-width: 1280px) {
  .grid {
    width: 400px; /* Optional: Limit the size on larger screens */
    height: 400px;
  }
}
@media (min-width: 1440px) {
  .grid {
    width: 500px; /* Optional: Limit the size on larger screens */
    height: 500px;
  }
}
.grid::before {
  content: "";
  position: absolute;
  z-index: -2;
  left: -50%;
  top: -50%;
  width: 200%;
  height: 200%;
  background-color: #cfbeeb;
  background-repeat: no-repeat;
  background-size: 50% 50%, 50% 50%;
  background-position: 0 0, 100% 0, 100% 100%, 0 100%;
  background-image: linear-gradient(#004C99, #004C99), linear-gradient(#80BFFF, #80BFFF), linear-gradient(#045ab1, #1c4065); /* Rich Navy Blue */
  animation: rotate 20s linear infinite;
}
.grid::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 6px;
  top: 6px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  background: #161336;
  border-radius: 5px;
}

button {
  display: inline-block;
  padding: 1em 1.25em 0.9em;
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 0.15rem;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
  z-index: 1;
  border: none;
  cursor: pointer;
}
@media (min-width: 991px) {
  button {
    font-size: 0.8rem;
  }
}

button:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
}

.start-btn:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: #161436;
  transition: all 0.3s;
  z-index: -1;
}

button:hover:before {
  width: 100%;
}

.start-btn {
  color: #fff;
  margin-bottom: 1em;
  box-shadow: 0 4px 5px rgba(255, 255, 255, 0.108), 0 0 25px rgb(11, 11, 11), 0 0 50px rgb(0, 176, 255);
}
@media (min-width: 991px) {
  .start-btn {
    margin-bottom: 3.6em;
  }
}

button:hover {
  color: #fff;
}

.start-btn:after {
  background-color: rgb(124, 104, 233);
}

.home-btn {
  display: block;
  width: 100%;
  background: wheat;
  padding: 1em;
  text-align: center;
  text-transform: uppercase;
  background: white;
  letter-spacing: 1.2;
  align-self: center;
  color: black;
  text-decoration: none;
  transition: all 0.3s;
}
.home-btn:hover {
  background: rgb(124, 104, 233);
  color: #fff;
}

.home-btn:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: rgb(124, 104, 233);
  transition: all 0.3s;
  z-index: -1;
}/*# sourceMappingURL=main.css.map */