body {background: url(../img/see-background.jpg); background-size:cover; height: 100vh; overflow: hidden;}

header {border-top:3px solid #000; position:fixed; width: 100%;}

.logo {width: 330px; margin: -3px auto 0;}

footer {position: fixed; text-transform: uppercase; width: 100%; bottom: 0; 
    background: url(../img/btm-bar.png) no-repeat; background-size: contain; height: 60px; 
    font-family: 'pp_supply_monoultralight'; 
display: grid; grid-template-columns: repeat(3, 1fr);

}
.person {padding-top: 25px; padding-left: 20px;  color: #bbc5c8; font-size: 15px;;}
.copyright {text-align: center; color: #bbc5c8; font-size: 13px; padding-top: 23px;}
.person a {text-decoration: none; color: inherit; font-size: 15px;}

.text-overlay {width: 100%; opacity: 0.6; height: 100vh; text-align: center; font-family: 'pp_supply_monoregular'; text-transform: uppercase; position: relative;  color: #bbc5c8;}
.text-overlay .top {position: absolute; top: 10vw; width: 100%; font-size: 3vw;}
.text-overlay .btm {position: absolute; top: 13vw; width: 100%; font-size: 3vw;}

.text-overlay .top,
.text-overlay .btm {
  opacity: 0; /* Start hidden */
}

/* Animate the top text with a 6-second cycle and a 1s initial delay */
.text-overlay .top {
  animation: fadeSlide 6s infinite;
  animation-delay: 1s;
}

/* Animate the bottom text with a 6-second cycle and a 2s initial delay */
.text-overlay .btm {
  animation: fadeSlide 6s infinite;
  animation-delay: 2s;
}

/* Keyframes for a fade and slide animation with a 2-second pause at the end */
@keyframes fadeSlide {
  /* 0s (0%) — Start hidden and positioned 20px lower */
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  /* 1s (16.67% of 6s) — Fade in and slide to position */
  16.67% {
    opacity: 1;
    transform: translateY(0);
  }
  /* 3s (50% of 6s) — Hold visible */
  50% {
    opacity: 1;
    transform: translateY(0);
  }
  /* 4s (66.67% of 6s) — Fade out and slide upward */
  66.67% {
    opacity: 0;
    transform: translateY(-20px);
  }
  /* 6s (100% of 6s) — Maintain hidden state during the 2-second pause */
  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}