:root {
  --col-primary: rgb(0,180,255);
  --col-highlight: rgb(255,0,170);

  --col-logo: rgb(0,180,255);
  --col-logo-rand: rgb(127,127,127);

  --col-special:
    transparent 20%,
    rgb(0,180,255) 50%,
    rgb(129, 129, 255) 80%,
    rgb(216, 148, 255) 90%,
    rgb(255, 134, 255) 95%,
    transparent 98%;
}


/* Helligkeits-/Dunkelheits-Modus */

@media (prefers-color-scheme: dark) {
  :root {
    --col-minimum: rgb(0,0,0);
    
    --col-background: rgb(44,44,44);
    --col-background-text: rgb(191,191,191);

    --col-foreground: rgb(60,60,60);
    --col-foreground-text: rgb(255,255,255);


    --col-minimum-50: rgba(0,0,0,0.5);

    --col-background-50: rgba(44,44,44,0.5);
    --col-background-text-50: rgba(191,191,191,0.5);

    --col-foreground-50: rgba(60,60,60,0.5);
    --col-foreground-text-50: rgba(255,255,255,0.5);


    --col-hg0: 0;
    --col-hg1: 1;
    --col-hg2: 3;

    --col-panel0: rgba(0,0,0,0.5);
    --col-panel1: rgba(25,25,25,0.5);
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --col-minimum: rgb(255,255,255);

    --col-background: rgb(238,238,238);
    --col-background-text: rgb(64,64,64);

    --col-foreground: rgb(224,224,224);
    --col-foreground-text: rgb(0,0,0);


    --col-minimum-50: rgba(255,255,255,0.5);

    --col-background-50: rgba(238,238,238,0.5);
    --col-background-text-50: rgba(64,64,64,0.5);

    --col-foreground-50: rgba(224,224,224,0.5);
    --col-foreground-text-50: rgba(0,0,0,0.5);


    --col-hg0: 255;
    --col-hg1: -1;
    --col-hg2: 1;

    --col-panel0: rgba(255,255,255,0.5);
    --col-panel1: rgba(245,245,245,0.5);
  }
}