html,
body {
  overflow: hidden !important;
  margin: 0;
  padding: 0;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently supported by Chrome and Opera */
}
html *,
body * {
  box-shadow: none !important;
  outline: none !important;
}
@media (prefers-color-scheme: light) {
  body {
    background-color: #fff;
    color: #000;
  }
  svg#logo path {
    fill: #000;
    stroke: #000;
  }
  .btn-light {
    --bs-btn-color: #fff;
    --bs-btn-bg: #6c757d;
    --bs-btn-border-color: #6c757d;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #5c636a;
    --bs-btn-hover-border-color: #565e64;
    --bs-btn-focus-shadow-rgb: 130, 138, 145;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #565e64;
    --bs-btn-active-border-color: #51585e;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #6c757d;
    --bs-btn-disabled-border-color: #6c757d;
  }
  .btn-outline-light {
    --bs-btn-color: #000;
    --bs-btn-border-color: #000;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #6c757d;
    --bs-btn-hover-border-color: #6c757d;
    --bs-btn-focus-shadow-rgb: 108, 117, 125;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #6c757d;
    --bs-btn-active-border-color: #6c757d;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #6c757d;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #6c757d;
    --bs-gradient: none;
  }
}
@media (prefers-color-scheme: dark) {
  body {
    background-color: #000;
    color: #fff;
  }
  svg#logo path {
    fill: #fff;
    stroke: #fff;
  }
}
svg#logo {
  width: 256px;
  height: 256px;
}
svg#logo path {
  fill-opacity: 1;
  stroke-width: 2px;
  stroke-dasharray: 500;
  stroke-dashoffset: 0;
  animation: draw 5s infinite ease-in-out;
}
svg#logo.online path {
  fill: #006400;
  stroke: #006400;
  animation: draw 5s 1 ease-in-out;
  transition: all 4s !important;
}
svg#logo.offline path {
  fill: #640000;
  stroke: #640000;
  animation: draw 5s 1 ease-in-out;
  transition: all 4s !important;
}
@keyframes draw {
  0% {
    stroke-dashoffset: 500;
  }
  10% {
    stroke-dashoffset: 400;
  }
  20% {
    stroke-dashoffset: 300;
  }
  30% {
    stroke-dashoffset: 200;
  }
  40% {
    stroke-dashoffset: 100;
  }
  50% {
    stroke-dashoffset: 0;
  }
  60% {
    stroke-dashoffset: 100;
  }
  70% {
    stroke-dashoffset: 200;
  }
  80% {
    stroke-dashoffset: 300;
  }
  90% {
    stroke-dashoffset: 400;
  }
  100% {
    stroke-dashoffset: 500;
  }
}
