/* Font face declarations */
@font-face {
  font-family: "Intel Mono One";
  src:
    local("Intel Mono One"),
    url("../fonts/mono-one-400.woff2") format("woff2");
  font-weight: 400;
}

@font-face {
  font-family: "Intel Mono One";
  src:
    local("Intel Mono One"),
    url("../fonts/mono-one-italic-400.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: "Intel Mono One";
  src:
    local("Intel Mono One"),
    url("../fonts/mono-one-700.woff2") format("woff2");
  font-weight: 700;
}

@font-face {
  font-family: "Intel Mono One";
  src:
    local("Intel Mono One"),
    url("../fonts/mono-one-italic-700.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
}

/* Begin reset styles */

html,
body,
div,
span,
iframe,
h1,
h2,
h3,
p,
blockquote,
pre,
a,
code,
em,
img,
strike,
strong,
b,
u,
i,
kbd,
form,
label,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
details,
figure,
figcaption,
footer,
header,
nav,
section,
summary,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

ul,
ol,
li {
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

ul,
ol {
  padding-left: 2.75rem;
}

body {
  line-height: 1;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Begin site styles */
:root {
  /* Colors */
  --very-dark-blue: #050d1e;
  --dark-blue: #0b1c42;
  --very-light-blue: #f4f9ff;
  --blue: #4fdbff;
  --orange: #ff893a;

  /* Fonts */
  --mono-one: "Intel Mono One";

  /* Raw type size values */
  /* h1 */
  --h1-min-size: 1.25rem;
  --h1-flex-size: 6.25vw;
  --h1-max-size: 2.5rem;

  /* h2 */
  --h2-min-size: 1.005077551321rem;
  --h2-flex-size: 5.02538775643vw;
  --h2-max-size: 2.01015510256rem;

  /* h3 */
  --h3-min-size: 0.8705738859rem;
  --h3-flex-size: 4.3528694296vw;
  --h3-max-size: 1.7411477718rem;

  /* p */
  --p-min-size: 0.7540700614rem;
  --p-flex-size: 3.7703503071vw;
  --p-max-size: 1.5081401228rem;

  /* tiny */
  --tiny-min-size: 0.4989742277rem;
  --tiny-flex-size: 2.4948711387vw;
  --tiny-max-size: 0.9979484555rem;

  /* Interpolated type sizes */
  --h1: clamp(var(--h1-min-size), var(--h1-flex-size), var(--h1-max-size));
  --h2: clamp(var(--h2-min-size), var(--h2-flex-size), var(--h2-max-size));
  --h3: clamp(var(--h3-min-size), var(--h3-flex-size), var(--h3-max-size));
  --p: clamp(var(--p-min-size), var(--p-flex-size), var(--p-max-size));
  --tiny: clamp(var(--tiny-min-size), var(--tiny-flex-size), var(--tiny-max-size));
}

* {
  box-sizing: border-box;
}

body {
  background-color: var(--dark-blue);
  font-family: var(--mono-one);
  color: var(--very-light-blue);
  padding: clamp(var(--tiny-min-size), var(--tiny-flex-size), var(--tiny-max-size)) clamp(var(--p-min-size), var(--p-flex-size), var(--p-max-size)) clamp(var(--p-min-size), var(--p-flex-size), var(--p-max-size)) clamp(var(--p-min-size), var(--p-flex-size), var(--p-max-size));
}

main {
  max-width: 64rem;
}

h1,
h2,
h3,
p,
li {
  text-shadow: var(--very-dark-blue) 0.148ch 0.148ch 0;
  line-height: 1.618;
  margin-bottom: 1.618ch;
}

li {
  margin-bottom: 0.98175ch;
}

li:last-child {
  margin-bottom: 1.618ch;
}

h1 {
  font-size: var(--h1);
  font-weight: 700;
}

h1 a {
  color: var(--orange);
  text-decoration: none;
}

h2 {
  font-size: var(--h2);
  font-weight: 700;
}

h3 {
  font-size: var(--h3);
  font-weight: 700;
}

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

footer p {
  font-size: var(--tiny);
  margin-bottom: 0;
}

ol {
  list-style-type: decimal;
}

a {
  color: var(--blue);
  text-decoration-skip: edges;
}