:root {
  color-scheme: light dark;
}

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100vh;
  font-family: 'Poppins', sans-serif;
}

#appbar {
  -webkit-app-region: drag!important;
}

#appbar-controls {
  -webkit-app-region: no-drag!important;
}

@keyframes screen-shake {
  0% {
    transform: translateX(0) translateY(0);
  }

  25% {
    transform: translateX(var(--shake-x, 0)) translateY(var(--shake-y, 0));
  }

  50% {
    transform: translateX(calc(var(--shake-x, 0) * -1)) translateY(calc(var(--shake-y, 0) * -1));
  }

  75% {
    transform: translateX(var(--shake-x, 0)) translateY(var(--shake-y, 0));
  }

  100% {
    transform: translateX(0) translateY(0);
  }
}

.screen-shake {
  animation: screen-shake 0.25s;
}

@media (prefers-color-scheme: dark) {
  body {
    background: #141A21;
    color: #fff;
  }
}

@media (prefers-color-scheme: light) {
  body {
    background: #ddd;
    color: black;
  }
}