* {box-sizing: border-box;}


@supports (-moz-appearance: none) {
  .cta-button {
    appearance: none; /* Resets native styles */
    -moz-appearance: none; /* Firefox-specific reset */
  }
}


@font-face {
  font-family: 'Oswald';
  src: url(../fonts/Oswald/Oswald-ExtraLight.ttf) format('truetype');
  /* font-style: normal;
  font-weight: normal; */
  text-rendering: optimizeLegibility;
}


html, body {
  background-color: rgb(0, 25, 48, 0.80);
  width: 100dvw;
  height: 200dvh;
  margin: 0;
  padding: 0;
  font-family: 'Oswald', Arial, sans-serif;
  overflow: hidden;

}


header {
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100vh;
}

.container {
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  grid-gap: 10px;
  justify-items: center;
  text-align: center;
  color: white;
}


.container img {
  /* max-width: 150px;
  height: auto; */
  height: min(max(100px, 10vw), 250px);
  align-self: start; /* Ensures the image starts at the top of its row */
  margin-top: 40%; /* Adds space from the top */
}

.logo {
  margin-top: 4vw;

}

.title {
  /* font-size: 2rem;*/

  font-size: min(max(40px, 4.5vw), 100px);
  margin: .5vw;
  margin-top: 2vw;
  /* font-weight: 400 !important; */

}


.tagline {
  /* font-size: 1.5rem;*/
  margin: 1.5vw;
  font-size: min(max(20px, 2.2vw), 50px); 

}


.comingsoon {
  /* font-size: 1.2rem;*/
  margin-top: 6vw;
  margin-bottom: 1.5vw;
  font-size: min(max(20px, 1.8vw), 40px);

}


.gap {
  height: 20px;
}


.button-container {
  display: flex;
  justify-content: center;
  margin-top: auto; /* Pushes the button to stay in between the "Coming Soon" and bottom of the page */
  padding-bottom: 2vw; /* Adds spacing from the bottom */
}

.cta-button {
  display: inline-block; /* Ensures it behaves like a button */
  text-align: center;
  font-size: min(max(18px, 1.6vw), 30px);
  font-family: 'Oswald', Arial, sans-serif;
  color: black; /* Text color */
  background-color: white; /* Button background */
  border: none;
  border-radius: 12px; /* Rounded corners */
  padding: 10px 20px;
  text-decoration: none; /* Removes underline */
  box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3); /* Shadow for 3D effect */
  cursor: pointer; /* Pointer cursor for button interaction */
  z-index: 10; /* Ensures it appears on top */
  position: relative; /* Required for z-index to work */
  width: fit-content; /* Ensures the button wraps around text */
}

.cta-button:hover {
  box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.5); /* Slightly stronger shadow on hover */
  transform: scale(1.05); /* Slight zoom-in effect on hover */
}






/* #fluid {
    position: fixed;
    top: 0;
    left: 0;
    width: 100dvw;
    height: 100dvh;
} */



/* Canvas styles */
canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
}


/* Smooth fade-in animation */
@keyframes fadeIn {
  from {
      opacity: 0;
  }
  to {
      opacity: 1;
  }
}