@import "../font.css";

:root {
  --logo-60: "Authentic-60", sans-serif;
  --logo-90: "Authentic-90", sans-serif;
  --logo-130: "Authentic-130", sans-serif;
  --sans-serif-reg: "Inter-Reg", sans-serif;
  --sans-serif-bold: "Inter-Bold", sans-serif;
  --serif-reg: "Serif-Reg", serif;
  --serif-med: "Serif-Med", serif;
  --annotations-reg: "Marvel-Reg", sans-serif;
  --annotations-bold: "Marvel-Bold", sans-serif;
  --text-color: #000000;
  --dark-grey: #a9a9a9;
  --med-grey: #d9d9d9;
  --light-grey: #f6f6f6;
  --link: #e5fc52;
  --hover: #bf00ff;
  --landing: #c3ffa8;
  --page-width-desktop: clamp(45ch, 60vw, 75ch);
  --home-width-desktop: clamp(45ch, 80vw, 80%);
  font-family: var(--sans-serif-reg);
  color: var(--text-color);
  font-size: 16px;
}

* {
  -webkit-text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--link);
}


.header--logo a h1 + h1 {
  color: #494949;
}