@import url("src/reset.css");
@import url("src/html.css");
@import url("src/generic.css");
@import url("src/texts.css");
@import url("src/header.css");
@import url("src/nav.css");
@import url("src/article.css");
@import url("src/virtual.css");
@import url("src/home.css");
@import url("src/footer.css");
@import url("src/print.css");
:root {
  --color-background: #000;
  --color-primary: #ffffff;
  --color-primary--transparent: rgba(255, 255, 255, 0.86);
  --color-secondary: rgb(120, 171, 150, 0.86);
  --color-secondary--light: rgb(119, 177, 157, 0.2);
  --color-secondary--x-light: rgb(119, 177, 157, 0.1);

  --unit--horizontal: 5vw;
  --unit--vertical: 1.7rem;
  --unit--vertical-relative: calc(
    var(--unit--vertical) * var(--window-height-factor)
  );

  --font-size-s: 0.8rem;
  --font-size-m: calc(var(--font-size-s) * 1.5);
  --font-size-l: calc(var(--font-size-m) * 1.5);
  --font-size-xl: calc(var(--font-size-l) * 1.5);
  --font-size-xxl: calc(var(--font-size-xl) * 1.5);

  --font-weight-light: 200;
  --font-weight-bold: 400;
  --font-weight-extra-bold: 550;

  --opacity-light: 0.6;

  --curve-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

@media screen and (min-width: 640px) {
  :root {
    --color-background: #000;
    --color-primary: #ffffff;
    --color-primary--transparent: rgba(255, 255, 255, 0.86);
    --color-secondary: rgb(120, 171, 150, 0.86);
    --color-secondary--light: rgb(119, 177, 157, 0.25);
    --color-secondary--x-light: rgb(119, 177, 157, 0.15);

    --unit--horizontal: 5vw;
    --unit--vertical: 1.7rem;

    --font-size-s: 0.9rem;
    --font-size-m: calc(var(--font-size-s) * 1.5);
    --font-size-l: calc(var(--font-size-m) * 1.5);
    --font-size-xl: calc(var(--font-size-l) * 1.5);
    --font-size-xxl: calc(var(--font-size-xl) * 1.5);

    --font-weight-light: 200;
    --font-weight-bold: 400;
    --font-weight-extra-bold: 550;
  }
}