* {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  box-sizing: border-box;
  color: inherit;
}

html {
  background: #1e1e2e;
  font-size: 16px;
  font-family: monospace;
}

body {
  max-width: 80ch;
  margin: auto;
  padding: 1em;
}

header {
  padding: 1em;
  font-size: 1.2em;
  border: 3px solid #94e2d5;
  border-radius: 1em;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  margin-bottom: 1.6em;

  a:has(img) {
    height: 1em;
    display: flex;
    img {
      transform: scale(1.6);
    }
  }

  nav {
    h1 {
      display: inline;
      color: #94e2d5;
    }

    a {
      color: #cdd6f4;
    }

    span,
    a {
      &:not(:last-child)::after {
        content: " |";
        color: #cdd6f4;
      }
    }
  }
}

a {
  text-decoration: none;
  color: #94e2d5;
}

iframe {
  display: block;
  width: 100%;
  border-radius: 1em;
  border: none;
}

main {
  color: #cdd6f4;
  line-height: 1.6;

  h2,
  h3 {
    color: #94e2d5;
    font-size: 1.2em;
    padding-top: 1em;
  }

  ul,
  ol {
    padding: 1em 0;
    padding-left: 1em;
  }

  p {
    padding: 1em 0;
  }

  a {
    text-decoration: underline;
  }

  .file-input {
    margin-top: 1em;

    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1em;

    border-radius: 1em;
    border: 3px solid #cdd6f4;
    cursor: pointer;

    input {
      display: none;
    }
  }
}