@media screen and (prefers-color-scheme: dark) {
  :root {
    --bg-col: rgb(20 20 20);
    --fg-col: hsl(220 5% 65%);
    --link-col: rgb(150 150 254);
    --link-hover-col: rgb(206 206 172);
    --link-focus-col: rgb(255 255 96);
    --sec-bg-col: rgb(40 40 40);
    --code-col: rgb(255 255 176); 
    --inline-code-col: rgb(150 203 254);
    --curriculum-bg:  rgb(30, 30, 30);
    /* Neu aus c4ta forms*/
    --secondary-fg: hsl(212 10% 60%);
    --secondary-bg: hsl(212 30% 16%);
    --button-bg: hsl(212 23% 18%);
    --button-hover-bg: hsl(212 30% 23%);
    --button-fg: hsl(205 100% 55%);
    --button-hover-fg: hsl(205 100% 60%);
  }

  .hljs {
    background: var(--sec-bg-col) !important;
    color: hsl(45 100% 45%) !important;
    font-weight: 300;
  }
} 

@media (prefers-color-scheme: light) {
  :root {
    --bg-col: white;
    --fg-col: black;
    --link-col: royalblue;
    --link-hover-col: blue;
    --link-focus-col: orangered;
    --sec-bg-col: #fdf6e3;
    --code-col: #657b83;
    --inline-code-col: rgb(42 161 152); /* solarized cyan */
    --curriculum-bg: #dfdfdf;
    /* Neu aus c4ta forms*/
    --secondary-fg: hsl(212 10% 60%); /* stammt wohl aus dark! */
    --secondary-bg: hsl(92 3% 90%);
    --button-bg: hsl(92 65% 90%);
    --button-hover-bg: hsl(92 70% 80%);
    --button-fg: hsl(225 52% 54%);
    --button-hover-fg: hsl(225 70% 50%);
  }
} 

body {
  color: var(--fg-col);
  background: var(--bg-col);
}

header, main { border-bottom: 5px solid var(--fg-col); } 

header a:link,
footer a:link,
nav a:link,
header a:visited,
footer a:visited,
nav a:visited { color: var(--fg-col); }

header a:hover,
nav a:hover,
footer a:hover {color: var(--link-hover-col); }
header a:focus,
nav a:focus,
footer a:focus { color: var(--link-focus-col); }

main a,
main a:visited { color: var(--link-col); }
main a:hover,
main a:active { color: var(--link-hover-col); }
main a:focus { color: var(--link-focus-col); }

header h1 a:link,
header h1 a:visited,
header h1 a:hover,
header h1 a:focus,
header h1 a { color: var(--fg-col); }

main li > code,
main p > code {
  background: var(--sec-bg-col);
  color: var(--inline-code-col);
  /* box-shadow: var(foo) 0.0625rem 0.0625rem 0.125rem; */
}

/* default colors curriculum */

.name { border-left: 1px solid black; }
.name,
.hours,
.title { background: var(--curriculum-bg); }

/* Dark Curriculum */

@media screen and (prefers-color-scheme: dark) {
  .curriculum { --hue: 220; }
  .month { font-weight: 200; }
  .month h4 {
    font-weight: 500;
    color: hsl(var(--hue) 50% 80%);
  }

  .name { border-left: 1px solid rgb(238, 238, 238); }
  .date { padding-left: 0; }
  .name { letter-spacing: 0.03125rem; }
  .name,
  .hours,
  .title { background: var(--curriculum-bg); }

  .date { color: hsl(var(--hue) 40% 75%); }
  .room { color: hsl(var(--hue) 40% 65%); }
  .name { color: hsl(calc(var(--hue) - 20) 30% 55%); }
  .hours { color: hsl(var(--hue) 40% 50%); }
  .title { color: hsl(calc(var(--hue) - 10) 40% 60%); }

  
  #schoolday-overview { --hue: 30; }
  td { background: transparent !important; }
  tr:hover {
    background: hsl(250 20% 15%);
   }
  #schoolday-overview td a { color: hsl(calc(var(--hue) + 30) 30% 60%); }
  #schoolday-overview tr:hover td a { color: hsl(calc(var(--hue) + 80) 70% 50%); }

}
/* End Dark Curriculum */