@import url(https://fonts.googleapis.com/css?family=Lato:400,300,300italic,400italic,700,700italic);

:root {
  /*this default color will be overwritten from custom/theme.css*/
  --color: #368aff;

  --darker-color: color-mix(in srgb, #000, var(--color) 40%);
  --darker2-color: color-mix(in srgb, #000, var(--color) 80%);
  --darker3-color: color-mix(in srgb, #000, var(--color) 20%);
  --lighter-color: color-mix(in srgb, #fff, var(--color) 10%);
  --lighter2-color: color-mix(in srgb, #fff, var(--color) 40%);
  --error-color: #ff4141;
  /* --debug: 1px solid red; */

  --radius: 12px;
  --border-size: 2px;
  --border-grey: var(--border-size) var(--lighter-color) solid;

  --main-input-width: 1000px;
  --main-input-height: 200px;

  --navigation-height: 30px;
  --logo-height: var(--navigation-height);

  --shadow-extern: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
  --shadow-intern: rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

.dark * {
  --border-grey: var(--border-size) var(--darker3-color) solid;
}