font-face {
  font-family: "CourierPrime";
  src: url('fonts/CourierPrime-Regular.ttf') format('ttf');
}

@font-face {
  font-family: "CourierPrime";
  src: url('fonts/CourierPrime-Bold.ttf') format('ttf');
  font-weight: 700;
}

@font-face {
  font-family: "CourierPrime";
  src: url('fonts/CourierPrime-Italic.ttf') format('ttf');
  font-style: italic;
}

@font-face {
  font-family: "CourierPrime";
  src: url('fonts/CourierPrime-BoldItalic.ttf') format('ttf');
  font-weight: 700;
  font-style: italic;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  outline: 0;
  -webkit-tap-highlight-color: transparent;
}

:root {
  --base-font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  --courier-prime-font: "CourierPrime", serif;
  --base-size: 4px;
  /* --base-size: calc(0.18vw + 2px); */
  --white-color: #fff;
  --black-color: #131313;
  --text-color: #181818;
  --h1-size: calc(var(--base-size) * 10.5);
  --h2-size: calc(var(--base-size) * 8);
  --size-35: calc(var(--base-size) * 8.75);
  --size-20: calc(var(--base-size) * 5);
  --size-16: calc(var(--base-size) * 4);
}

html {
  font-size: calc(var(--base-size) * 4.5);
  line-height: 1.2;
  scroll-behavior: smooth;
}

body {
  font-family: var(--base-font);
  background-color: var(--white-color);
  color: var(--text-color);
  padding: var(--size-35);
  display: flex;
  flex-direction: column;
  gap: var(--size-20);
  justify-content: space-between;
  height: 100vh;
  height: 100dvh;
}

.content {
  display: flex;
  flex-direction: column;
  gap: var(--size-20);
}

.content h1 {
  font-size: var(--h1-size);
}

div h2 {
  font-size: var(--h2-size);
  margin: 0 0 var(--size-16) 0;
}

div p:not(:last-child) {
  margin: 0 0 var(--size-16) 0;
}

div p a {
  color: var(--black-color);
}