: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: auto;
  font-family:'SpiegelSans4',Verdana,sans-serif;
  max-width: 996px;
}

.wrapper {
  max-width: 996px;
}

.container {
  max-width: 840px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

h3 {
  margin: 0rem;
  font-size: 1.5rem;
  font-family: var(--spiegel-sans);
  text-align: center;
  padding: 0 0 0;
}

img {
  width: 100%;
}

.flex-image {
  flex-shrink: 1;
  margin: 0;
  padding: 0;
  max-width: 250px;
  margin-left: auto;
  margin-right: auto;
}

.credit {
  font-weight: 500;
  font-size: 14px;
  color: #BBB9B7;
  text-align: center;
}

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

  .credit{
    color: #807e7c;
  }
}

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

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