@font-face {
  font-family: "Game of Squids";
  src: url("../fonts/Game-Of-Squids.ttf") format("truetype");
}

@font-face {
  font-family: "Barlow";
  font-weight: 100;
  src: url("../fonts/Barlow-Thin.ttf") format("truetype");
}

@font-face {
  font-family: "Barlow";
  font-weight: 200;
  src: url("../fonts/Barlow-ExtraLight.ttf") format("truetype");
}

@font-face {
  font-family: "Barlow";
  font-weight: 300;
  src: url("../fonts/Barlow-Light.ttf") format("truetype");
}

@font-face {
  font-family: "Barlow";
  font-weight: 400;
  src: url("../fonts/Barlow-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Barlow";
  font-weight: 500;
  src: url("../fonts/Barlow-Medium.ttf") format("truetype");
}

@font-face {
  font-family: "Barlow";
  font-weight: 600;
  src: url("../fonts/Barlow-SemiBold.ttf") format("truetype");
}

@font-face {
  font-family: "Barlow";
  font-weight: 700;
  src: url("../fonts/Barlow-Bold.ttf") format("truetype");
}

@font-face {
  font-family: "Barlow";
  font-weight: 800;
  src: url("../fonts/Barlow-ExtraBold.ttf") format("truetype");
}

@font-face {
  font-family: "Barlow";
  font-weight: 900;
  src: url("../fonts/Barlow-Black.ttf") format("truetype");
}

:root {
  --color-white: #ffffff;
  --color-eggplant: #2e162c;
  --color-egg-shell: #f2f2f2;
  --color-noodle: #f2c48d;
  --color-bloody-mary: #bf212e;
  --color-bloody-mary-emphasized: #6d1119;
  --color-mint: #34c397;

  --font-family-serif: "Game of Squids", serif;
  --font-family-sans-serif: "Barlow", sans-serif;
  --font-family-body: var(--font-family-sans-serif);
  --font-family-button: var(--font-family-serif);
  --font-family-heading: var(--font-family-serif);

  --font-size-largest: 2.5rem;
  --font-size-large: 1.75rem;
  --font-size-medium: 1.25rem;
  --font-size-small: 1rem;

  --font-weight-base: 200;
  --font-weight-semibold: 500;
  --font-weight-bold: 700;

  --spacing-medium: 1.5rem;
  --spacing-large: 3rem;
  --spacing-width-main: calc(70rem - calc(var(--spacing-medium)) * 2);

  --speed-fast: 200ms;
  --speed-medium: 350ms;
  --speed-slow: 700ms;

  --box-shadow-base: 0 1px 1px 0 rgba(0, 0, 25, 0.25);
  --text-shadow-base: 0 4px 4px rgba(0, 0, 0, 0.25);
  --text-shadow-large: 0 2px 4px rgba(0, 0, 0, 0.75);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

a {
  color: inherit;
  text-decoration: none;
  font-family: var(--font-family-sans-serif);
}

p {
  font-family: var(--font-family-sans-serif);
}

ul {
  font-family: var(--font-family-sans-serif);
}