:root {
  --head-color: #B82B22;
  --header-font: "sans-serif";
  --text-font: "sans-serif";
  --text-size: 15pt;
}

html {
  font-size: var(--text-size);
}
body {
  margin: 0;
  font-family: var(--text-font);
  font-size: var(--text-size);
}

h1 {
  font-family: var(--header-font);
  font-size: 1.5rem;
  font-feature-settings: "tnum";
}

.front header {
  text-align: center;
}
.front header .banner {
  padding: 1ex 1em;
  background-color: var(--head-color);
}
.front header .banner img {
  max-width: 90%;
}
.front header h1 {
  font-size: 2rem;
  font-weight: 800;
}
@media (min-width: 800px) {
  .front header .banner {
    padding: 5ex 5em;
  }
  .front header .banner img {
    max-width: 250px;
  }
}

footer {
  color: #FFFFFF;
  text-align: center;
  padding: 1ex;
  font-style: italic;
  font-size: 0.8rem;
  background-color: var(--head-color);

}

main, .info {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1em;
  box-sizing: border-box;
}

main h2 {
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 1pt;
  margin-top: 2em;
}

main pre {
  font-size: 0.85em;
  padding: 0 2em;
  overflow-x: auto;
}

.organizers h2 {
  width: 100%;
}
@media (min-width: 800px) {
  .organizers {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
  }
  .organizers .organizer {
    width: 20%;
    margin: 0;
    padding: 1ex;
    box-sizing: border-box;
  }
}

.organizer {
  text-align: center;
}
.organizer img {
  width: 60%;
}
.organizer .affil {
  font-style: italic;
  font-size: 0.85em;
}