/* Fonts */
@font-face {
  font-family: 'Latin Modern';
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: url('./fonts/LM-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Latin Modern';
  font-style: italic;
  font-weight: normal;
  font-display: swap;
  src: url('./fonts/LM-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Latin Modern';
  font-style: bold;
  font-weight: bold;
  font-display: swap;
  src: url('./fonts/LM-bold.woff2') format('woff2');
}

/* Grundlayout */
html { font-size: 1rem; }
body {
  font-family: 'Latin Modern', Georgia, Cambria, 'Times New Roman', Times, serif;
  line-height: 1.8;
  max-width: 80ch;
  margin: 0 auto;
  padding: 2rem 1.25rem;
  color: hsl(0, 5%, 10%);
  background-color: hsl(210, 20%, 98%);
  text-rendering: optimizeLegibility;
  hyphens: auto;
}

/* Typografie */
h1 { font-size: 2.5rem; line-height: 3.25rem; text-align: center; margin-bottom: 1.625rem; }
h2 { font-size: 1.7rem; line-height: 2rem; margin-top: 3rem; margin-bottom: 0.8rem; }
h3 { font-size: 1.4rem; margin-top: 2.5rem; margin-bottom: 0.8rem; }
p { margin-top: 1rem; }
ul { margin-top: 1rem; padding-left: 1.5rem; }

/* Links */
a { color: hsl(0, 100%, 33%); }
a:focus { outline: 2px solid hsl(220, 90%, 52%); outline-offset: 2px; }

/* Bilder */
img { max-width: 100%; height: auto; display: block; }