@font-face {
  font-display: swap;
  font-family: 'Nasalization';
  src: url('../assets/fonts/Nasalization.woff2') format('woff2');
}

:root {
  --acid: #76ff03; /* MUI-lightGreen-A400 */
  --green: #1b5e20; /* MUI-green-900 */
  --plasma: #880e4f; /* MUI-pink-900 */
  --purple: #4a148c; /* MUI-purple-900 */
  --white: #fafafa; /* MUI-grey-50 */
  --font: 'Nasalization', system-ui, sans-serif;

  display: flex;
  scrollbar-width: thin;
  justify-content: center;
  scroll-behavior: smooth;
  background: var(--purple);
  accent-color: var(--acid);
}

::selection {
  color: var(--white);
  background: var(--purple);
}

body {
  margin: 0;
  max-width: 45rem;
  font-family: var(--font);
  background: var(--white);
  border: 0.375rem solid var(--white);
}

header {
  padding: 0 1rem;
  user-select: none;
  text-align: center;
  background: var(--plasma);
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  
  & h1 {
    margin: 0;
    padding: 1rem 0;
    font-size: 2.5rem;
    color: var(--white);
  }

  & p {
    margin: 0;
    font-size: 1.25rem;
    color: var(--white);
    padding-bottom: 2rem;
  }
}

section {
  display: flex;
  padding: 0 1rem;
  user-select: none;
  margin: 0.375rem 0;
  align-items: center;
  padding-bottom: 2rem;
  flex-direction: column;
  background: var(--green);
  
  & h2 {
    margin: 0;
    padding: 1rem 0;
    color: var(--acid);
  }

  & div {
    display: inherit;
    min-width: 18.75rem;
    flex-direction: column;
    margin-bottom: 0.25rem;
    align-items: flex-start;

    & label {
      display: block;
      font-weight: 600;
      color: var(--white);
      margin-bottom: 0.5rem;
    }

    & .text {
      border: none;
      font-size: 1rem;
      min-width: 16.25rem;
      margin-bottom: 0.5rem;
      border-radius: 0.25rem;
      padding: 0.25rem 0.5rem;
    }

    &.topic {
      margin: 0.5rem 0;
    }

    &#story {
      min-width: 100%;

      & #stories {
        border: none;
        font-size: 1rem;
        min-width: 100%;
        resize: vertical;
        min-height: 10rem;
        border-radius: 0.25rem;
        box-sizing: border-box;
        padding: 0.25rem 0.5rem;
        font-family: var(--font);
      }

      & div {
        display: flex;
        min-width: 100%;
        margin-top: 0.75rem;

        & input {
          border: none;
          cursor: pointer;
          font-size: 1rem;
          padding: 0.375rem 1rem;
          border-radius: 0.25rem;
          background: var(--white);
        }
      }
    }

    & input {
      font-family: var(--font);
    }

    & select {
      border: none;
      min-width: 17.25rem;
      font-size: 1.125rem;
      border-radius: 0.25rem;
      padding: 0.25rem 0.5rem;
      font-family: var(--font);
      background: var(--white);
    }

    & span {
      min-width: 17rem;
      color: var(--white);
      font-size: 1.125rem;
      margin-top: 0.25rem;
      margin-bottom: 0.75rem;

      & input {
        cursor: pointer;
      }
    }
  }
}

footer {
  user-select: none;
  text-align: center;
  padding: 2rem 1rem;
  color: var(--white);
  font-size: 1.125rem;
  background: var(--plasma);
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;

  & a {
    color: currentColor;
  }
}