html {
  height: 100%;
  background: url('./img/bg.jpg') no-repeat center center fixed;
  background-size: cover;
  display: grid;
  place-items: center;
  position: relative; /* Ensure the overlay is positioned relative to the viewport */
}

body {
  font-family: "Poppins", sans-serif;
}

body::before {
  content: "";
  position: fixed; /* Overlay spans the entire viewport */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Semi-transparent black overlay */
  pointer-events: none; /* Allow interactions with elements below */
}

.box {
  font-family: "Gluten", cursive;
  z-index: 100; /* Higher than the overlay */
  width: 60vmin;
  height: 50vmin;
  display: grid;
  place-content: center;
  color: white;
  font-size: 20px;
  text-shadow: 0 1px 0 #000;
  --border-angle: 0turn;
  --main-bg: conic-gradient(
      from var(--border-angle),
      #213,
      #112 5%,
      #112 60%,
      #213 95%
    );
  border: solid 5px transparent;
  /* border-radius: 2em; */
  --gradient-border: conic-gradient(from var(--border-angle), transparent 25%, #08f, #f03 99%, transparent);
  background: var(--main-bg) padding-box, var(--gradient-border) border-box, var(--main-bg) border-box;
  background-position: center center;
  -webkit-animation: bg-spin 3s linear infinite;
          animation: bg-spin 3s linear infinite;
  transform: rotateX(0deg) rotateY(0deg);
  transition: transform 0.2s ease-out;
}
.box p, .box strong {
  font-family: "Gluten", cursive;
  text-align: center;
  font-size: 1.5rem;
  line-height: 1.5;
  color: #fff;
  text-shadow: 
    0 0 5px #fff, 
    0 0 10px #ff6347, 
    0 0 20px #ff6347, 
    0 0 40px #ff4500, 
    0 0 80px #ff4500; /* Layers of glowing effect */
  animation: neon-glow 2s ease-in-out infinite alternate; /* Subtle pulsing animation */
}
.box p {
  font-family: "Poppins", sans-serif; /* "Gluten", cursive; */
  font-weight: 300;
  letter-spacing: -1px;
  text-align: center;
  font-size: 1.5rem;
  line-height: 1.5;
  color: #c4beb9;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.box strong {
  font-family: "Poppins", sans-serif; /* "Gluten", cursive; */
  letter-spacing: -2px;
  font-size: 3rem;
  font-weight: 600;
  color: #fffaf6; /* Warm gold tone for headings */ /* #FFECB3; */
  
}
.logo {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 250px; /* Set to a reasonable size */
  height: auto;
  z-index: 100; /* Ensure it's above other elements */
}
.logo-link {
  z-index: 1000; /* Ensure the link is above snowflakes */
}

@-webkit-keyframes bg-spin {
  to {
    --border-angle: 1turn;
  }
}
@keyframes bg-spin {
  to {
    --border-angle: 1turn;
  }
}
.box:hover {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}

@property --border-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0turn;
}

/* Tablet devices (768px and below) */
@media screen and (max-width: 768px) {
	html {
    display: grid;
    place-items: center; /* Ensures content is centered horizontally and vertically */
  }
  .box {
	width: 75vmin;
    height: 65vmin;
	margin: 0;
  }
  .box p {
    font-size: 1.5rem;
    line-height: 1.4;
  }

  .box strong {
    font-size: 2.2rem;
  }
}

/* Mobile devices (480px and below) */
@media screen and (max-width: 480px) {
	html {
    display: grid;
    place-items: center; /* Ensures content is centered horizontally and vertically */
  }
  .box {
	width: 80vmin;
    height: 70vmin;
	margin: 0;
  }
  .box p {
    font-size: 1.2rem;
    line-height: 1.2;
  }

  .box strong {
    font-size: 1.8rem;
  }
}