@media (prefers-color-scheme: light) {
    html, body, main, #main, #loading {
        background: #FFFFFF;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    .loading-text-color {
        color: #000000;
    }
    .md-spinner__circle_stroke {
        stroke: #000000;
    }
}

@media (prefers-color-scheme: dark) {
    html, body, main, #main, #loading {
        background: #151514;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    .loading-logo-text {
        filter: brightness(0) invert(1);
    }
    .loading-text-color {
        color: #FFFFFF;
    }
    .md-spinner__circle_stroke {
        stroke: #FFFFFF;
    }
}

/* Global animation keyframes */
@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fade-grow-in {
    from {
        opacity: 0;
        max-height: 0;
    }
    to {
        opacity: 1;
        max-height: 10em;
    }
}

/* Main */
canvas {
  outline: none;
}

.overlay-frame {
    position: absolute;
    display: none;
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
    overflow: auto;
}

.visible {
    display: block;
}

#loading {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transition: opacity 0.2s ease-out, visibility 0s linear 0.2s;
}

#loading.loading-finished {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease-out, visibility 0s linear 0.2s;
}

.loading-main-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.loading-logo {
    pointer-events: none;
    user-select: none;
    z-index: 50;
}

.loading-logo-text {
    margin-top: 1rem;
    pointer-events: none;
    user-select: none;
    z-index: 50;
}

.loading-text {
    margin-top: 2rem;
    font-size: 1rem;
    font-family: sans-serif;
    display: inline-block;
    z-index: 50;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    animation: fade-grow-in 0.8s ease-in-out 1.5s forwards;
}

.loading-dot {
    display: inline-block;
    z-index: 50;
    opacity: 0;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 2s;
}

/* Dot 1 */
.loading-dot:nth-of-type(1) {
    animation-name: dot1-anim;
}
@keyframes dot1-anim {
    0%,    12.5% { opacity: 0; }
    12.5%, 87.5% { opacity: 1; }
    87.5%,100%  { opacity: 0; }
}

/* Dot 2 */
.loading-dot:nth-of-type(2) {
    animation-name: dot2-anim;
}
@keyframes dot2-anim {
    0%,    37.5% { opacity: 0; }
    37.5%, 87.5% { opacity: 1; }
    87.5%,100%  { opacity: 0; }
}

/* Dot 3 */
.loading-dot:nth-of-type(3) {
    animation-name: dot3-anim;
}
@keyframes dot3-anim {
    0%,    62.5% { opacity: 0; }
    62.5%, 87.5% { opacity: 1; }
    87.5%,100%  { opacity: 0; }
}

/* Material design spinner (copy/pasted) */
.md-spinner {
    display: inline-block;
    width: 48px;
    height: 48px;
    margin-top: 2rem;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    animation: fade-grow-in 0.8s ease-in-out 1.5s forwards;
}

.md-spinner__svg {
    width: 100%;
    height: 100%;
    transform-origin: center center;
    animation: md-spinner-rotate 2s linear infinite both;
    will-change: transform;
}

@keyframes md-spinner-rotate {
    100% { transform: rotate(360deg); }
}

.md-spinner__circle {
    stroke-linecap: round;
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    animation: md-spinner-dash 1.5s ease-in-out infinite both;
    will-change: stroke-dasharray, stroke-dashoffset;
}

@keyframes md-spinner-dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 100, 200;
        stroke-dashoffset: -15;
    }
    100% {
        stroke-dasharray: 100, 200;
        stroke-dashoffset: -125;
    }
}

/* Loading coins */
.loading-coins {
    width: 100vh;
    height: 100vh;
    overflow: hidden;
}

.loading-coins .coin {
    border-radius: 50%;
    height: auto;
    position: absolute;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    opacity: 0;
    transform: scale(0);
    animation: coin-in 1.7s ease-in-out forwards;
}

.loading-coins .coin::after {
    content: "";
    position: absolute;
    z-index: 5;
    top: 0; left: -150%;    /* start well off-screen to the left */
    width: 50%;             /* how wide the gleam is */
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0)   0%,
        rgba(255,255,255,0.6) 50%,
        rgba(255,255,255,0)   100%
    );
    transform: skewX(-20deg);
    animation-duration: 65s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.coin img {
  display: block;
  width: 100%;
  height: auto;
}

