@import url('code.css');

*, *::before, *::after {
  box-sizing: border-box;
  font-family: inherit;
}

img, svg {
  max-width: 100%;
}

:root {
  font-size: clamp(14px, 1vw + 5px, 17px);
  font-family: 'Courier New', Courier, monospace;

  scroll-behavior: smooth;
  scroll-padding-top: 3rem;

  @media screen and (max-width: 1600px) {
    scroll-padding-top: 4.5rem;
  }

  @media screen and (max-width: 1024px) {
    scroll-padding-top: 6rem;
  }

  @media screen and (max-width: 800px) {
    scroll-padding-top: 7.5rem;
  }
}

body {
  margin: 0;

  background-color: rgb(24, 33, 48);
  color: rgb(199, 221, 212);
}

header {
  position: relative;
  height: 100vh;

  display: grid;
  place-content: center;

  background-color: rgb(36, 46, 62);
  background-image: 
    linear-gradient(to right, transparent calc(50% - 0.5px), rgba(0,0,0,0.1) calc(50% - 0.5px), rgba(0,0,0,0.1) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(to bottom, transparent calc(50% - 0.5px), rgba(0,0,0,0.1) calc(50% - 0.5px), rgba(0,0,0,0.1) calc(50% + 0.5px), transparent calc(50% + 0.5px));
  background-size: 0.5rem 0.5rem;

  h1, p {
    margin: 0;
    
    text-align: center;
    font-family: 'Century Gothic', sans-serif;
  }

  h1 {
    font-size: 10rem;
    color: rgb(222, 255, 172);
  }

  p {
    font-size: 2rem;
    color: rgb(222, 255, 172);
    margin-top: -0.5rem;
  }

  @media screen and (max-width: 620px) {
    h1 {
      font-size: 6rem;
    }

    p {
      font-size: 1.5rem;
    }
  }

  nav {
    padding: 0.75rem 1rem;
    position: fixed;
    z-index: 10;

    top: 0;
    left: 0;
    right: 0;

    background-color: rgba(36, 46, 62, 0.85);
    backdrop-filter: blur(2px);
    border-bottom: 1px solid grey;

    ul {
      padding: 0;
      margin: 0;

      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 1rem;

      list-style-type: none;

      a {
        color: white;
      }
    }
  }
}

main {
  --section-gap: 2rem;
  --section-max-width: 50rem;

  padding: 4rem 2rem;

  display: flex;
  flex-direction: column;
  gap: var(--section-gap);

  border-top: 1px solid grey;

  section {
    position: relative;
    width: min(100%, var(--section-max-width));
    padding: 1rem;

    align-self: flex-start;

    border: 1px solid rgb(90, 90, 90);
    border-radius: 0.25rem;
    background-color: rgba(0,0,0,0.15);

    h2 {
      margin-top: 0;
    }

    h3.highlight {
      color: lime;
    }

    p {
      margin-bottom: 0;
    }
  }

  section:nth-child(2n) {
    align-self: flex-end;
  }

  section:not(:last-child)::before {
    position: absolute;
    content: '';

    width: 3.2rem;
    height: calc(50% + var(--section-gap));

    border-top: 1px solid rgb(90, 90, 90);
  }

  section:nth-child(2n-1)::before {
    top: 50%;
    left: 100%;

    
    border-right: 1px solid rgb(90, 90, 90);
    border-top-right-radius: 0.25rem;
  }

  section:nth-child(2n)::before {
    top: 50%;
    right: 100%;

    border-left: 1px solid grey;
    border-top-left-radius: 0.25rem;
  }

  @media screen and (max-width: 840px) {
    section {
      width: 100%;
    }

    section:not(:last-child)::before {
      display: none;
    }
  }
}

.links {
  padding: 0;

  display: flex;
  flex-wrap: wrap;
  gap: 1rem;

  list-style-type: none;

  a {
    display: inline-block;
    padding: 0.15rem 0.25rem;

    color: white;
  }
}