html {
    scroll-behavior: smooth;
}
nav {
    display: flex;
    align-items: center; /* Keeps everything vertically centered */
    justify-content: center; /* Centers the navigation links */
    position: relative; /* Allows us to pin the logo to the left */
    flex-shrink: 1;
    flex-grow: 1;
}

.navimg {
    position: absolute; /* Pins the logo to the left side */
    left: 0;
    transition: filter 0.2s ease;
}
.navimg:hover{
  filter: brightness(0) saturate(50%) invert(15%) sepia(50%) saturate(5704%) hue-rotate(358deg) brightness(94%) contrast(116%);
}
.navbutton1{
    position: absolute; /* Pins the logo to the left side */
    right: 0;
    display: flex;
    flex-shrink: 1;
}
.navbutton2{
    position: absolute; /* Pins the logo to the left side */
    right: 0;
}
.header-home {
    width: 100%;
    height: 100vh; /* Keeps it exactly the height of the screen */
    display: grid;
    place-items: center;
    text-align: center;
    
}

.home-h1{
    text-align: center;
    font-size: 100px;
    font-weight: normal;

    animation-timeline: scroll();
    animation-fill-mode: forwards;
    animation-name: vanish-header;
}

@keyframes vanish-header {
  0% {
    opacity: 1;
  }
  /* Stretches the fade out smoothly across 30% of your scroll, rather than popping instantly */
  60% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
    /*padding-top: 280px;*/
}
.home-scrolldown-text{
    /*padding-bottom: 400px;*/
    font-family: 'Courier New', Courier, monospace;
    display: block;       /* Forces the link to be a block that spans the full width */
    text-align: center;   /* Centers the text inside that block */
    margin-top: 20px;     /* Gives it some breathing room under the H1 */
    text-decoration: none;
    /* 1. Tell it to watch the page scroll instead of a clock */
  /* Tell it to link the animation to the scroll bar */
  animation-timeline: scroll();
  animation-fill-mode: forwards;
  animation-name: vanish;
}

@keyframes vanish {
  0% {
    opacity: 1;
  }
  /* Stretches the fade out smoothly across 30% of your scroll, rather than popping instantly */
  30% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

.scroll-down-text{
    transition: border-color 0.25s;
    border-bottom: 1px solid transparent;
}
.scroll-down-text:hover{
    cursor: pointer;
    border-bottom: solid;
    border-width: 1px;
    border-color: white;
}
.home-featured-buttons{
    display: flex;
    gap: 22px;
}
.home-featured-button{
    padding: 10px;
    border: none;
    transition: background-color 0.25s;
    
}
.home-featured-button:hover{
    background-color: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transition: opacity 0s;
}
.home-featured-button:active{
    background-color: rgba(0, 0, 0, 0.99);
}
.home-featured-button-image{
    width: 200px;
}
.home-vr-button{
    padding: 10px;
    border: none;
    transition: background-color 0.25s;
    width: 100%;
    display: flex;
    gap: 20px;
    justify-content: center;    
}
.home-vr-button:hover{
    background-color: rgba(0, 0, 0, 0.5);
    cursor: pointer;
}
.home-vr-button:active{
    background-color: rgba(0, 0, 0, 0.99);
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #000000;
  z-index: 1000;
  
  box-sizing: border-box; 
  padding-top: 20px;
  padding-bottom: 20px;
}

/* ADD THESE TWO TARGETS TO OVERRIDE THE 0 EDGES WHEN FIXED */
nav .navimg {
  left: 50px; /* Pushes the logo 50px away from the left screen edge */
}

nav .navbutton1, nav .navbutton2 {
  right: 50px; /* Pushes the buttons 50px away from the right screen edge */
}
.nav-button-1{
    padding: 12px;
    border-radius: 25px;
    border-width: 1px;
}
/* 1. Define the master clock on the parent container */
/* 1. Make the container the "driver" of the animation */
#sdt {
  /* This ensures the container has a size and is part of the flow */
  display: flex;
  flex-direction: column;
  gap: 10px;
  
  /* The animation is defined on the container */
  animation-timeline: view();
  animation-range: entry 0% exit 100%;
  animation-name: fade-in-out;
  animation-fill-mode: both;
}

/* 2. Force the buttons to follow the container's animation exactly */
#sdt button {
  animation: inherit;
}

/* 3. Define the movement */
@keyframes fade-in-out {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}
body{
    margin-left: 50px;
    margin-right: 50px;
    margin-top: 20px;
    background: linear-gradient(to bottom, black, rgb(20, 0, 0));
    background-attachment: fixed;
    color: white;
    
}
/* 1. For Chrome, Safari, Opera, and Microsoft Edge */
/* Target BOTH html and body elements universally */
html, body {
  scrollbar-width: none !important;          /* Silences the Firefox scrollbar track */
  -ms-overflow-style: none !important;       /* Silences old Edge/IE standard scrollbars */
}

/* Force-hide scrollbars on ALL WebKit engines (Chrome, Safari, Edge, Opera) */
html::-webkit-scrollbar, 
body::-webkit-scrollbar,
*::-webkit-scrollbar {
  display: none !important;                  /* Completely hides the visual asset */
}

button{
    border-radius: 10px;
    border-color: black;
    border-style: inset;
}
button{
    background: none;
    color: white;
    border-color: white;
    border-style: groove;
    
}
a{
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    display: flex;
    text-decoration: bold;
}
.nav{
    margin: 10px;
}
.navimg{
    text-align: right;
    margin-right: 20px;
}
h1{
    font-family: 'Courier New', Courier, monospace;
}
h2{
    font-family: Arial, Helvetica, sans-serifs;
}
p{
    font-family: Arial, Helvetica, sans-serif;
}
footer{
    display: flex;
    gap: 40px;
    flex-shrink: 4;
    flex-wrap: wrap;
    margin-bottom: 1000px;
}
footer h3, footer h4{
    font-family: 'Courier New', Courier, monospace;
}
footer p, footer li, footer a{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
}
ul{
  font-family: Arial, Helvetica, sans-serif;
}
/* Clear, responsive mobile fixes 
@media (max-width: 600px) {
  /* 1. Pull the body margins in so text doesn't get squished 
  body {
    margin-left: 15px;
    margin-right: 15px;
  }

  /* 2. Scale the giant headline so it fits the screen width 
  .home-h1 {
    font-size: 42px; 
  }

  /* 3. Re-align the stacked elements so they center gracefully 
  nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  /* 4. Release absolute layout pinning on small touchscreens 
  nav .navimg, 
  nav .navbutton1, 
  nav .navbutton2 {
    position: static !important; /* Forces absolute elements to unpin 
    margin: 0 auto;
  }

  /* 5. Force the links container to sit side-by-side 
  .nav {
    display: flex !important;
    flex-direction: row !important;
    gap: 15px;
    margin: 5px 0;
  }
}*/