#stars {
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow: 89vw 73vh #FFF, 27vw 52vh #FFF, 59vw 0vh #FFF, 50vw 5vh #FFF, 41vw 46vh #FFF, 41vw 88vh #FFF, 85vw 62vh #FFF, 18vw 46vh #FFF, 97vw 74vh #FFF, 51vw 62vh #FFF, 2vw 24vh #FFF, 58vw 88vh #FFF, 38vw 33vh #FFF, 62vw 85vh #FFF, 56vw 48vh #FFF, 96vw 87vh #FFF, 39vw 52vh #FFF, 56vw 79vh #FFF, 4vw 59vh #FFF, 5vw 74vh #FFF, 26vw 70vh #FFF, 52vw 60vh #FFF, 57vw 39vh #FFF, 89vw 17vh #FFF, 78vw 92vh #FFF, 81vw 99vh #FFF, 27vw 93vh #FFF, 95vw 13vh #FFF, 47vw 55vh #FFF, 68vw 77vh #FFF, 23vw 58vh #FFF, 72vw 50vh #FFF, 68vw 29vh #FFF, 83vw 6vh #FFF, 90vw 87vh #FFF, 3vw 39vh #FFF, 33vw 14vh #FFF, 38vw 5vh #FFF, 54vw 81vh #FFF, 70vw 15vh #FFF, 34vw 72vh #FFF, 34vw 13vh #FFF, 8vw 97vh #FFF, 62vw 98vh #FFF, 81vw 45vh #FFF, 98vw 62vh #FFF, 79vw 98vh #FFF, 99vw 15vh #FFF, 68vw 79vh #FFF, 51vw 95vh #FFF, 89vw 173vh #FFF, 27vw 152vh #FFF, 59vw 100vh #FFF, 50vw 105vh #FFF, 41vw 146vh #FFF, 41vw 188vh #FFF, 85vw 162vh #FFF, 18vw 146vh #FFF, 97vw 174vh #FFF, 51vw 162vh #FFF, 2vw 124vh #FFF, 58vw 188vh #FFF, 38vw 133vh #FFF, 62vw 185vh #FFF, 56vw 148vh #FFF, 96vw 187vh #FFF, 39vw 152vh #FFF, 56vw 179vh #FFF, 4vw 159vh #FFF, 5vw 174vh #FFF, 26vw 170vh #FFF, 52vw 160vh #FFF, 57vw 139vh #FFF, 89vw 117vh #FFF, 78vw 192vh #FFF, 81vw 199vh #FFF, 27vw 193vh #FFF, 95vw 113vh #FFF, 47vw 155vh #FFF, 68vw 177vh #FFF, 23vw 158vh #FFF, 72vw 150vh #FFF, 68vw 129vh #FFF, 83vw 106vh #FFF, 90vw 187vh #FFF, 3vw 139vh #FFF, 33vw 114vh #FFF, 38vw 105vh #FFF, 54vw 181vh #FFF, 70vw 115vh #FFF, 34vw 172vh #FFF, 34vw 113vh #FFF, 8vw 197vh #FFF, 62vw 198vh #FFF, 81vw 145vh #FFF, 98vw 162vh #FFF, 79vw 198vh #FFF, 99vw 115vh #FFF, 68vw 179vh #FFF, 51vw 195vh #FFF;
    overflow: hidden;
    position: absolute;
}

