/* LOCAL FONT HOSTING */
@font-face {
  font-display: swap;
  font-family: "Ubuntu Mono";
  font-style: normal;
  font-weight: 400;
  src: url("./fonts/ubuntu-mono-v18-latin-regular.woff2") format("woff2"),
    url("./fonts/ubuntu-mono-v18-latin-regular.ttf") format("truetype");
}
@font-face {
  font-display: swap;
  font-family: "Ubuntu Mono";
  font-style: italic;
  font-weight: 400;
  src: url("./fonts/ubuntu-mono-v18-latin-italic.woff2") format("woff2"),
    url("./fonts/ubuntu-mono-v18-latin-italic.ttf") format("truetype");
}
@font-face {
  font-display: swap;
  font-family: "Ubuntu Mono";
  font-style: normal;
  font-weight: 700;
  src: url("./fonts/ubuntu-mono-v18-latin-700.woff2") format("woff2"),
    url("./fonts/ubuntu-mono-v18-latin-700.ttf") format("truetype");
}

/* COLOR PALETTE */
:root {
  --bg-1: #1e1e1e;
  --bg-2: #2d2d2d;
  --bg-3: #454545;
  --primary-1: #28cb6f;
  --primary-2: #61bc84;
  --accent-1: #8fbc8f;
  --accent-2: #345e37;
  --text-1: #fff;
  --text-2: #e0e0e0;
}

/* TYPOGRAPHY */
body {
  font-family: "Ubuntu Mono", monospace;
  color: var(--text-2);
}
h1,
h2,
strong,
em {
  color: var(--text-1);
}
h1 {
  font-size: 2.986rem;
  font-size: clamp(
    2.986rem,
    2.5912380952380953rem + 1.9738095238095232vw,
    3.815rem
  );
}
h2 {
  font-size: 2.488rem;
  font-size: clamp(
    2.488rem,
    2.2194285714285713rem + 1.342857142857143vw,
    3.052rem
  );
}
p,
ol,
ul {
  font-size: 1.125rem;
  font-size: clamp(
    1.125rem,
    0.9404761904761905rem + 0.2976190476190476vw,
    1rem
  );
  line-height: 1.4;
}
code {
  /* simply looks more pleasing when this is smaller that regular text */
  font-size: 1rem;
  font-size: clamp(
    1rem,
    0.7534761904761904rem + 0.3976190476190477vw,
    0.875rem
  );
  color: var(--accent-1);
  background: var(--bg-2);
}

/* GENERAL STYLING */
* {
  box-sizing: border-box;
}

body {
  background: var(--bg-1);
  max-width: 62rem;
  margin: 0 auto;
  padding: 0 1rem;
}
@media (min-width: 64rem) {
  body {
    padding: 0;
  }
}

ol > li {
  margin-bottom: 0.75rem;
}

/* link component */
.link {
  color: var(--primary-2);
  text-decoration: none;
  transition: all 0.2s;
  text-decoration: underline;
}
.link:visited {
  color: var(--accent-1);
}
.link:hover,
.link:active,
.link:focus {
  color: var(--primary-1);
  text-decoration: underline;
}
