:root {
  --font-size-sm: 1.2rem;
  --font-size-md: 1.4rem;
  --font-size-lg: 1.8rem;
}

@font-face {
  font-family: "iso8";
  font-display: "swap";
  src: url(./public/iso8.ttf) format("truetype");
}

/* ------------ Base styles ------------ */

html {
  background-color: #111111;
  line-height: 1.6;
}

h1 {
  font-size: var(--font-size-lg);
}

h2 {
  font-size: var(--font-size-md);
}

p,
li {
  font-size: var(--font-size-sm);
  color: white;
}

h1,
h2,
a {
  color: #fa6607;
}

a {
  font-family: "iso8", sans-serif;
}

/* ------------ Layout ------------ */

.body-layout {
  display: flex;
  justify-content: space-between;
}

footer {
  /* i.e, to fit two columns of 88x31 buttons */
  width: 190px;
}

@media (max-width: 600px) {
  .body-layout {
    display: flex;
    flex-direction: column;
  }

  footer {
    width: 100%;
  }
}

/* ------------ Utils ------------ */

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}