:root {
    --color-background: #f9f9f9;
    --color-primary: #555555;
    --color-secondary: #666666;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-background: #303030;
        --color-primary: #fefefe;
        --color-secondary: #cecece;
    }
}

html {
    background-color: var(--color-background);
}

html, body {
    width: 100%;
    height: 100%;

    padding: 0;
    margin: 0;
    overflow: hidden;

    color: var(--color-primary);
}

canvas {
    height: 100%;
    width: 100%;

    display: none;
}

.loadicator {
    width: 100%;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.loadicator .status-message {
    background-color: var(--color-background);
    font-style: italic;
}

.loadicator-animation {
    z-index: -1;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    width: 100%;
}

.wave-0 {
    animation: waveAnimation-0 4s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.wave-1 {
    animation: waveAnimation-1 4s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes waveAnimation-0 {
    0% {
        d: path("M 0,600 C 0,600 0,200 0,200 C 78,199 157,199 226,212 C 294,224 354,248 447,253 C 539,257 665,242 760,213 C 854,184 917,141 993,140 C 1068,138 1157,178 1234,195 C 1310,211 1375,205 1440,200 C 1440,200 1440,600 1440,600 Z");
    }
    25% {
        d: path("M 0,600 C 0,600 0,200 0,200 C 69,178 138,156 221,146 C 303,135 398,136 493,130 C 587,123 680,110 760,140 C 839,169 906,240 979,248 C 1051,255 1128,198 1206,180 C 1283,161 1361,180 1440,200 C 1440,200 1440,600 1440,600 Z");
    }
    50% {
        d: path("M 0,600 C 0,600 0,200 0,200 C 85,227 170,255 254,234 C 337,212 417,141 493,133 C 568,124 637,178 719,202 C 800,225 892,219 967,199 C 1041,178 1098,142 1174,140 C 1249,137 1344,168 1440,200 C 1440,200 1440,600 1440,600 Z");
    }
    75% {
        d: path("M 0,600 C 0,600 0,200 0,200 C 72,181 144,163 215,171 C 285,178 353,213 439,232 C 524,250 626,254 727,268 C 827,281 924,305 990,273 C 1055,240 1087,151 1157,130 C 1226,108 1333,154 1440,200 C 1440,200 1440,600 1440,600 Z");
    }
    100% {
        d: path("M 0,600 C 0,600 0,200 0,200 C 78,199 157,199 226,212 C 294,224 354,248 447,253 C 539,257 665,242 760,213 C 854,184 917,141 993,140 C 1068,138 1157,178 1234,195 C 1310,211 1375,205 1440,200 C 1440,200 1440,600 1440,600 Z");
    }
}

@keyframes waveAnimation-1 {
    0% {
        d: path("M 0,600 C 0,600 0,400 0,400 C 75,406 150,412 220,400 C 289,387 354,357 446,365 C 537,372 654,419 750,409 C 845,398 918,332 995,328 C 1071,323 1150,382 1225,405 C 1299,427 1369,413 1440,400 C 1440,400 1440,600 1440,600 Z");
    }
    25% {
        d: path("M 0,600 C 0,600 0,400 0,400 C 62,377 125,354 213,379 C 300,403 412,473 502,471 C 591,468 658,392 718,387 C 777,381 828,444 920,462 C 1011,479 1142,450 1236,432 C 1329,413 1384,406 1440,400 C 1440,400 1440,600 1440,600 Z");
    }
    50% {
        d: path("M 0,600 C 0,600 0,400 0,400 C 107,409 214,419 279,422 C 343,424 364,420 442,397 C 519,373 652,330 738,346 C 823,361 860,436 923,443 C 985,449 1072,389 1163,371 C 1253,352 1346,376 1440,400 C 1440,400 1440,600 1440,600 Z");
    }
    75% {
        d: path("M 0,600 C 0,600 0,400 0,400 C 65,398 130,396 210,404 C 289,411 384,428 472,428 C 559,427 641,410 730,409 C 818,407 913,420 987,437 C 1060,453 1111,473 1183,468 C 1254,462 1347,431 1440,400 C 1440,400 1440,600 1440,600 Z");
    }
    100% {
        d: path("M 0,600 C 0,600 0,400 0,400 C 75,406 150,412 220,400 C 289,387 354,357 446,365 C 537,372 654,419 750,409 C 845,398 918,332 995,328 C 1071,323 1150,382 1225,405 C 1299,427 1369,413 1440,400 C 1440,400 1440,600 1440,600 Z");
    }
}