@import 'reset.css';
@import 'global.css';
@import 'animation.css';

nav {
  display: grid;
  grid-auto-flow: column;
  place-items: center;

  overflow: clip;
}

nav > * {
  font-size: clamp(1rem, 2svw, 2rem);
  line-height: 0.75;
}

header.home {
  z-index: 3;
  isolation: isolate;

  grid-area: body;

  width: 100svw;
  height: 100svh;

  background-color: var(--color-black);

  overflow: clip;

  h1 {
    font-family: 'League Gothic', sans-serif;
    line-height: 0.75;
    color: var(--color-primary);
  }

  nav {
    padding-block: clamp(2rem, 4svw, 4rem);
    color: var(--color-white);
  }

  .hero {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "hero";

    overflow: clip;

    .statement {
      grid-area: hero;

      height: 34svw;

      background-color: var(--color-primary);
      clip-path: polygon(0% 0%, 0% 85%, 100% 30%, 100% 0%);
    }

    .name {
      grid-area: hero;
      justify-self: center;
      align-self: start;

      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: 1fr;
      grid-template-areas: "name";
      justify-items: start;

      .first {
        grid-area: name;
        font-size: 45svw;
        mix-blend-mode: difference;
      }

      .last {
        grid-area: name;
        align-self: start;

        font-size: 6svw;
        letter-spacing: 45%;

        transform-origin: 0% 100%;
        rotate: -90deg;
        translate: 272% 630%;

        mix-blend-mode: difference;
      }
    }
  }
}

nav.bar {
  z-index: 2;
  isolation: isolate;

  grid-area: body;
  align-self: start;
  justify-self: stretch;

  height: 0svw;

  color: var(--color-black);
  background-color: var(--color-primary);
}

main.projects {
  --width: min(100svw, 70ch);
  z-index: 1;
  isolation: isolate;

  grid-area: body;

  display: grid;
  grid-auto-flow: column;

  width: var(--width);
  height: 100svh;

  background-color: var(--color-black);

  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overflow-y: clip;

  h1, h2, h3, h4, h5, p, a {
    margin-bottom: 0.25rem;
    line-height: 1.2;
  }

  code {
    font-family: 'Source Code Pro', monospace;
    color: var(--color-code);
  }

  p {
    line-height: 1.75rem;
  }

  body {
    padding: 10svh 10svw;

    @media (min-width: 800px) {
      padding: 20svh 20svw;
    }
  }

  header {
    margin-bottom: 2rem;
  }

  section {
    margin: 2rem 0;
  }

  h1 {
    font-size: 3rem;
    color: var(--color-primary);
  }

  h2 {
    font-size: 1.5rem;
    font-weight: 700;
  }

  h3 {
    margin-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-primary);
    font-weight: 700;
  }

  a {
    color: var(--color-neutral);
  }

  #oscar-party, #bayes, #recast {
    scroll-snap-align: center;

    width: var(--width);
    height: 100svh;

    padding: clamp(2rem, 4svw, 4rem);

    overflow-x: clip;
    overflow-y: scroll;
  }
}