@keyframes coin-in {
    from {
        opacity: 0;
        transform: scale(0);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Individual coins (read from top left to right */
/* 1 */
.loading-coins .coin:nth-of-type(1) {
    width: 23%;
    max-width: 200px;
    top: -12%; left: 9.5%;
    animation-delay: 2.5s;
}
.loading-coins .coin:nth-of-type(1) img {
    transform: rotate(-39.56deg);
}
@keyframes shimmer-1 {
  0% { left: -150%; }
  3%, 100% { left: 150%; }
}
.loading-coins .coin:nth-of-type(1)::after {
    animation-name: shimmer-1;
}
/* 2 */
.loading-coins .coin:nth-of-type(2) {
    width: 15%;
    max-width: 126px;
    top: 4%; left: 41%;
    animation-delay: 2.8s;
}
.loading-coins .coin:nth-of-type(2) img {
    transform: rotate(36.13deg);
}
@keyframes shimmer-6 {
  0%, 38% { left: -150%; }
  41%, 100% { left: 150%; }
}
.loading-coins .coin:nth-of-type(2)::after {
    animation-name: shimmer-6;
}
/* 3 */
.loading-coins .coin:nth-of-type(3) {
    width: 22%;
    max-width: 182px;
    top: -14%; right: 20%;
    animation-delay: 3.4s;
}
.loading-coins .coin:nth-of-type(3) img {
    transform: rotate(36.13deg);
}
@keyframes shimmer-11 {
  0%, 79% { left: -150%; }
  82%, 100% { left: 150%; }
}
.loading-coins .coin:nth-of-type(3)::after {
    animation-name: shimmer-11;
}
/* 4 */
.loading-coins .coin:nth-of-type(4) {
    width: 15%;
    max-width: 129px;
    top: 8.6%; right: -4%;
    animation-delay: 3.1s;
}
.loading-coins .coin:nth-of-type(4)::after {
    animation-name: shimmer-4;
}
.loading-coins .coin:nth-of-type(4) img {
    transform: rotate(49.59deg);
}
@keyframes shimmer-4 {
  0%, 24% { left: -150%; }
  27%, 100% { left: 150%; }
}
/* 5 */
.loading-coins .coin:nth-of-type(5) {
    width: 11%;
    max-width: 88px;
    top: 20%; left: 3%;
    animation-delay: 3.35s;
}
.loading-coins .coin:nth-of-type(5) img {
    transform: rotate(27.14deg);
}
@keyframes shimmer-9 {
  0%, 62% { left: -150%; }
  65%, 100% { left: 150%; }
}
.loading-coins .coin:nth-of-type(5)::after {
    animation-name: shimmer-9;
}
/* 6 */
.loading-coins .coin:nth-of-type(6) {
    width: 11%;
    max-width: 88px;
    top: 30%; left: 19%;
    animation-delay: 3.5s;
}
.loading-coins .coin:nth-of-type(6) img {
    transform: rotate(27.14deg);
}
@keyframes shimmer-13 {
  0%, 93% { left: -150%; }
  96%, 100% { left: 150%; }
}
.loading-coins .coin:nth-of-type(6)::after {
    animation-name: shimmer-13;
}
/* 7 */
.loading-coins .coin:nth-of-type(7) {
    width: 11%;
    max-width: 88px;
    top: 20%; right: 12%;
    animation-delay: 3.6s;
}
.loading-coins .coin:nth-of-type(7) img {
    transform: rotate(-68.13deg);
}
@keyframes shimmer-8 {
  0%, 54% { left: -150%; }
  57%, 100% { left: 150%; }
}
.loading-coins .coin:nth-of-type(7)::after {
    animation-name: shimmer-8;
}
/* 8 */
.loading-coins .coin:nth-of-type(8) {
    width: 15.5%;
    max-width: 135px;
    bottom: 21%; left: 9%;
    animation-delay: 3s;
}
.loading-coins .coin:nth-of-type(8) img {
    transform: rotate(69.99deg);
}
@keyframes shimmer-3 {
  0%, 17% { left: -150%; }
  20%, 100% { left: 150%; }
}
.loading-coins .coin:nth-of-type(8)::after {
    animation-name: shimmer-3;
}
/* 9 */
.loading-coins .coin:nth-of-type(9) {
    width: 11%;
    max-width: 88px;
    bottom: 27%; right: 9%;
    animation-delay: 3.2s;
}
.loading-coins .coin:nth-of-type(9) img {
    transform: rotate(27.14deg);
}
@keyframes shimmer-2 {
  0%, 10% { left: -150%; }
  13%, 100% { left: 150%; }
}
.loading-coins .coin:nth-of-type(9)::after {
    animation-name: shimmer-2;
}
/* 10 */
.loading-coins .coin:nth-of-type(10) {
    width: 15%;
    max-width: 124px;
    bottom: 2%; left: -3.5%;
    animation-delay: 2.68s;
}
.loading-coins .coin:nth-of-type(10) img {
    transform: rotate(41.04deg);
}
@keyframes shimmer-7 {
  0%, 46% { left: -150%; }
  49%, 100% { left: 150%; }
}
.loading-coins .coin:nth-of-type(10)::after {
    animation-name: shimmer-7;
}
/* 11 */
.loading-coins .coin:nth-of-type(11) {
    width: 17.5%;
    max-width: 147px;
    bottom: -6%; left: 20%;
    transform: rotate(-37.78deg);
    animation-delay: 3.3s;
}
.loading-coins .coin:nth-of-type(11) img {
    transform: rotate(-37.78deg);
}
@keyframes shimmer-5 {
  0%, 31% { left: -150%; }
  34%, 100% { left: 150%; }
}
.loading-coins .coin:nth-of-type(11)::after {
    animation-name: shimmer-5;
}
/* 12 */
.loading-coins .coin:nth-of-type(12) {
    width: 16.5%;
    max-width: 137px;
    bottom: 8%; right: 24%;
    animation-delay: 3.25s;
}
.loading-coins .coin:nth-of-type(12) img {
    transform: rotate(22.39deg);
}
@keyframes shimmer-12 {
  0%, 86% { left: -150%; }
  89%, 100% { left: 150%; }
}
.loading-coins .coin:nth-of-type(12)::after {
    animation-name: shimmer-12;
}
/* 13 */
.loading-coins .coin:nth-of-type(13) {
    width: 31%;
    max-width: 275px;
    bottom: -21.5%; right: -5%;
    animation-delay: 2.75s;
}
.loading-coins .coin:nth-of-type(13) img {
    transform: rotate(-39.56deg);
}
@keyframes shimmer-10 {
  0%, 71% { left: -150%; }
  74%, 100% { left: 150%; }
}
.loading-coins .coin:nth-of-type(13)::after {
    animation-name: shimmer-10;
}