:root {
  --chocolate: #a5552f;
  --pastry: #e5ad76;
  --cream: #fbcccd;

  font-family: 'Montserrat'; font-weight: 400; font-size: 14px;
}

.symbol {font-family: 'Material Symbols Outlined'; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24}

h1, h2, h3, h4, h5, h6 {font-family: 'Gloock'; font-weight: 400}

label input {width: 100%}

/* -------------------------------------------------------------------------- */

  body {min-height: 100vh; display: flex; flex-direction: row}
  body * {display: flex; box-sizing: border-box; transition: all ease-out 0.125s}

  aside {min-width: 40%; flex-grow: 1; align-items: center; justify-content: center}

  main {flex-grow: 1; flex-direction: column; align-items: stretch; justify-content: flex-start}

  section {flex-grow: 1; padding: 3rem}
  section article {max-width: 800px; flex-direction: column; align-items: center; justify-content: center}
  section article h2 {margin: 0 0 1rem 0; font-size: 3rem}
  section article p {margin: 0 0 1rem 0; text-align: center; font-size: 1.5rem}

  @media (max-width: 1000px) {
    body {flex-direction: column}
    aside svg {max-height: 400px}
  }

/* -------------------------------------------------------------------------- */

  aside path.chocolate {fill: var(--chocolate)}
  aside path.pastry {fill: var(--pastry)}
  aside path.cream {fill: var(--cream)}
  aside path.ink {fill: black}

/* -------------------------------------------------------------------------- */

  section#welcome {align-items: center; justify-content: center; color: black; fill: black; background-color: var(--pastry)}
  section#welcome article span#links a svg {width: 3rem; margin: 1rem}
  section#welcome article span#links a:hover svg {fill: var(--chocolate)}

/* -------------------------------------------------------------------------- */

  section#contact {flex-direction: column; align-items: center; justify-content: center; color: white; background-color: var(--chocolate)}

  section#contact form {flex-direction: column; align-items: center; font-size: 1rem}
  section#contact form fieldset {width: 100%; min-width: 300px; max-width: 600px; padding: unset; flex-direction: row; flex-wrap: wrap; justify-content: center; border: none; outline: none}

  section#contact form label {width: 100%; max-width: 600px; margin-bottom: 0.75rem; padding: 0.5rem 0.75rem; flex-direction: row; flex-wrap: wrap; align-items: center; background-color: #f5f1e7; border-radius: 1rem; cursor: text}
  section#contact form label.half-width {width: calc(50% - 0.3rem)}
  section#contact form label.half-width + label.half-width {margin-left: 0.6rem}

  section#contact form label[for="conditions"] {margin-bottom: 20px; padding: unset; justify-content: flex-start; flex-wrap: nowrap; background-color: unset; cursor: pointer; user-select: none}
  section#contact form label[for="conditions"] input {display: none}
  section#contact form label[for="conditions"] span.symbol {margin-right: 1rem; min-width: 2.5rem; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; border-radius: 1rem; color: #aaaaaa; background-color: white; border: none}
  section#contact form label[for="conditions"] input:checked + span.symbol {color: black; background-color: var(--pastry)}
  section#contact form label[for="conditions"].error span.symbol {color: red}
  section#contact form label[for="conditions"] p {margin: unset; text-align: left; font-size: 1rem; line-height: 1.2rem}

  section#contact form label[for="test"] {max-width: 100px}
  section#contact form label[for="test"] input {text-align: center}

  section#contact form label input,
  section#contact form label textarea {min-height: 1.5rem; flex-grow: 1; border: none; outline: none; background-color: unset}
  section#contact form label textarea {min-height: 5rem; resize: unset}
  section#contact form label textarea + span#signature {width: 100%; color: #888888}

  section#contact form span#form_notification {margin-bottom: 1.25rem; color: black}

  section#contact form button#form_button {margin: 0.5rem; padding: 0.75rem 1.25rem; align-items: center; color: white; border-radius: 25px; background-color: black; transition: all ease-out 0.125s}
  section#contact form button#form_button:hover {background-color: var(--pastry)}
  section#contact form button#form_button span.symbol {font-size: 1.5rem; font-variation-settings: 'FILL' 1}
  section#contact form button#form_button span.title {margin-left: 0.5rem; font-size: 1rem; font-weight: 500; white-space: nowrap; text-transform: uppercase}

  section#contact form label ::placeholder {color: #aa8888}
  section#contact form label.error ::placeholder {color: red}