@charset "utf-8";

/* <VARIABLES> */

:root {
  /* Fonts */

  /*--font-title: Roboto, Helvetica, sans-serif;*/
  --font-title: Helvetica, sans-serif;
  /*--font-default: Roboto, Helvetica, sans-serif;*/
  --font-default: Helvetica, sans-serif;
  --font-reading: Georgia, serif;
  --font-code: Menlo, Courier, monospace;

  /* Sizes */

  --golden-ratio: 1.618;
  --golden-ratio-percent-smallest: 38.2%;
  --golden-ratio-percent-largest: 61.8%;

  --gutter-big: 40px;
  --gutter-default: 20px;
  --gutter-medium: 15px;
  --gutter-thin: 7px;
  --gutter-xthin: 4px;

  --border-radius-default: 4px;
  --border-radius-medium: 15px;

  --header-height: 116px;
  --header-height-alt: 55px;

  --burger-menu-bar-height: 1px;
  --burger-menu-width: 23px;
  --burger-menu-height: 11px; /* (h-3bh) should be even, to divide the gaps by 2 */
  --burger-menu-use-middle-bar: 1; /* 1 = yes, 0 = no */
  --burger-menu-user-rounded-bars: 0; /* 1 = yes, 0 = no */
  /*
		Calculating --burger-menu-height-unfolded is just some Pythagoras
		taking bar height into account. (Rotation origin is x = y = bar height / 2)
		w  = --burger-menu-width      (width)
		bh = --burger-menu-bar-height (bar)
		x  = w - bh                   (width minus the bar)
		hu = √(x²÷2)+bh               (square root of width minus the bar divided by 2 plus bar)
		--------------------
		=> Just replace with the values and type this into google: sqrt(x^2/2)+bh
		--------------------
		Ex: sqrt((33-3)^2/2)+3 ≈ 24.21px

		w: 33, bh: 1 => 23.63
		w: 33, bh: 2 => 23.92
		w: 33, bh: 3 => 24.21
		w: 33, bh: 4 => 24.51 (looks better with h: 19)
	*/
  --burger-menu-height-unfolded: 16.56px;

  --text-size-small: 12px;
  --text-size-medium: 14px;
  --text-size-default: 17px;
  --text-size-big: 20px;
  --text-size-xbig: 30px;
  --text-size-xxbig: 45px;
  --text-size-huge: 60px;
  --text-size-xhuge: 80px;
  --text-size-xxhuge: 100px;

  --input-height-default: 34px;

  --progress-bar-height: 2px;

  --line-height-default: 1.2;
  --line-height-medium: 1.5;
  --line-height-big: 2;

  /* Colors */

  /*
	 * It's better to use them to set other variables than directly in the CSS.
	 * They are to other variables what variables are to CSS, something to centralize
	 * information and avoid repetition.
	 */

  --color-blue-ultradark: #171c21;

  --color-blue-dark: #24292e;
  --color-blue-dark-transparent: rgba(36, 41, 46, 0.2);
  --color-blue-dark-seethrough: rgba(36, 41, 46, 0.33);
  --color-blue-dark-opaque: rgba(36, 41, 46, 0.7);

  --color-blue-electric: #026fe3; /* Hue: 210 */
  --color-blue-electric-darker: #0067d3;
  --color-blue-electric-transparent: rgba(193, 219, 246, 0.3); /* #c1dbf6 */

  --color-orange-yellow: #ffa500; /* HTML orange */
  --color-orange-tangerine: #f5750c; /* Musfit */
  --color-orange-tangerine-lighter: #f77d25;
  --color-orange-tangerine-transparent: rgba(245, 211, 193, 0.3);

  --color-green-sea: #138663;
  --color-green-acid: #1ed400; /* Insegnalis */
  --color-green-pale: #d4eadb;

  --color-yellow-pale: #fafad2; /* lightgoldenrodyellow */
  --color-yellow-gold: #e4d1a4; /* QR */

  --color-red-wine: #6d1c32;
  --color-red-purple: #a4045f; /* Proximii */
  --color-red-acid: #ff005c; /* TBC */
  --color-red-impact: #e43d2a; /* Proximii */

  --color-red-lipstick: #cd3d64;
  --color-red-pale: #fcdce8;

  --color-purple-acid: #8900ff;
  --color-yellow-acid: #e7fa51;

  --color-grey: #586069;
  --color-grey-light: #7d8085;
  --color-grey-xlight: #959da5;
  --color-grey-xxlight: #cccccc;
  --color-grey-xxxlight: #dedede;
  --color-grey-xxxxlight: #f1f1f1;
  --color-grey-xxxxxlight: #f8fafb;

  --color-white-soft-reading: #fafaf8;
  --color-black-soft-reading: #2b2b29;

  /* Colors - Use */

  --color-default: var(--color-blue-dark);
  --color-default-transparent: var(--color-blue-dark-transparent);
  --color-default-seethrough: var(--color-blue-dark-seethrough);
  --color-default-opaque: var(--color-blue-dark-opaque);

  --color-body: white;
  --color-body-transparent: rgba(255, 255, 255, 0);
  --color-header: transparent;
  --color-header-focus: var(--color-blue-dark);
  --color-footer: var(--color-grey-xxxxxlight);

  --color-highlight: var(--color-blue-electric); /* hsl(210, 99%, 89%); */
  --color-highlight-hover: var(--color-blue-electric-darker);
  --color-highlight-halo: var(--color-blue-electric-transparent);

  --color-text-dark: var(--color-blue-ultradark);
  --color-text-default: var(--color-default);
  --color-text-light: var(--color-grey);
  --color-text-xlight: var(--color-grey-light);
  --color-text-xxlight: var(--color-grey-xlight);
  --color-text-xxxlight: var(--color-grey-xxlight);
  --color-text-xxxxlight: var(--color-grey-xxxlight);
  --color-text-xxxxxlight: var(--color-grey-xxxxlight);
  --color-text-xxxxxxlight: var(--color-grey-xxxxxlight);

  --color-link: var(--color-highlight);
  --color-link-hover: var(--color-link);
  --color-link-alt: white;
  --color-link-hover-alt: var(--color-link-alt);

  --color-valid-light: var(--color-green-pale);
  --color-valid: var(--color-green-sea);
  --color-warning-light: var(--color-yellow-pale);
  --color-invalid-light: var(--color-red-pale);
  --color-invalid: var(--color-red-lipstick);
  --color-invalid-dark: var(--color-red-wine);

  --color-disabled: var(--color-text-xxxlight);

  --color-nav-link: var(--color-default);
  --color-nav-link-hover: var(--color-link-hover);
  --color-nav-link-alt: var(--color-link-alt);
  --color-nav-link-hover-alt: var(--color-link-hover-alt);

  --color-burger-menu: var(--color-nav-link);
  --color-burger-menu-alt: var(--color-nav-link-alt);

  /* Shadows */

  --shadow-thin: 0 0 0 1px rgba(49, 49, 93, 0.03);
  --shadow-default:
    0 2px 5px 0 rgba(49, 49, 93, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.08);
  --shadow-medium:
    0 4px 7px 0 rgba(49, 49, 93, 0.1), 0 3px 4px 0 rgba(0, 0, 0, 0.07);
  --shadow-large:
    0 7px 14px 0 rgba(59, 65, 94, 0.1), 0 3px 6px 0 rgba(0, 0, 0, 0.07);
  --shadow-inset-default:
    0 2px 5px 0 rgba(49, 49, 93, 0.1) inset,
    0 1px 2px 0 rgba(0, 0, 0, 0.08) inset;

  /* Speed */

  --transition-duration-default: 200ms;
  --transition-duration-medium: 250ms;
  --transition-duration-slow: 300ms;

  /* Transitions */

  --transition-default: var(--transition-duration-default) ease;
  --transition-medium: var(--transition-duration-medium) ease;
  --transition-slow: var(--transition-duration-slow) ease;

  /* Black & White */

  /* filter: grayscale(100%); */
}

