@keyframes pageFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes fadeText {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.title {
    opacity: 0;
    animation: fadeText .75s ease-in forwards;
    animation-delay: 0s;
}

.subtitle {
    opacity: 0;
    animation: fadeText 0.75s ease-in forwards;
    animation-delay: 0.225s;
    border-bottom: solid white 2px;

    /* Shrink and Center */
    width: 50%;         /* Set the length of your border here */
    margin: 20px auto 45px;     /* Centers the block element horizontally */
    text-align: center; /* Ensures the text inside stays centered */

    padding: 10px;
}

.description {
  text-align: center;
  width: 1100px;
  margin: 0 auto;
  margin-bottom: 75px;

  opacity: 0;
  animation: fadeText 0.75s ease-in forwards;
  animation-delay: 0.5s;
}

.content {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 40px;
}

.col-header {
    width: 500px;
    height: 150px;
    border: 2px solid white;
    border-radius: 15px;

    opacity: 0;
    animation: fadeText 1.5s ease-out forwards;
    animation-delay: .875s;
}

.col-subheader {
    opacity: 0;
    animation: fadeText 1s ease-out forwards;
    animation-delay: 1s;
}

.scroll-gap {
  top: 100%;
  left: 0;
  width: 100%;
  height: 100vh; /* panel size */
  pointer-events: none;
}

.scroll-link {
  cursor: pointer;
}


body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgb(20,20,20);
  opacity: 1;
  pointer-events: none;
  animation: pageFadeOut 1.75s ease-out forwards;
  z-index: 3;
}

body {
  --cell: 60px;
  --line: 1px;
  --pad: 10px;

  position: relative;
  background-color: rgb(20, 20, 20);
  z-index: 0;

  background-image:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.2) 0 var(--line),
      transparent var(--line) var(--cell)
    ),
    repeating-linear-gradient(
      to right,
      transparent 0 10px,
      transparent 10px calc(10px + var(--pad)),
      rgba(255,255,255,0.2)
        calc(10px + var(--pad))
        calc(10px + var(--pad) + var(--line)),
      transparent
        calc(10px + var(--pad) + var(--line))
        calc(10px + var(--cell))
    );

  background-size: 100% auto;
}

body > * {
  position: relative;
  z-index: 2;
}

body::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: -2px;
  height: calc(40vh + 4px);
  pointer-events: none;
  z-index: 1;

  background: linear-gradient(
    to bottom,
    rgba(20,20,20,0) 0%,
    rgba(20,20,20,0.7) 30%,
    rgba(20,20,20,0.9) 60%,
    rgba(20,20,20,1) 100%
  );
}

html {
  scroll-behavior: smooth;
}

h1 {
  color: white;
  text-align: center;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: 50;
  font-size: 60px;
  margin-bottom: -20px;
}

h2 {
  color: white;
  text-align: center;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: 50;
  font-size: 45px;
  margin-bottom: -20px;
  margin-top: 20px;
}

h2 .scroll-link {
  display: inline-block;
}

h3 {
  color: white;
  text-align: center;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: 50;
  font-size: 30px;
}

h4 {
  color: white;
  text-align: center;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: 50;
  font-size: 20px;
}

p {
  color: white;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: 50;
  font-size: 20px;
}

a {
  text-decoration: none;
  position: relative;
}

a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 40%;
  height: 2px;
  background: white; /* your color */
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}

a:hover::after {
  transform: translateX(-50%) scaleX(1);
}