/* actual style (unlike layout) */
:root {
  color-scheme: light dark;
  --line-color: light-dark(rgb(217, 217, 217), rgb(69, 68, 68));
  --accent-hover: light-dark(#ececec, rgb(57, 57, 57));
  --accent-bg: light-dark(#eeeeee, rgb(26, 26, 26));
  --content-bg: light-dark(white, rgb(37, 37, 37));
  --button-hover: light-dark(#dddddd, rgb(72, 72, 72));
  --button-hover-text: light-dark(#00a174, rgb(255, 209, 139));
  --button-pressed: light-dark(#c9c9c9, rgb(85, 85, 85));
  --button-pressed-text: light-dark(#b1ffe9, rgb(232, 147, 98));
  --glow: light-dark(rgb(255, 247, 0), rgb(250, 255, 173));
  --rect-start-bg: light-dark(#b1ffe9, rgb(250, 255, 173));
}

* {
  border-style: solid;
  border-color: var(--line-color);
}

.modal {
  background-color: var(--accent-bg);
  border-style: solid;
  border-color: var(--line-color);
}

.modal-content-pane {
  border-style: solid;
  border-color: var(--line-color);
  background-color: var(--content-bg);
}

p,
th,
td {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 1.1rem;
}

.accent-bg {
  background-color: var(--accent-bg);
}

.content-bg {
  background-color: var(--content-bg);
}

.logo {
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  color: light-dark(rgb(0, 154, 90), rgb(131, 255, 193));
  transition: 2s;
}

.logo:hover {
  color: light-dark(rgb(255, 237, 97), rgb(255, 253, 184));
  text-shadow: var(--glow) 1px 0 10px;
  transition: 5s;
  transition-timing-function: ease-out;
}

@keyframes rotating-r {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes rotating-l {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0deg);
  }
}

.logo:hover>.logo-star-r {
  display: inline-block;
  animation: rotating-r 0.3s linear infinite;
}

.logo:hover>.logo-star-l {
  display: inline-block;
  animation: rotating-l 0.3s linear infinite;
}

table,
th {
  border-collapse: collapse;
}

tr:hover {
  background-color: var(--accent-hover);
}

button,
select {
  background-color: var(--accent-bg);
  transition: 0.3s;
  border-radius: 6px;
}

button:hover,
select:hover {
  color: var(--button-hover-text);
  background-color: var(--button-hover);
  transition: 0.4s;

}

button:active,
select:active {
  color: var(--button-pressed-text);
  background-color: var(--button-pressed);
  transition: none;
}

.CodeMirror {
  font-family: 'Source Code Pro', SFMono-Regular, Consolas, Liberation Mono, 'Lucida Console', 'Courier New', Courier, monospace;
  font-size: 1rem;
}

#error-list>tbody>tr {
  cursor: pointer;
}

dialog:open {
  opacity: 1;
}

dialog {
  opacity: 0;
}

@starting-style {
  dialog:open {
    opacity: 0;
  }
}

dialog::backdrop {
  background-color: transparent;
  transition: opacity 0.5s allow-discrete;
}

dialog:open::backdrop {
  background-color: rgb(0 0 0 / 25%);
  backdrop-filter: blur(3px);
}

@starting-style {
  dialog:open::backdrop {
    background-color: transparent;
  }
}

#waterlevel {
  position: fixed;
  display: block;
  width: 150%;
  height: 150%;
  top: 110%;
  transition: top 5s ease 0s;
  left: -25%;
  animation: upanddown 3s infinite;
  background-color: rgba(32, 193, 205, 0.599);

  box-shadow: inset 0px 1px 1px 0px rgba(43, 156, 179, 0.189),
    inset 0px 19px 50px 25px rgba(216, 251, 255, 0.708);
}

@keyframes upanddown {
  0% {
    transform: translate3d(0, -10px, 0) rotate(0deg);
    backdrop-filter: blur(0px);
    animation-timing-function: ease-in;
  }

  25% {
    transform: translate3d(0, 0px, 0) rotate(0.5deg);
    animation-timing-function: linear;
  }

  50% {
    transform: translate3d(0, 10px, 0) rotate(0deg);
    backdrop-filter: blur(1px);
    background-color: rgba(32, 164, 173, 0.599);
    animation-timing-function: ease-in-out;
  }

  75% {
    transform: translate3d(0, 0px, 0) rotate(-0.5deg);
    animation-timing-function: linear;
  }

  100% {
    transform: translate3d(0, -10px, 0) rotate(0deg);
    backdrop-filter: blur(0px);
    animation-timing-function: ease-out;
  }
}

.spawned-rect {
  position: fixed;
  height: 32px;
  width: 32px;
  background-color: var(--rect-start-bg);
  left: 50%;
  top: 75%;
  transform: translateX(-50%);
  transition: all 0.2s ease-out;
  cursor: crosshair;
}