@font-face {
  font-family: "Atkinson Hyperlegible Regular";
  src: url(../fonts/AtkinsonHyperlegible-Regular.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Italic";
  src: url(../fonts/AtkinsonHyperlegible-Italic.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Bold";
  src: url(../fonts/AtkinsonHyperlegible-Bold.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter SemiBold";
  src: url(../fonts/Inter-SemiBold.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  --c1: #000;
  --c2: #393939;
  --c3: #717171;
  --c4: #e8e8e8;
  --c5: #fff;
  --ca: #5f7285;
  --ff-body: "Atkinson Hyperlegible", Verdana, Arial, sans-serif;
  --fs-body: 1rem;
  --l-maxwidth: 1140px;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  background-color: var(--c4);
  box-sizing: border-box;
  color: var(--ca);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  margin: 0;
}

kbd {
  background-color: var(--c2);
  color: var(--c4);
  display: inline-block;
  padding: 0 0.25rem;
}

.container {
  margin: 0 auto;
  max-width: var(--l-maxwidth);
  width: 100%;
}