:root {
  --red: #e63330;
  --dark: #27293e;
  --dark-red: #c00400;
  --light-blue: rgb(230, 239, 254);
  --font: 'Josefin Sans', sans-serif;
}

body {
  color: var(--dark);
  font-family: 'Josefin Sans', sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  margin: 0;
}

header {
  padding: 0.7em 1.5em;
  background: linear-gradient(180deg, rgba(39, 41, 62, 1) 46%, rgba(255, 255, 255, 1) 46%);
  a.logo img {
    width: 80px;
    height: 80px;
  }
}

h1 {
  font-size: 2.5em;
  margin: 0.3em 0;
}

.toast {
  border: 1px solid black;
  padding: 5px;
  margin: 10px;
}
.toast.info {
  border-color: #32a832;
}
.toast.warn {
  border-color: #db9925;
}
.toast.error {
  border-color: #b54a2f;
}

h2 {
  margin: 0.5em 0 0.1em 0;
}

section {
  padding: 1em;
  max-width: 1100px;
  margin: 0 auto;
}

a.cta-button,
input[type='submit'] {
  background-color: var(--red);
  font-size: 1em;
  font-weight: 300;
  padding: 0.5em 0.8em 0.3em 0.8em;
  border-radius: 5px;
  text-decoration: none;
  color: white;
  font-family: var(--font);
  border: 1px solid white;
  width: min-content;
  max-width: 100%;
  cursor: pointer;
  &:hover {
    border: 1px solid var(--dark);
    background-color: var(--dark-red);
    transition: all ease-in-out 0.5s;
  }
}

a:not(.cta-button) {
  font-weight: 700;
  color: var(--dark);
  text-decoration-color: var(--red);
  &:hover {
    color: var(--red);
    transition: all ease-in-out 0.5s;
  }
}

form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

input[type='email'],
input[type='text'] {
  max-width: 200px;
  border-radius: 3px;
  border: 1px solid var(--dark);
  padding: 0.4em 0.6em 0.2em 0.6em;
  font-family: var(--font);
  &:focus-within {
    outline: 1px solid var(--dark);
  }
}

span.hint {
  font-style: italic;
  font-weight: 300;
}

blockquote,
tt {
  background-color: var(--light-blue);
  padding: 0.3em 0.7em;
  border-radius: 10px;

  &.cursive {
    font-family: cursive;
    font-size: 1.2em;
    line-height: 1.2em;
  }
}

div.form {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

input[type='file']::file-selector-button {
  background-color: var(--dark);
  color: white;
  font-family: var(--font);
  padding: 0.5em 0.8em;
  border: none;
  font-size: 1em;
  border-radius: 5px;
  cursor: pointer;
  max-width: 100%;
}

input[type='file']::file-selector-button:hover {
  background-color: var(--light-blue);
  color: var(--dark);
  transition: all ease-in-out 0.5s;
}

ul li {
  margin: 0.3em 0;
}