:root,
.theme_day {
  --accent-color: #3280e8;
  --accent-color-contrast: #ffffff;

  --color-on: #008d1c;
  --color-on-contrast: #ffffff;
  --color-off: #971919;
  --color-off-contrast: #ffffff;

  --color: #000000;
  --color-background: #ffffff;
  --color-background2: #dddddd;
  --color-link: #0d3e9a;
  --color-faded-out: #808080;

  /*
  --color-nav: #000000;
  --color-nav-background: #bebebe;
  --color-nav-hover: #FFFFFF;
  --color-nav-hover-background: #1e1e1e;
  --color-footer: #000000;
  --color-footer-background: #bebebe;
  */
  --color-nav: #ffffff;
  --color-nav-background: #292929;
  --color-nav-hover: #000000;
  --color-nav-hover-background: #ffffff;
  --color-footer: #ffffff;
  --color-footer-background: #292929;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color: #ffffff;
    --color-background: #0f0f0f; /* #202020 */
    --color-background2: #242424; /* #2c2c2c; */
    --color-link: #ffa500;
    --color-faded-out: #808080;

    --color-nav: #ffffff;
    --color-nav-background: #1e1e1e;
    --color-nav-hover: #000000;
    --color-nav-hover-background: #ffffff;
    --color-footer: #ffffff;
    --color-footer-background: #1e1e1e;
  }
}
.theme_night {
  --color: #ffffff;
  --color-background: #0f0f0f;
  --color-background2: #242424;
  --color-link: #ffa500;
  --color-faded-out: #808080;

  --color-nav: #ffffff;
  --color-nav-background: #1e1e1e;
  --color-nav-hover: #000000;
  --color-nav-hover-background: #ffffff;
  --color-footer: #ffffff;
  --color-footer-background: #1e1e1e;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0px;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--color);
  background-color: var(--color-background);
  overflow-y: scroll; /* sodass sich in da suchansicht die nav nicht verändert */
}

main {
  background-color: var(--color-background);
  /* min-height: calc(100vh - 51px - 100px); */
  /* width: min(90%, 1150px);
  margin-inline: auto; */
  padding: 30px
    max(env(safe-area-inset-right), calc((100vw - min(90vw, 1150px)) / 2)) 100px
    max(env(safe-area-inset-left), calc((100vw - min(90vw, 1150px)) / 2));
}

p {
  font-size: 18px;
}

a {
  color: var(--color-link) !important;
  text-decoration: underline;
  cursor: pointer;
}

button {
  touch-action: manipulation;
  font-size: 18px;
  padding: 10px 16px;
  margin: 8px 8px 8px 0px;
  border-radius: 4px;
  cursor: pointer;
  border: none;
  background-color: var(--accent-color);
  color: var(--accent-color-contrast);
  font-weight: bold;
}
button.on {
  background-color: var(--color-on) !important;
  color: var(--color-on-contrast) !important;
}
button.off {
  background-color: var(--color-off) !important;
  color: var(--color-off-contrast) !important;
}
button.nobutton {
  color: var(--accent-color-contrast);
  background-color: transparent;
  border: none;
  text-align: center;
  cursor: pointer;
  padding-top: 0px;
  padding-bottom: 0px;
}
button:disabled,
button[disabled] {
  background-color: var(--color-faded-out);
}