@font-face {
  font-family: "Alex Brush";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("alex-brush.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Playfair";
  font-style: normal;
  font-weight: 300 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(playfair-regular.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Playfair";
  font-style: italic;
  font-weight: 300 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("playfair-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-serif: "Playfair", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-fancy: "Alex Brush", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;

  --pomegranate: #811e27ff;
  --mulberry: #6e3541ff;
  --pistachio: #898f72ff;
  --champagne: #e5d2c6ff;
  --white-alabaster: #f8f1efff;
}

html {
  font-size: 16pt;
}

body {
  background-color: var(--mulberry);
  margin: 0;
  padding: 0.25rem;
}

header > * {
  display: flex;
  justify-content: space-evenly;
  max-width: 100%;
  margin: 0 0 0.25rem;

  & img {
    margin: 0;

    &.left {
      width: 100%;
      flex: 1 1 auto;
      padding-right: 0.125rem;
    }

    &.right {
      width: 100%;
      flex: 1 1 auto;
      padding-left: 0.125rem;
    }
  }
}

footer > * {
  max-width: 100%;
  margin: 0.25rem 0 0;

  & img {
    width: 100%;
  }
}

main {
  background-color: var(--white-alabaster);
  font-family: var(--font-serif);
  text-align: center;

  padding: 0.5rem;

  & > * {
    width: 720pt;
    max-width: 100%;
    margin: 1.5rem auto;
  }

  & h1, h2, h3 {
    color: var(--pomegranate);
    font-family: var(--font-fancy);
  }

  & h1 {
    font-size: 3rem;
  }

  & h2 {
    font-size: 2rem;
  }

  & h3 {
    font-size: 1rem;
  }

  & p {
    font-size: 18pt;
  }

  & a {
    color: black;

    &:hover {
      color: var(--mulberry);
    }
  }
  
  & ul#results {
    list-style-type:  none;
    
    & li {
      margin-bottom: 2rem;
      text-align: left;
    }
    
    & .accept, .decline {
      font-weight: bold;
    }
    
    & .accept {
      color: var(--pistachio);
    }
    
    & .decline {
      color: var(--pomegranate);
      text-decoration: line-through;
    }
    
    & .allergies {
      color: var(--mulberry);
    }
  }

  & #links {
    display: flex;
    font-family: var(--font-sans);
    font-size: 14pt;
    justify-content: space-around;
    max-width: 100%;

    & a {
      border-radius: 2rem;
      flex: 0 1 auto;
      margin: 1.5rem;
      padding: 0.75rem;
      text-decoration: none;
      width: 30%;

      &#feedback {
        background-color: var(--pistachio);
        color: var(--white-alabaster);

        &:hover {
          background-color: var(--mulberry);
        }
      }

      &#info, &#index {
        background-color: var(--champagne);

        &:hover {
          background-color: var(--mulberry);
          color: var(--white-alabaster);
        }
      }
    }
  }

  & form {
    text-align: left;

    & fieldset {
      border-radius: 2rem;
      border-color: var(--champagne);
      border-style: solid;
      border-width: 1pt;
      margin-bottom: 1.5rem;
      width: 100% - 4rem;

      & > * {
        margin: auto 1rem 0.5rem;
      }
    }

    & input[type=text], input[type=password] {
      border-color: var(--champagne);
      border-radius: 1rem;
      border-style: solid;
      border-width: 1pt;
      font-family: var(--font-sans);
      font-size: 14pt;
      padding: 0.5rem 1rem;
      width: 90%;
    }

    & div#submit {
      text-align: right;
    }

    & input[type=submit] {
      background-color: var(--pistachio);
      color: var(--white-alabaster);
      border: none;
      border-radius: 2rem;
      font-family: var(--font-sans);
      font-size: 14pt;
      padding: 0.75rem;
      width: 30%;

      &:hover {
        background-color: var(--mulberry);
      }
    }

    &#login {
      display: flex;
      flex-direction: column;

      & input {
        margin: 0.5rem auto;
        width: 20rem;
        max-width: 80%;
      }
    }
  }

  & div.info {
    margin-bottom: 4rem;
    padding-bottom: 4rem;
    border-bottom-color: var(--champagne);
    border-bottom-style: solid;

    &#timetable {
      & h2 {
        font-family: var(--font-serif);
        margin: 4rem auto 1rem;
      }

      & h3 {
        font-size: 2rem;
        margin: 1rem auto;
      }
    }
  }
}