* {
  all: unset;
  box-sizing: border-box;
}

head, script {
  display: none;
}

html, body {
  height: 100%;
  font-family: "IosevkaTermSlab Nerd Font Mono", monospace;
  background: #202020;
  color: #e0e0e0;
}

.sections {
  height: 100vh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
}

/* Each section is exactly 90vh tall. */
/* The missing 10vh comes from the next section's title-footer. */
.section {
  height: 90vh;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  /* This belongs to THIS section, but visually appears at the bottom of
   the previous section's viewport. */
  /* The rest of the section: 80vh main content */
}
.section .title-footer {
  height: 10vh;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
}
.section .title-footer h2 {
  font-size: 1.2rem;
  color: #bdbdbd;
}
.section .title-footer:hover h2 {
  color: #6fa8a8;
}
.section .content {
  height: 80vh;
  flex-shrink: 0;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.section .content h1 {
  font-size: 3rem;
  margin-bottom: 0.5rem;
  color: #e0e0e0;
}
.section .content p {
  color: #bdbdbd;
  line-height: 1.5;
}

/* background colors */
.section1 {
  background: #202020;
}

.section2 {
  background: #1b1b1b;
}
.section2 .title-footer {
  background: #1b1b1b;
}

.section3 {
  background: #242424;
}
.section3 .title-footer {
  background: #242424;
}

.section4 {
  background: #171717;
}
.section4 .title-footer {
  background: #171717;
}

.section5 {
  background: #101010;
}
.section5 .title-footer {
  background: #101010;
}

/* section5 special footer */
.section5 footer {
  height: 10vh;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  color: #bdbdbd;
}

/* responsive */
@media (max-width: 768px) {
  .section .content {
    padding: 1.5rem;
  }
  .section .content h1 {
    font-size: 2rem;
  }
  .title-footer h2 {
    font-size: 1rem;
  }
}