/* =========================================================
   CSS Reset
   ========================================================= */

@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");

/* =========================================================
   Base Box Model & Rendering
   ========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  background-color: var(--color-white);
  color: var(--color-black);
  font-family: var(--font-mono-light);
}

/* =========================================================
   Base Typography Defaults
   ========================================================= */

/* Paragraphs, labels, generic text */
p {
  font-family: var(--font-mono-light);
  font-size: var(--text-body);
  line-height: var(--line-normal);
  color: var(--color-black);
}

/* Headings reset (we style them explicitly elsewhere) */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: normal;
}

/* =========================================================
   Links
   ========================================================= */

a {
  color: inherit;
  text-decoration: none;
}

/* =========================================================
   Accessible Focus Styles
   ========================================================= */

button:focus-visible,
a:focus-visible {
  outline: 2px solid #4a90e2;
  outline-offset: 2px;
}

/* =========================================================
   Media Defaults
   ========================================================= */

img,
svg,
canvas {
  display: block;
  max-width: 100%;
}

/* =========================================================
   Font Faces (Local / Trial)
   ========================================================= */

@font-face {
  font-family: "Aeonik Mono";
  src: url("assets/fonts/AeonikMono-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Aeonik Mono";
  src: url("assets/fonts/AeonikMono-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "RL Porteron";
  src: url("assets/fonts/RLPorteron-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}