@import "tabs.css";
@import "cards.css";
@import "form.css";

:root {
  --font-small: 1.2rem;
}

::selection {
  background: #ff79f9;
  color: #fff;
}

:where([hidden]) {
  display: none !important;
}

@media (prefers-color-scheme: light) {
  html {
    --bgcolor: #fff;
    --bgcolor-accent: #ff731d;
    --bgcolor-inactive: #bababa;
    --color: rgb(68 68 68);
    --color-accent: #ff731d;
    --bgcolor-danger: rgb(255 0 0);
  }
}

@media (prefers-color-scheme: dark) {
  html {
    --bgcolor: #191919;
    --bgcolor-accent: #2d4263;
    --bgcolor-inactive: #535353;
    --color: #c84b31;
    --color-accent: #ecdbba;
    --bgcolor-danger: rgb(255 0 0);
  }

  img {
    opacity: .75;
    transition: opacity .5s ease-in-out;
  }
  img:hover {
    opacity: 1;
  }
}

html {
  font-size: 62.5%;
  line-height: 1;
}

body {
  background-color: var(--bgcolor);
  color: var(--color);
  font-family: monospace;
  font-size: 1.6rem;
  line-height: 1.5;
}

small,
time {
  font-size: var(--font-small);
}

*, ::after, ::before {
  box-sizing: border-box;
}

.danger {
  background-color: var(--bgcolor-danger);
}