#stars:after {
    overflow: hidden;
    content: " ";
    position: absolute;
    top: 100vh;
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow: 89vw 73vh #FFF, 27vw 52vh #FFF, 59vw 0vh #FFF, 50vw 5vh #FFF, 41vw 46vh #FFF, 41vw 88vh #FFF, 85vw 62vh #FFF, 18vw 46vh #FFF, 97vw 74vh #FFF, 51vw 62vh #FFF, 2vw 24vh #FFF, 58vw 88vh #FFF, 38vw 33vh #FFF, 62vw 85vh #FFF, 56vw 48vh #FFF, 96vw 87vh #FFF, 39vw 52vh #FFF, 56vw 79vh #FFF, 4vw 59vh #FFF, 5vw 74vh #FFF, 26vw 70vh #FFF, 52vw 60vh #FFF, 57vw 39vh #FFF, 89vw 17vh #FFF, 78vw 92vh #FFF, 81vw 99vh #FFF, 27vw 93vh #FFF, 95vw 13vh #FFF, 47vw 55vh #FFF, 68vw 77vh #FFF, 23vw 58vh #FFF, 72vw 50vh #FFF, 68vw 29vh #FFF, 83vw 6vh #FFF, 90vw 87vh #FFF, 3vw 39vh #FFF, 33vw 14vh #FFF, 38vw 5vh #FFF, 54vw 81vh #FFF, 70vw 15vh #FFF, 34vw 72vh #FFF, 34vw 13vh #FFF, 8vw 97vh #FFF, 62vw 98vh #FFF, 81vw 45vh #FFF, 98vw 62vh #FFF, 79vw 98vh #FFF, 99vw 15vh #FFF, 68vw 79vh #FFF, 51vw 95vh #FFF, 89vw 173vh #FFF, 27vw 152vh #FFF, 59vw 100vh #FFF, 50vw 105vh #FFF, 41vw 146vh #FFF, 41vw 188vh #FFF, 85vw 162vh #FFF, 18vw 146vh #FFF, 97vw 174vh #FFF, 51vw 162vh #FFF, 2vw 124vh #FFF, 58vw 188vh #FFF, 38vw 133vh #FFF, 62vw 185vh #FFF, 56vw 148vh #FFF, 96vw 187vh #FFF, 39vw 152vh #FFF, 56vw 179vh #FFF, 4vw 159vh #FFF, 5vw 174vh #FFF, 26vw 170vh #FFF, 52vw 160vh #FFF, 57vw 139vh #FFF, 89vw 117vh #FFF, 78vw 192vh #FFF, 81vw 199vh #FFF, 27vw 193vh #FFF, 95vw 113vh #FFF, 47vw 155vh #FFF, 68vw 177vh #FFF, 23vw 158vh #FFF, 72vw 150vh #FFF, 68vw 129vh #FFF, 83vw 106vh #FFF, 90vw 187vh #FFF, 3vw 139vh #FFF, 33vw 114vh #FFF, 38vw 105vh #FFF, 54vw 181vh #FFF, 70vw 115vh #FFF, 34vw 172vh #FFF, 34vw 113vh #FFF, 8vw 197vh #FFF, 62vw 198vh #FFF, 81vw 145vh #FFF, 98vw 162vh #FFF, 79vw 198vh #FFF, 99vw 115vh #FFF, 68vw 179vh #FFF, 51vw 195vh #FFF;
}

@keyframes animStar {
    from {
        transform: translateY(0px);
    }
    to {
        transform: translateY(-100vh);
    }
}

@keyframes beat {
    0% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.space {
    background-image: url('../images/Backgrounds/Space.jpg');
    opacity: .7;
    position: absolute;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

@media (orientation:landscape) {
    .space {
        background: url('../images/Backgrounds/Space2.jpg');
        opacity: .6;
        position: absolute;
        overflow: hidden;
        width: 100%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
    }
}

#Mountains {
    pointer-events: none;
    z-index: 7;
}

#Mountains1 {
    fill: #000000;
    z-index: 7;
    bottom: 0px;
    position: absolute;
    width: 100%;
}

.noselect {
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Old versions of Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                    supported by Chrome, Opera and Firefox */
}

#playPad {
    background-color: rgb(14, 14, 14);
    /* background-color: rgb(255, 255, 255); */
    overflow: hidden;
    position: absolute;
}

