:root {
  --spiegel-orange: #e64416;
  --spiegel-sans: 'SpiegelSans4';
  --spiegel-slab: 'SpiegelSlab4Cd';
  --spiegel-serif: 'SpiegelSerifUI';
  --darkmode-background: #1F1E1C;
}

* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  margin: 0 auto;
  font-family:'SpiegelSans4',Verdana,sans-serif;
  max-width: 996px;
}

.wrapper {
  max-width: 996px;
}

.container {
  max-width: 840px;
}

h3 {
  margin: 0;
  font-family: var(--spiegel-serif);
  font-size: 1.5rem;
  padding: 1rem 0 0;
  text-align: center;
  font-style: italic;
  color: #254502;
}



/* DARK MODE */
@media(prefers-color-scheme: dark){
  body {
    background: var(--darkmode-background, #1F1E1C);
  }

  h3 {
    color: #F1EFED;
  }

  h4 {
    color: #aba358;
  }
}

/* RESPONSIVENESS */
@media screen and (max-width: 488px) {
  .body {
    max-width: 488px;
  }
  h3 {
    font-size: 1.3rem;
}
  h4{
    font-size: 1.15rem;
}
}

@media screen and (max-width: 310px) {
  .body {
    max-width: 310px;
  }
}