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

* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

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

.wrapper {
  max-width: 996px;
}

.container {
  margin: 0 auto;
  max-width: 840px;
}

img {
  display: block;
  margin: 0 ;
  padding: 0;
  width: 100%;
}

.light {
  display: block;
}

.dark {
  display: none;
}

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

  .light {
    display: none;
  }
  
  .dark {
    display: block;
  }
}

/* RESPONSIVENESS */
@media screen and (max-width: 488px) {
  .body {
    max-width: 488px;
  }
}

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