@charset "UTF-8";
:root {
  /* Layout */
  --gap: 32px;
  --border--radius: 5px;

  /* Typography */
  --font--family: "Noto Sans", sans-serif;
  --color: var(--black);

  --h1--font--style: normal;
  --h1--font--weight: 700;
  --h1--font--size: 36px;
  --h1--line--height: 51.5px;
  --h1--max--width: 700px;
  --h1--text--transform: none;

  --h2--font--style: normal;
  --h2--font--weight: 400;
  --h2--font--size: 24px;
  --h2--line--height: 34px;
  --h2--max--width: 800px;
  --h2--text--transform: none;

  --h3--font--style: normal;
  --h3--font--weight: 700;
  --h3--font--size: 24px;
  --h3--line--height: 24px;
  --h3--max--width: 800px;
  --h3--text--transform: lowercase;

  --h4--font--style: normal;
  --h4--font--weight: 700;
  --h4--font--size: 18px;
  --h4--line--height: 24px;
  --h4--max--width: 800px;
  --h4--text--transform: none;

  --p--font--style: normal;
  --p--font--weight: 400;
  --p--font--size: 16px;
  --p--line--height: 24px;
  --p--max--width: 70ch;
  --p--text--transform: none;

  --a--color: var(--accent--dark);
  --a--text--decoration: none;
  --a--transition: color 0.4s, background-color 0.4s, border-color 0.4s;
  --a--color--hover: var(--accent--dim);

  --figcaption--font--size: font-size: 12px;
  

  /* Navigation */
  --nav--height: 150px;
  --nav--logo--height: 90px;
  --nav--font--size: 14px;
}
@media screen and (min-width: 1921px) {
  :root {
    --max--width: calc(1488px + 2 * var(--gap));
  }
}
/* @media screen and (max-width: 1280px) and (min-width: 961px) {
  :root {
    --max--width: 1264px;
  }
}
@media screen and (max-width: 960px) and (min-width: 901px) {
  :root {
    --max--width: 1024px;
  }
} */
@media screen and (max-width: 900px) {
  :root {
    --nav--height: 75px;
    --max--width: 100%;
  }
}

:root {
  /* Footer */
  --footer--background: var(--dark);
  --footer--font--size: 14px;
  --footer--first--color: var(--white);
  --footer--second--color: var(--glossy);
  --footer--third--color: var(--bright);
  --footer--border--color: var(--grey);
  --footer--height: 360px;
}
@media screen and (max-width: 700px) {
  :root {
    --footer--height: 600px;
  }
}
@media screen and (max-width: 500px) {
  :root {
    --footer--height: 700px;
  }
}