html {
  background: oklch(0.2 0 0);
  font-family: "PT Mono", monospace;
  font-weight: 400;
  font-style: normal;
  /* 16 - 20 */
  font-size: clamp(1rem, 0.9457rem + 0.3478vw, 1.25rem);
  line-height: 150%;
  color: oklch(1 0 0 / 0.9);
}

body {
  max-width: 800px;
  margin: 0 auto;
  padding: 10vw;
}

.logo {
  display: block;
  margin: 0 auto 20px;
  width: 150px;
  height: 150px;
}

@media screen and (max-width: 700px) {
  .logo {
    width: 90px;
    height: 90px;
  }
}

h1 {
  margin: 0 0 0.8em;
  font-weight: 700;
  /* 40 - 90 */
  font-size: clamp(2.5rem, 1.8207rem + 4.3478vw, 5.625rem);
  line-height: 110%;
  text-align: center;
}

h2 {
  margin: 60px 0 16px;
  font-weight: 300;
  /* 32 - 40 */
  font-size: clamp(2rem, 1.8913rem + 0.6957vw, 2.5rem);
  line-height: 120%;
}

h3 {
  margin: 0 0 8px;
  font-weight: 500;
  /* 16 - 20 */
  font-size: clamp(1rem, 0.9457rem + 0.3478vw, 1.25rem);
  line-height: 150%;
}

p {
  font-weight: 200;
}

p:last-child {
  margin: 0;
}

p:not(:last-child) {
  margin: 0 0 20px;
}

a,
a:visited {
  color: oklch(1 0 0 / 0.9);
  text-decoration-color: oklch(1 0 0 / 0.3);
  text-decoration-thickness: 3px;
  transition: color 0.15s ease-in, text-decoration-color 0.2s ease-in;
}
a:hover,
a:active {
  color: oklch(0 153 192);
  text-decoration-color: oklch(0 153 192 / 0.3);
}
a:focus-visible {
  outline-color: oklch(0 153 192);
  outline-style: solid;
  outline-width: 3px;
  outline-offset: 2px;
  border-radius: 2px;
  text-decoration-thickness: 0;
}

ul {
  padding: 0;
  list-style: none;
}

.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  row-gap: 8px;
  margin: 40px 0;
}

.links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  row-gap: 24px;
  margin: 0;
}

@media screen and (max-width: 700px) {
  .links {
    grid-template-columns: 1fr;
  }
}

.links_item {
  width: minmax(calc(50% - 20px), 300px);
}