* {
      margin: 0;
      padding: 0;
    }

    :root {
      font-size: clamp(8px, 3.5vw, 15px);
    }

    body {
      background: rgb(12, 14, 30);
      color: rgb(234, 236, 255);

      font-family: "Noto Sans";
      width: 100%;

      display: flex;
      flex-direction: column;
      align-items: center;
      letter-spacing: 0.01rem;

      padding: 5rem 0;
    }

    main {
      width: 80%;
      max-width: 475px;

      display: flex;
      flex-direction: column;
      gap: 3rem;
    }

    a {
      color: inherit;
      text-decoration: none;
    }
    
    a:link {
      text-decoration: none;
    }

    a:visited {
      text-decoration: none;
    }

    a:hover {
      text-decoration: underline;
    }

    a:active {
      text-decoration: underline;
    }

    
    /* intro */

    section.intro {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 2rem;
      align-items: stretch;
    }

    section.intro .text {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    section.intro .icons {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      align-items: center;
      gap: 1rem;
      font-size: 2.5rem;
    }

    section.intro h1 {
      font-weight: 500;
      font-size: 3.5rem;
    }

    section.intro h2 {
      font-weight: 400;
      font-size: 1.1rem;
    }

    /* about */

    section.about {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    section.about h2 {
      font-weight: 500;
      font-size: 1.25rem;
    }

    section.about p {
      font-weight: 300;
      font-size: 1.3rem;

      color: rgba(190, 196, 250, 1);
    }

    /* work */

    section.work {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    section.work h2 {
      font-weight: 500;
      font-size: 2rem;
    }

    section.work p {
      font-weight: 300;
      font-size: 1.1rem;
    }

    section.work .role,
    section.work .group,
    section.work .institute {
      color: rgba(190, 196, 250, 1);
      text-align: right;
    }

    section.work .role {
      color: rgba(234, 236, 255, 1);
      font-size: 1.25rem;
    }


    section.work .history {
      list-style: none;

      display: flex;
      flex-direction: column;
      gap: 2rem;
    }

    section.work .history li {
      display: grid;
      grid-template-columns: 1fr;
    }

    @media only screen and (min-width: 768px) {
      section.work .history li {
        grid-template-columns: 1fr 2fr;
      }
    }

    section.work .date {
      color: rgba(234, 236, 255, 0.7);
    }

    video {
      pointer-events: none;
    }

    /* projects */

    section.projects {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    section.projects h2 {
      font-weight: 500;
      font-size: 2rem;
    }

    section.projects .project-list {
      list-style: none;

      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    section.projects .project-title {
      font-weight: 500;
      font-size: 1.5rem;
      color: rgba(234, 236, 255, 1);
    }

    section.projects .project-description {
      font-weight: 300;
      font-size: 1.1rem;
      color: rgba(190, 196, 250, 1);
    }

}