@import url("../fonts/lato.css");

:root {
  --blue: #2a9ddf;
  --light-blue: #30b3ff;
  --emphColor: var(--blue);
  --icon-active-color: #2a9ddf;
  --icon-inactive-color: lightgrey;
  --icon-size: 2vmin;
}

/* repeat light mode settings from light.css to override 
   dark mode settings, which don't look nice */
:root {
  --background-body: #ffffff;
  --background: #efefef;
  --background-alt: #f7f7f7;

  --selection: #9e9e9e;

  --text-main: #363636;
  --text-bright: #000000;
  --text-muted: #999999;

  --links: #0076d1;
  --focus: #0096bfab;
  --border: #dbdbdb;
  --code: #000000;

  --animation-duration: 0.1s;
  --button-hover: #dddddd;

  --scrollbar-thumb: rgb(213, 213, 213);
  --scrollbar-thumb-hover: rgb(196, 196, 196);

  --form-placeholder: #949494;
  --form-text: #000000;

  --variable: #39a33c;
  --highlight: #ffff00;
}

body {
  background: #ffffff;
  background-color: #ffffff;
  font-family: "Lato";
  color: #222;
}

header {
  background: var(--blue);
  text-align: center;
}

header > h1,
header > h2 {
  color: white;
}

header > h1 {
  font-size: 50px;
}

h1 {
  margin-top: 3rem;
}

hr {
  margin-top: 2rem;
}

a {
  color: var(--blue);
}

a:hover {
  color: var(--lightblue);
}

details {
  outline: none;
  border: 1px solid black;
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 10px;
}

details summary {
  outline: none;
  padding: 4px;
}

details summary:hover {
  background-color: #2a9ddf58;
}

details summary[icon]::marker {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
  color: var(--blue);
  content: attr(icon);
}

details summary::after {
  font-style: italic;
  content: "(click)...";
}
:lang(de) details summary::after {
  content: "(klicken)...";
}

details input {
  box-sizing: border-box;
  width: 100%;
}