.planet {
    position: absolute;
    overflow: hidden;
    width: 20vmin;
    height: 20vmin;
    left: calc(50vw - 10vmin);
    top: calc(50% - 10vmin);
    opacity: 1;
    z-index: 7;
}

.explosion {
    position: absolute;
    overflow: hidden;
    width: 200vmin;
    height: 200vmin;
    left: calc(-100vmin + 50vw);
    top: calc(-100vmin + 50%);
    opacity: 0;
    z-index: 0;
}

@keyframes explode {
    0% {
        transform: scale(0);
    }
    1% {
        transform: scale(.1);
        opacity: .4;
    }
    100% {
        transform: scale(2) rotate(60deg);
    }
}

.opacity {
    opacity: .5;
}

#playPads {
    background-color: rgba(0, 0, 255, .07);
    height: calc(100vh - 60px);
    width: 100vw;
    position: absolute;
}

#skyColor {
    background-color: rgba(0, 0, 255, .07);
    height: calc(100vh - 60px);
    width: 100vw;
    position: absolute;
    transition: background-color .5s linear;
    will-change: background-color;
}

#chordPads {
    width: var(--chord-pad-width);
    height: calc(100vh - 60px);
    background-color: rgba(14, 14, 14, .7);
    position: absolute;
    z-index: 10;
}

#chordPad1, #chordPad2, #chordPad3, #chordPad4 {
    height: calc(100% / 4);
    
    -moz-box-shadow: inset 0 0 15vmin black;
    -webkit-box-shadow: inset 0 0 15vmin black;
    box-shadow: inset 0 0 15vmin black;
    will-change: background-color;
    opacity: .6;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /* border: 1px solid rgba(0, 0, 0, 0.5); */
}

#chordPad2 {
    top: calc(100% * 0/4);
}

#chordPad2 {
    top: calc(100% * 1/4);
}

#chordPad3 {
    top: calc(100% * 2/4);
}

#chordPad4 {
    top: calc(100% * 3/4);
}

#skyLight {
    background: radial-gradient(ellipse at bottom, rgba(255, 255, 255, 0.0) 0%, rgb(0, 0, 0) 100%);
    width: 100%;
    height: 100%;
}

#touchPads {
    /* background: radial-gradient(ellipse at bottom, rgba(255,255,255,45) 0%, #000000 100%); */
    width: var(--touch-pads-width);
    /* overflow: hidden; */
    right: 0px;
    height: calc(100vh - 60px);
    position: absolute;
}

#pad1, #pad2, #pad3L, #pad3R, #pad4, #pad5L, #pad5C, #pad5R {
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* border: 1px solid rgba(0, 0, 0, 0.3); */
    height: calc(100% / 5);
    position: absolute;
    z-index: 10;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#pad1, #pad2, #pad4 {
    width: 100%;
    right: 0;
}

#pad3L, #pad3R {
    width: calc(100% / 2);
}

#pad3L {
    right: calc((100% / 2) * 1);
}

#pad3R {
    right: calc((100% / 2) * 0);
}

#pad5L, #pad5C, #pad5R {
    width: calc(100% / 3);
}

#pad5L {
    right: calc((100% / 3) * 2);
}

#pad5C {
    right: calc((100% / 3) * 1);
}

#pad5R {
    right: calc((100% / 3) * 0);
}

#pad1 {
    top: 0;
}

#pad2 {
    top: calc(100% * 1/5);
}

#pad3L, #pad3R {
    top: calc(100% * 2/5);
}

#pad4 {
    top: calc(100% * 3/5);
}

#pad5L, #pad5C, #pad5R {
    top: calc(100% * 4/5);
}

:root {
    --rndX: 0px;
    --rndY: 0px;
    --rndX-inverted: 0px;
    --rndY-inverted: 0px;
    --scale-hard: 0px;
    --attack-fall-distance: 0px;
    --attack-rise-distance: 0px;
    --swell-up-distance: 0px;
    --swell-down-distance: 0px;
    --chord-pad-width: 20%;
    --touch-pads-width: 80%;
    --degrees: 0;
    --opacity-factor: 1;
}

