/* GLOBAL RESET */
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
  list-style: none;
  text-decoration: none;
  color: var(--color-dark-gray);
}

html {
  font-size: 62.5%;
}

body {
  box-sizing: border-box;
  font-family: "Archivo";
  font-size: 1.6rem;
  color: var(--color-dark-gray);
  background-color: var(--color-light-gray);
}

/* FONTS */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo.woff2") format("woff2");
}

@font-face {
  font-family: "Spectral Italic";
  src: url("../fonts/spectral_italic.woff2") format("woff2");
}

/* ROOT DEFINITIONS */
:root {
  /* FONTS */
  --font--header-nav-links: 300 normal 1.6rem/2.4rem "Archivo", sans-serif;
  --font--heading-secondary: 500 normal 7rem/7rem "Spectral Italic", sans-serif;
  --font--heading-tertiary: 500 normal 3.8rem/4.4rem "Archivo", sans-serif;
  --font--heading-quinary: 400 normal 2.4rem/3.2rem "Archivo", sans-serif;
  --font--project-subtitle: 300 normal 1.8rem/2rem "Archivo", sans-serif;
  --font--project-body: 300 normal 1.6rem/3.2rem "Archivo", sans-serif;

  /* COLORS */
  --color-light-gray: #e2e2e2;
  --color-mid-light-gray: #757575;
  --color-darkest-gray: #171717;
  --color-dark-gray: #343434;
  --color-lightest: #ffffff;
}

/* FONTS */
.heading--secondary {
  font: var(--font--heading-secondary);
  margin-bottom: 4rem;
}

.heading--tertiary {
  font: var(--font--heading-tertiary);
  margin-bottom: 4rem;
}

.heading--quinary {
  font: var(--font--heading-quinary);
  margin-bottom: 1rem;
}

.project-subtitle {
  display: inline-block;
  color: var(--color-mid-light-gray);
  margin-bottom: 2rem;
}

.body-text {
  font: var(--font--project-body);
}
/* PADDINGS */
.padding-left-right-mid {
  padding-left: 4rem;
  padding-right: 4rem;
}

.padding-top-bot-mid {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.padding-top-bot-large {
  padding-top: 8rem;
  padding-bottom: 8rem;
}

.padding-top-bot-small {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/* MARGINS */
.margin-left-right-mid {
  margin-left: 4rem;
  margin-right: 4rem;
}

/* ANIMATIONS ON HOVER */

.bw-filter {
  filter: grayscale(100%);
}

.internal-link:link,
.internal-link:visited {
  color: var(--color-dark-gray);
}

.internal-link:hover,
.internal-link:active {
  cursor: pointer;
  color: #ff0000;
}

a,
.heading--quinary {
  transition: color 0.2s ease-in-out;
}

a:hover .heading--quinary {
  color: #ff0000;
}

a:hover .section--content-project-category-image {
  transform: translateY(-1rem);
  filter: drop-shadow(0 1.2rem 1rem hsla(0, 0%, 0%, 0.2));
}

img {
  transition: transform 0.2s ease-in-out, filter 0.2s ease-in-out;
}