/* <RESPONSIVE> */

@media all and (max-width: 800px) {
  :root {
    --text-size-small: 13px;
    --text-size-medium: 15px;
    --text-size-default: 18px;
    --text-size-big: 21px;
  }
}

/* <ANIMATIONS> */

@keyframes loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes loading-dots {
  0% {
    transform: translateY(0px);
  }
  30% {
    transform: translateY(-6px);
  }
  60% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes shake {
  0% {
    transform-origin: 50% 75%;
    transform: rotate(0deg);
  }
  10% {
    transform-origin: 50% 75%;
    transform: rotate(-10deg);
  }
  20% {
    transform-origin: 50% 75%;
    transform: rotate(10deg);
  }
  30% {
    transform-origin: 50% 75%;
    transform: rotate(0deg);
  }
  40% {
    transform-origin: 50% 75%;
    transform: rotate(10deg);
  }
  50% {
    transform-origin: 50% 75%;
    transform: rotate(-10deg);
  }
  60% {
    transform-origin: 50% 75%;
    transform: rotate(0deg);
  }
  70% {
    transform-origin: 50% 75%;
    transform: rotate(-10deg);
  }
  80% {
    transform-origin: 50% 75%;
    transform: rotate(10deg);
  }
  90% {
    transform-origin: 50% 75%;
    transform: rotate(0deg);
  }
  100% {
    transform-origin: 50% 75%;
    transform: rotate(-10deg);
  }
}