@font-face {
  font-family: 'Oswald';
  src: url('/longreads/fonts/Oswald-VariableFont_wght.ttf');
  font-weight: 700;
}

@font-face {
  font-family: 'Source';
  src: url('/longreads/fonts/SourceSerifPro-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Source';
  src: url('/longreads/fonts/SourceSerifPro-Bold.woff2') format('woff2');
  font-weight: bold;
}

@font-face {
  font-family: 'Source';
  src: url('/longreads/fonts/SourceSerifPro-Italic.woff2') format('woff2');
  font-style: italic;
}

:root {
  --main-bg-color: #fff;
  --main-text-color: #363637;
  --sub-text-color: #bdd6fe;
  --highlite-color: #bb453e;
  --font-sans: 'Oswald', serif;
  --font-serif: 'Source', Helevtica, serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

body {
  margin: 0;
  padding: 0;
  background-color: #ede2da;
  background-image: url("/longreads/images/profielen-tijdlijn/background.png");
  background-position: top left;
  background-repeat: no-repeat;
  @media (max-width: 800px) {
    background-position: top right;
    background-size: 150px 200px;
  }
  color: var(--main-text-color);
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.2;
}

h1,
h2,
h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--main-text-color);
}

a {
  color: var(--highlite-color);
}

:focus-visible {
  outline: 0;
  border: 3px dotted #f39308;
}

img {
  max-width: 100%;
  height: auto;
}


#container {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 2%;
}

.jumbotron {
    display: flex;
    flex-direction: row-reverse;
    align-items: baseline;
    gap: 20px;
    @media (max-width: 800px)
    {
      flex-direction: column;
    }
}


.jumbotron header {
  margin: 20px 0 30px;
}

.jumbotron header h1 {
  color: var(--main-text-color);
  font-size: 3rem;
  font-size: clamp(2.4rem, 5vw, 3rem);
  font-weight: 700;
  font-variation-settings: 'wght' 700, 'wdth' 150;
  font-stretch: normal;
  font-optical-sizing: auto;
  text-shadow: -0.08em 0.08em #b8cee1;
}
.large {
  font-size: 3.5rem;
  font-size: clamp(3rem, 5vw, 3.5rem);
}

.intro {
    display: flex;
    align-items: center;
    @media (max-width: 450px) {
      background-color: #ede2da;
    }
}

.intro p {
  font-size: 1.5rem;
  font-size: clamp(1.3rem, 5vw, 1.5rem);
  font-weight: bold;
  padding-bottom: 2%;
  margin-bottom: 10%;
}

.content h2 {
  margin-top: 2em;
  clear: both;
}

.content p {
  font-size: 1.2rem;
  margin: 1.5rem 0;
}

.content {
   h2 + p {
  margin-top: 0;
  }
}


.old-logo {
  float: right;
  shape-outside: url('/longreads/images/profielen-tijdlijn/tijdlijn-1.png');
  shape-image-threshold: 0.2;
  shape-margin: 15px;
}

.other-logo {
  float: left;
  shape-outside: url("/longreads/images/profielen-tijdlijn/tijdlijn-3.png");
  shape-image-threshold: 0.2;
  shape-margin: 15px;
}



.right {
  float: right;
}

.left {
  float: left;
}

@media (max-width: 450px) {
  .other-logo, 
  .old-logo {
    width: 120px;
    padding: 2%;
  }
  
  .left,
  .right {
    float: none;
  }

}

.naschrift {
  margin-top: 5em;
  font-family: var(--font-sans);
  border-top: 1px solid;
  border-bottom: 1px solid;
  padding: 5%;

}

.credits {
  margin-top: 5em;
}