@media all {
  :root {
    --tumbleweed: 53, 185, 171;
    --leap: 251, 199, 93;
    --leapmicro: 223, 115, 32;
    --microos: 151, 58, 132;
    --slowroll: 170, 57, 57;
    --kalpa: 37, 172, 149;
    --background: 255, 255, 255;
   }

}
@media (prefers-color-scheme: dark) {
  :root {
    --background: 0, 0, 0;
  }
}

.bg-tumbleweed .nav-tabs .nav-link:not(.active), .bg-leap .nav-tabs .nav-link:not(.active), .bg-leapmicro .nav-tabs .nav-link:not(.active), .bg-microos .nav-tabs .nav-link:not(.active) {
  background: rgba(255, 255, 255, 0.2);
  color: rgba(0, 0, 0, 0.8)!important;
  transition: 0.3s;
}

.bg-tumbleweed .nav-tabs .nav-link:not(.active):hover, .bg-leap .nav-tabs .nav-link:not(.active):hover, .bg-leapmicro .nav-tabs .nav-link:not(.active):hover, .bg-microos .nav-tabs .nav-link:not(.active):hover {
  background: rgba(255, 255, 255, 0.4);
  border-color: transparent transparent white transparent;
}

.distribution-logo {
  width: 256px;
  height: 256px;
}

.bg-wallpaper {
  background: url('/assets/images/backgrounds/wallpaper.jpg') bottom right no-repeat;
  background-size: cover;
  background-color: #0b212e;
  border-radius: 22px;
  margin: 30px;
}

.bg-server {
  background: url('/assets/images/backgrounds/server-bg.jpg') bottom right no-repeat;
  background-size: cover;
  background-color: #06140d;
  border-radius: 22px;
  margin: 30px;
}

.bg-tumbleweed-tint {
  background: rgba(var(--tumbleweed), 0.3)
}

.bg-tumbleweed {
  background: rgb(var(--tumbleweed))
}

.badge-tumbleweed {
  background: rgb(var(--tumbleweed));
}

.btn-tumbleweed {
  background-color: rgb(var(--tumbleweed));
  border-color: rgb(var(--tumbleweed));
}

.btn-tumbleweed:hover, .btn-leap:hover, .btn-leapmicro:hover, .btn-microos:hover {
  filter: brightness(0.9);
}

.alert-tumbleweed {
  border-color: rgb(var(--tumbleweed));
  background-color: rgba(var(--tumbleweed), 0.2);
}

.bg-leap-tint {
  background: rgba(var(--leap), 0.3)
}

.bg-leap {
  background: rgb(var(--leap))
}

.badge-leap {
  background: rgb(var(--leap));
}

.btn-leap {
  background-color: rgb(var(--leap));
  border-color: rgb(var(--leap));
}

.alert-leap {
  border-color: rgb(var(--leap));
  background-color: rgba(var(--leap), 0.2);
}

.bg-leapmicro-tint {
  background: rgba(var(--leapmicro), 0.3)
}

.bg-leapmicro {
  background: rgb(var(--leapmicro))
}

.badge-leapmicro {
  background: rgb(var(--leapmicro));
}

.btn-leapmicro {
  background-color: rgb(var(--leapmicro));
  border-color: rgb(var(--leapmicro));
}

.alert-leapmicro {
  border-color: rgb(var(--leapmicro));
  background-color: rgba(var(--leapmicro), 0.2);
}

.bg-microos-tint {
  background: rgba(var(--microos), 0.3)
}

.bg-microos {
  background: rgb(var(--microos))
}

.badge-microos {
  background: rgb(var(--microos));
}

.btn-microos {
  background-color: rgb(var(--microos));
  border-color: rgb(var(--microos));
}

.bg-slowroll-tint {
  background: rgba(var(--slowroll), 0.3)
}

.bg-slowroll {
  background: rgb(var(--slowroll))
}

.badge-slowroll {
  background: rgb(var(--slowroll));
}

.btn-slowroll {
  background-color: rgb(var(--slowroll));
  border-color: rgb(var(--slowroll));
}

.bg-kalpa-tint {
  background: rgba(var(--kalpa), 0.3)
}

.bg-kalpa {
  background: rgb(var(--kalpa))
}

.badge-kalpa {
  background: rgb(var(--kalpa));
}

.btn-kalpa {
  background-color: rgb(var(--kalpa));
  border-color: rgb(var(--kalpa));
}

.text-black, .text-black:hover {
  color: black!important;
}

.bg-tumbleweed .nav-tabs .nav-link:not(.active),
.bg-leap .nav-tabs .nav-link:not(.active),
.bg-leapmicro .nav-tabs .nav-link:not(.active),
.bg-microos .nav-tabs .nav-link:not(.active),
.bg-slowroll .nav-tabs .nav-link:not(.active),
.bg-kalpa .nav-tabs .nav-link:not(.active) {
  background: rgba(var(--background), 0.2);
  color: inherit;
}

.bg-tumbleweed .nav-tabs .nav-link:not(.active):hover, .bg-leap .nav-tabs .nav-link:not(.active):hover, .bg-leapmicro .nav-tabs .nav-link:not(.active):hover, .bg-microos .nav-tabs .nav-link:not(.active):hover, .bg-slowroll .nav-tabs .nav-link:not(.active):hover, .bg-aeon .nav-tabs .nav-link:not(.active):hover, .bg-kalpa .nav-tabs .nav-link:not(.active):hover {
  background: rgba(var(--background), 0.4);
  color: white;
  border-color: transparent transparent black transparent;
}

@media (prefers-color-scheme: dark) {
  .border-bottom {
    border-color: #495057!important;
  }
  .bg-light {
    background-color: #272b30!important;
  }
  .list-group-item a .text-dark {
    color: white!important;
  }
  .modal-header {
    border-color: #495057;
  }
}

.videowrapper {
        padding: 50px 0 50px;
        font-size: 0.8em;
        text-align: center;
        float: none;
        clear: both;
        width: 560px;
        margin: 0 auto;
        max-width: 100%;
    }