@keyframes flash {
    0% {
        opacity: .1;
    }
    100% {
        opacity: 0;
        scale: 2 2;
    }
}

@keyframes fade {
    0% {
        -moz-transform: scale(0) translate(0px, 0px);
        -webkit-transform: scale(0) translate(0px, 0px);
        -o-transform: scale(0) translate(0px, 0px);
        -ms-transform: scale(0) translate(0px, 0px);
        transform: scale(0) translate(0px, 0px);
        opacity: 1;
    }
    100% {
        -moz-transform: scale(5) translate(var(--rndX), var(--rndY));
        -webkit-transform: scale(5) translate(var(--rndX), var(--rndY));
        -o-transform: scale(5) translate(var(--rndX), var(--rndY));
        -ms-transform: scale(5) translate(var(--rndX), var(--rndY));
        transform: scale(5) translate(var(--rndX), var(--rndY));
        opacity: 0;
    }
}
@keyframes voice {
    0% {
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        opacity: .4;
    }
    100% {
        -moz-transform: scale(5) translate(calc(var(--rndX) * 2), calc(var(--rndY) * 2));
        -webkit-transform: scale(5) translate(calc(var(--rndX) * 2), calc(var(--rndY) * 2));
        -o-transform: scale(5) translate(calc(var(--rndX) * 2), calc(var(--rndY) * 2));
        -ms-transform: scale(5) translate(calc(var(--rndX) * 2), calc(var(--rndY) * 2));
        transform: scale(5) translate(calc(var(--rndX) * 2), calc(var(--rndY) * 2));
        opacity: 0;
    }
}
@keyframes trill {
    0% {
        opacity: calc(var(--opacity-factor) * 0);
    }
    1% {
        opacity: calc(var(--opacity-factor) * 0.04);
    }
    2% {
        opacity: calc(var(--opacity-factor) * 0.01);
    }
    3% {
        opacity: calc(var(--opacity-factor) * 0.08);
    }
    4% {
        opacity: calc(var(--opacity-factor) * 0.02);
    }
    5% {
        opacity: calc(var(--opacity-factor) * 0.12);
    }
    6% {
        opacity: calc(var(--opacity-factor) * 0.03);
    }
    7% {
        opacity: calc(var(--opacity-factor) * 0.16);
    }
    8% {
        opacity: calc(var(--opacity-factor) * 0.04);
    }
    9% {
        opacity: calc(var(--opacity-factor) * 0.2);
    }
    10% {
        opacity: calc(var(--opacity-factor) * 0.05);
    }
    11% {
        opacity: calc(var(--opacity-factor) * 0.24);
    }
    12% {
        opacity: calc(var(--opacity-factor) * 0.06);
    }
    13% {
        opacity: calc(var(--opacity-factor) * 0.28);
    }
    14% {
        opacity: calc(var(--opacity-factor) * 0.07);
    }
    15% {
        opacity: calc(var(--opacity-factor) * 0.32);
    }
    16% {
        opacity: calc(var(--opacity-factor) * 0.08);
    }
    17% {
        opacity: calc(var(--opacity-factor) * 0.36);
    }
    18% {
        opacity: calc(var(--opacity-factor) * 0.09);
    }
    19% {
        opacity: calc(var(--opacity-factor) * 0.4);
    }
    20% {
        opacity: calc(var(--opacity-factor) * 0.1);
    }
    21% {
        opacity: calc(var(--opacity-factor) * 0.44);
    }
    22% {
        opacity: calc(var(--opacity-factor) * 0.11);
    }
    23% {
        opacity: calc(var(--opacity-factor) * 0.48);
    }
    24% {
        opacity: calc(var(--opacity-factor) * 0.12);
    }
    25% {
        opacity: calc(var(--opacity-factor) * 0.52);
    }
    26% {
        opacity: calc(var(--opacity-factor) * 0.13);
    }
    27% {
        opacity: calc(var(--opacity-factor) * 0.56);
    }
    28% {
        opacity: calc(var(--opacity-factor) * 0.14);
    }
    29% {
        opacity: calc(var(--opacity-factor) * 0.6);
    }
    30% {
        opacity: calc(var(--opacity-factor) * 0.15);
    }
    31% {
        opacity: calc(var(--opacity-factor) * 0.64);
    }
    32% {
        opacity: calc(var(--opacity-factor) * 0.16);
    }
    33% {
        opacity: calc(var(--opacity-factor) * 0.68);
    }
    34% {
        opacity: calc(var(--opacity-factor) * 0.17);
    }
    35% {
        opacity: calc(var(--opacity-factor) * 0.72);
    }
    36% {
        opacity: calc(var(--opacity-factor) * 0.18);
    }
    37% {
        opacity: calc(var(--opacity-factor) * 0.76);
    }
    38% {
        opacity: calc(var(--opacity-factor) * 0.19);
    }
    39% {
        opacity: calc(var(--opacity-factor) * 0.8);
    }
    40% {
        opacity: calc(var(--opacity-factor) * 0.2);
    }
    41% {
        opacity: calc(var(--opacity-factor) * 0.84);
    }
    42% {
        opacity: calc(var(--opacity-factor) * 0.21);
    }
    43% {
        opacity: calc(var(--opacity-factor) * 0.88);
    }
    44% {
        opacity: calc(var(--opacity-factor) * 0.22);
    }
    45% {
        opacity: calc(var(--opacity-factor) * 0.92);
    }
    46% {
        opacity: calc(var(--opacity-factor) * 0.23);
    }
    47% {
        opacity: calc(var(--opacity-factor) * 0.96);
    }
    48% {
        opacity: calc(var(--opacity-factor) * 0.24);
    }
    49% {
        opacity: calc(var(--opacity-factor) * 1);
    }
    50% {
        opacity: calc(var(--opacity-factor) * 0.23);
    }
    51% {
        opacity: calc(var(--opacity-factor) * 0.96);
    }
    52% {
        opacity: calc(var(--opacity-factor) * 0.22);
    }
    53% {
        opacity: calc(var(--opacity-factor) * 0.92);
    }
    54% {
        opacity: calc(var(--opacity-factor) * 0.21);
    }
    55% {
        opacity: calc(var(--opacity-factor) * 0.88);
    }
    56% {
        opacity: calc(var(--opacity-factor) * 0.2);
    }
    57% {
        opacity: calc(var(--opacity-factor) * 0.84);
    }
    58% {
        opacity: calc(var(--opacity-factor) * 0.19);
    }
    59% {
        opacity: calc(var(--opacity-factor) * 0.8);
    }
    60% {
        opacity: calc(var(--opacity-factor) * 0.18);
    }
    61% {
        opacity: calc(var(--opacity-factor) * 0.76);
    }
    62% {
        opacity: calc(var(--opacity-factor) * 0.17);
    }
    63% {
        opacity: calc(var(--opacity-factor) * 0.72);
    }
    64% {
        opacity: calc(var(--opacity-factor) * 0.16);
    }
    65% {
        opacity: calc(var(--opacity-factor) * 0.68);
    }
    66% {
        opacity: calc(var(--opacity-factor) * 0.15);
    }
    67% {
        opacity: calc(var(--opacity-factor) * 0.64);
    }
    68% {
        opacity: calc(var(--opacity-factor) * 0.14);
    }
    69% {
        opacity: calc(var(--opacity-factor) * 0.6);
    }
    70% {
        opacity: calc(var(--opacity-factor) * 0.13);
    }
    71% {
        opacity: calc(var(--opacity-factor) * 0.56);
    }
    72% {
        opacity: calc(var(--opacity-factor) * 0.12);
    }
    73% {
        opacity: calc(var(--opacity-factor) * 0.52);
    }
    74% {
        opacity: calc(var(--opacity-factor) * 0.11);
    }
    75% {
        opacity: calc(var(--opacity-factor) * 0.48);
    }
    76% {
        opacity: calc(var(--opacity-factor) * 0.1);
    }
    77% {
        opacity: calc(var(--opacity-factor) * 0.44);
    }
    78% {
        opacity: calc(var(--opacity-factor) * 0.09);
    }
    79% {
        opacity: calc(var(--opacity-factor) * 0.4);
    }
    80% {
        opacity: calc(var(--opacity-factor) * 0.08);
    }
    81% {
        opacity: calc(var(--opacity-factor) * 0.36);
    }
    82% {
        opacity: calc(var(--opacity-factor) * 0.07);
    }
    83% {
        opacity: calc(var(--opacity-factor) * 0.32);
    }
    84% {
        opacity: calc(var(--opacity-factor) * 0.06);
    }
    85% {
        opacity: calc(var(--opacity-factor) * 0.28);
    }
    86% {
        opacity: calc(var(--opacity-factor) * 0.05);
    }
    87% {
        opacity: calc(var(--opacity-factor) * 0.24);
    }
    88% {
        opacity: calc(var(--opacity-factor) * 0.04);
    }
    89% {
        opacity: calc(var(--opacity-factor) * 0.2);
    }
    90% {
        opacity: calc(var(--opacity-factor) * 0.03);
    }
    91% {
        opacity: calc(var(--opacity-factor) * 0.16);
    }
    92% {
        opacity: calc(var(--opacity-factor) * 0.02);
    }
    93% {
        opacity: calc(var(--opacity-factor) * 0.12);
    }
    94% {
        opacity: calc(var(--opacity-factor) * 0.01);
    }
    95% {
        opacity: calc(var(--opacity-factor) * 0.08);
    }
    96% {
        opacity: calc(var(--opacity-factor) * 0);
    }
    97% {
        opacity: calc(var(--opacity-factor) * 0.04);
    }
    98% {
        opacity: calc(var(--opacity-factor) * 0);
    }
    99% {
        opacity: calc(var(--opacity-factor) * 0);
    }
    100% {
        opacity: calc(var(--opacity-factor) * 0);
    }
}
@keyframes starsUp {
    0% {
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
    1% {
        -moz-transform: scale(.2);
        -webkit-transform: scale(.2);
        -o-transform: scale(.2);
        -ms-transform: scale(.2);
        transform: scale(.2);
    }
    100% {
        -moz-transform: scale(.1) translate(var(--rndX), -200vh);
        -webkit-transform: scale(.1) translate(var(--rndX), -200vh);
        -o-transform: scale(.1) translate(var(--rndX), -200vh);
        -ms-transform: scale(.1) translate(var(--rndX), -200vh);
        transform: scale(.1) translate(var(--rndX), -200vh);
        opacity: 0;
    }
}
@keyframes starsDown {
    0% {
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
    1% {
        -moz-transform: scale(.2);
        -webkit-transform: scale(.2);
        -o-transform: scale(.2);
        -ms-transform: scale(.2);
        transform: scale(.2);
    }
    100% {
        -moz-transform: scale(.1) translate(var(--rndX), 500vh);
        -webkit-transform: scale(.1) translate(var(--rndX), 500vh);
        -o-transform: scale(.1) translate(var(--rndX), 500vh);
        -ms-transform: scale(.1) translate(var(--rndX), 500vh);
        transform: scale(.1) translate(var(--rndX), 500vh);
        opacity: 0;
    }
}
@keyframes starsRandom {
    0% {
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
    1% {
        -moz-transform: scale(.2);
        -webkit-transform: scale(.2);
        -o-transform: scale(.2);
        -ms-transform: scale(.2);
        transform: scale(.2);
    }
    100% {
        -moz-transform: scale(.1) translate(var(--rndX), var(--rndY));
        -webkit-transform: scale(.1) translate(var(--rndX), var(--rndY));
        -o-transform: scale(.1) translate(var(--rndX), var(--rndY));
        -ms-transform: scale(.1) translate(var(--rndX), var(--rndY));
        transform: scale(.1) translate(var(--rndX), var(--rndY));
        opacity: 0;
    }
}
@keyframes fallingStars {
    0% {
        -moz-transform: scale(.05) rotate(var(--degrees));
        -webkit-transform: scale(.05) rotate(var(--degrees));
        -o-transform: scale(.05) rotate(var(--degrees));
        -ms-transform: scale(.05) rotate(var(--degrees));
        transform: scale(.05) rotate(var(--degrees));
        opacity: 1;
    }
    100% {
        -moz-transform: scale(1) translate(var(--rndX), var(--rndY)) rotate(var(--degrees));
        -webkit-transform: scale(1) translate(var(--rndX), var(--rndY)) rotate(var(--degrees));
        -o-transform: scale(1) translate(var(--rndX), var(--rndY)) rotate(var(--degrees));
        -ms-transform: scale(1) translate(var(--rndX), var(--rndY)) rotate(var(--degrees));
        transform: scale(1) translate(var(--rndX), var(--rndY)) rotate(var(--degrees));
        opacity: 0;
    }
}
@keyframes flares {
    0% {
        -moz-transform: scale(.05) rotate(var(--degrees));
        -webkit-transform: scale(.05) rotate(var(--degrees));
        -o-transform: scale(.05) rotate(var(--degrees));
        -ms-transform: scale(.05) rotate(var(--degrees));
        transform: scale(.05) rotate(var(--degrees));
        opacity: 1;
    }
    60% {
        -moz-transform: scale(1) translate(var(--rndX), var(--rndY)) rotate(var(--degrees));
        -webkit-transform: scale(1) translate(var(--rndX), var(--rndY)) rotate(var(--degrees));
        -o-transform: scale(1) translate(var(--rndX), var(--rndY)) rotate(var(--degrees));
        -ms-transform: scale(1) translate(var(--rndX), var(--rndY)) rotate(var(--degrees));
        transform: scale(1) translate(var(--rndX), var(--rndY)) rotate(var(--degrees));
        opacity: 0.4;
    }
    100% {
        -moz-transform: scale(1) translate(var(--rndX), var(--rndY)) rotate(var(--degrees));
        -webkit-transform: scale(1) translate(var(--rndX), var(--rndY)) rotate(var(--degrees));
        -o-transform: scale(1) translate(var(--rndX), var(--rndY)) rotate(var(--degrees));
        -ms-transform: scale(1) translate(var(--rndX), var(--rndY)) rotate(var(--degrees));
        transform: scale(1) translate(var(--rndX), var(--rndY)) rotate(var(--degrees));
        opacity: 0;
    }
}

.nebula {
    position: absolute;
    overflow: hidden;
    width: 100vmin;
    height: calc(100vmin * (677/1080));
    left: calc((100vw - 100vmin) / 2);
    top: calc((100% - (100vmin * (677/1080))) / 2);
    opacity: 0;
    z-index: 0;
}


#playPadHelp {
    width: 30px;
    height: 30px;
    position: absolute;
    left: 0;
    z-index: 11;
    bottom: 60px;
    cursor: pointer;
    margin: 10px;
    filter: invert(1);
    -webkit-filter: invert(1);
}

.modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 110;
    /* Sit on top */
    padding-top: 100px;
    /* Location of the box */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4);
    /* Black w/ opacity */
}

.modal-content {
    border: none;
    border-radius: 10px;
    font: normal 30px sans-serif;
    color: rgb(14, 14, 14);
    text-decoration: none;
    font-size: 16px;
    background-color: #ffffffec;
    margin: auto;
    padding: 15px;
    width: 80%;
}

.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover, .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}