/* -- FONTS -- */
@font-face { font-family: "Geist"; src: url("../assets/fonts/Geist-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../assets/fonts/Geist-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../assets/fonts/Geist-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../assets/fonts/Geist-Black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../assets/fonts/GeistMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../assets/fonts/GeistMono-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../assets/fonts/GeistMono-Black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Iosevka"; src: url("../assets/fonts/Iosevka-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Iosevka"; src: url("../assets/fonts/Iosevka-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Iosevka"; src: url("../assets/fonts/Iosevka-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Iosevka"; src: url("../assets/fonts/Iosevka-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Iosevka"; src: url("../assets/fonts/Iosevka-Heavy.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }

/* -- HEADING -- */
.heading-h1 { font-family: "Geist"; font-weight: 900; font-size: 130px; line-height: 130px; letter-spacing: -4px; }
.heading-h2 { font-family: "Geist"; font-weight: 900; font-size: 96px; line-height: 96px; letter-spacing: -2px; }
.heading-h3 { font-family: "Geist"; font-weight: 900; font-size: 56px; line-height: 56px; letter-spacing: 0; }

/* -- SUB-HEADING -- */
.sub-heading-sh1 { font-family: "Iosevka"; font-weight: 900; font-size: 24px; line-height: 24px; letter-spacing: 2px; }
.sub-heading-sh2 { font-family: "Iosevka"; font-weight: 600; font-size: 24px; line-height: 24px; letter-spacing: 2px; }
.sub-heading-sh3 { font-family: "Geist"; font-weight: 400; font-size: 24px; line-height: 24px; letter-spacing: 2px; }

/* -- BODY -- */
.body-b1 { font-family: "Geist"; font-weight: 900; font-size: 16px; line-height: 16px; letter-spacing: 1px; }
.body-b2 { font-family: "Iosevka"; font-weight: 700; font-size: 16px; line-height: 16px; letter-spacing: 2px; }
.body-b3 { font-family: "Iosevka"; font-weight: 500; font-size: 16px; line-height: 16px; letter-spacing: 2px; }
.body-b4 { font-family: "Iosevka"; font-weight: 400; font-size: 16px; line-height: 16px; letter-spacing: 2px; }
.body-b5 { font-family: "Geist"; font-weight: 400; font-size: 16px; line-height: 16px; letter-spacing: 2px; }

/* -- FOOTNOTE -- */
.footnote-fn1 { font-family: "Geist Mono"; font-weight: 900; font-size: 14px; line-height: 14px; letter-spacing: 3px; }
.footnote-fn2 { font-family: "Geist Mono"; font-weight: 600; font-size: 14px; line-height: 14px; letter-spacing: 3px; }
.footnote-fn3 { font-family: "Geist Mono"; font-weight: 400; font-size: 14px; line-height: 14px; letter-spacing: 3px; }
.footnote-fn4 { font-family: "Iosevka"; font-weight: 400; font-size: 14px; line-height: 14px; letter-spacing: 3px; }

:root {

  /* -- COLORS -- */
  --color-white: #ffffff;
  --color-rich-black: #111111;
  --color-black: #222222;
  --color-grey: #5c5c5c;
  --color-light-grey: #8c8c8c;
  --color-beige-grey: #eaeae5;
  --color-beige: #f5f5f0;
  --color-brick-red: #9c2515;
  --color-yellow: #ed8610;
  --color-red: #c8311e;
  --color-blue: #10a0ed;

  /* -- SPACING -- */
  --spacer-2px: 2px;
  --spacer-4px: 4px;
  --spacer-8px: 8px;
  --spacer-12px: 12px;
  --spacer-16px: 16px;
  --spacer-20px: 20px;
  --spacer-32px: 32px;
  --spacer-40px: 40px;
  --spacer-80px: 80px;
  --spacer-100px: 100px;
  --spacer-120px: 120px;
  --spacer-200px: 200px;

  /* -- EFFECTS -- */
  --stroke: 2px;
  --shadow-default: 6px 6px 0 var(--color-rich-black);
  --shadow-hover: 8px 8px 0 var(--color-rich-black);
  --shadow-pressed: 0 0 0 var(--color-rich-black);
}