@import url("https://fonts.googleapis.com/css?family=Fragment%20Mono:700|Fragment%20Mono:400");

:root {
  --font-base: "Fragment Mono", monospace, sans-serif;
  --font-bold: var(--font-base);

  --weight-base: 400;
  --weight-bold: 700;

  --size-h1: 4.210rem; /* 67.36px */
  --size-h2: 3.158rem; /* 50.56px */
  --size-h3: 2.369rem; /* 37.92px */
  --size-h4: 1.777rem; /* 28.48px */
  --size-h5: 1.333rem; /* 21.28px */
  --size-base: 1.000rem; /* 16px */
  --size-small: 0.750rem; /* 12px*/

  --width-max-content: 74.760rem; /* 1196.16px */
  --width-inner-content: calc(var(--width-max-content) * 0.75);
  --height-header: 23.68rem; /* 378.88px */

  --padding-extra-large: var(--size-h1);
  --padding-large: var(--size-h3);
  --padding-medium: var(--size-base);
  --padding-small: var(--size-small);
  --padding-tiny: 0.422rem; /* 6.75px */

  --radius-large: var(--size-h3);
  --radius-tiny: var(--padding-tiny);

  --color-light-text: hsl(183, 50%, 7%);
  --color-light-background: hsl(180, 50%, 93%);
  --color-light-background-transparent: hsla(180, 60%, 96%, 50%);
  --color-light-primary: hsl(183, 15%, 26%);
  --color-light-primary-transparent: hsla(183, 15%, 26%, 5%);
  --color-light-secondary: hsl(213, 32%, 71%);
  --color-light-accent: hsl(33, 100%, 50%);

  --color-dark-text: hsl(183, 50%, 93%);
  --color-dark-background: hsl(180, 50%, 7%);
  --color-dark-background-transparent: hsla(180, 60%, 4%, 60%);
  --color-dark-primary: hsl(183, 15%, 74%);
  --color-dark-primary-transparent: hsl(183, 15%, 74%, 5%);
  --color-dark-secondary: hsl(213, 32%, 29%);
  --color-dark-accent: hsl(33, 100%, 50%);

  --color-text: var(--color-light-text);
  --color-background: var(--color-light-background);
  --color-background-transparent: var(--color-light-background-transparent);
  --color-primary: var(--color-light-primary);
  --color-primary-transparent: var(--color-light-primary-transparent);
  --color-secondary: var(--color-light-secondary);
  --color-accent: var(--color-light-accent);

  @media (prefers-color-scheme: dark) {
    --color-text: var(--color-dark-text);
    --color-background: var(--color-dark-background);
    --color-background-transparent: var(--color-dark-background-transparent);
    --color-primary: var(--color-dark-primary);
    --color-primary-transparent: var(--color-dark-primary-transparent);
    --color-secondary: var(--color-dark-secondary);
    --color-accent: var(--color-dark-accent);
  }
}