@use "vars" as v;

* { all: unset; box-sizing: border-box; }
head, script { display: none; }

html, body {
  height: 100%;
  font-family: "IosevkaTermSlab Nerd Font Mono", monospace;
  background: v.$bg1;
  color: v.$text;
}

.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. */
  .title-footer {
    height: 10vh;
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;
    cursor: pointer;

    h2 {
      font-size: 1.2rem;
      color: v.$muted;
    }

    &:hover h2 { color: v.$accent; }
  }

  /* The rest of the section: 80vh main content */
  .content {
    height: 80vh;
    flex-shrink: 0;

    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;

    h1 { font-size: 3rem; margin-bottom: .5rem; color: v.$text; }
    p  { color: v.$muted; line-height: 1.5; }
  }
}

/* background colors */
.section1 { background: v.$bg1; }
.section2 { background: v.$bg2; .title-footer { background: v.$bg2; } }
.section3 { background: v.$bg3; .title-footer { background: v.$bg3; } }
.section4 { background: v.$bg4; .title-footer { background: v.$bg4; } }
.section5 { background: v.$bg5; .title-footer { background: v.$bg5; } }

/* 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: v.$muted;
}

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