@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: "Work Sans";
  margin: 0;
  display: flex;
  flex-direction: column;
  font-weight: 300;
  height: 100vh;
  background: url('/images/background.svg');
  background-size: 150%;
  background-repeat: no-repeat;
  background-position: center min(270px, max(27vw, 150px));
}

p { font-size:  max(12px, min(2vw, 1.1rem)); text-align: justify; line-height: 1.6; }
p.news { font-weight: 500; font-size: 1.5em; text-align: center; }
code { font-family: "Atkinson Hyperlegible Mono"; font-weight: 200; }
main {
  flex: 1;
  &>img { width: min(540px, max(54vw, 300px)); margin: 1rem calc(50vw - min(270px, max(27vw, 150px))); }
  &>h1, &>h2 { line-height: 1.2; text-align: center; margin: 0.2em 0; letter-spacing: 0.1ch; }

  &>h1 { font-size: max(36px, min(5vw, 2.5rem)); font-weight: 180; }
  &>h2 {
    font-size: max(18px, min(2.5vw, 1.25rem)); font-weight: 360; margin-bottom: 2em;
    & em { font-size: 1.8em; padding: 0 0.4em; vertical-align: -0.18em;  font-weight: 350; color: #d4014d; } }
  &>p { padding: 0 calc(50vw - min(480px, 48vw)) 0; font-weight: 450; }
}

h3 { font-size: max(21px, min(3.5vw, 1.75rem)); font-weight: 270; padding: 0 min(2vw, 0.1rem); margin: 0.5em 0 1em; letter-spacing: 0.1ch; }

header p, footer p { text-align: center; }
header { height: 4rem; color: white; background-color: #001919; margin-bottom: 2em;  }
footer { color: white; background-color: #51001d; margin-top: 1em; }
section { padding: 1rem calc(50vw - min(480px, 48vw)) 2rem; margin: 2rem 0; }
section:nth-child(4n) { text-align: right; background-color: #e9930d10; border-top: solid 1px #e9930d50; border-bottom: solid 1px #e9930d50; }
section:nth-child(4n+2) { text-align: right; background-color: #d4014d09; border-top: solid 1px #d4014d30; border-bottom: solid 1px #d4014d30; }

@media (pointer: coarse) {
  html {
    -webkit-text-size-adjust: 180%;
    text-size-adjust: 180%;
  }
  main>h2>em { display: block; font-size: 1em; line-height: 0.3em; opacity: 0; }
}