@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans+Condensed:wght@1..1000&family=Urbanist:wght@100..900&display=swap');

@font-face {
    font-family: 'Seven Segment';
    src: url('7segment.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


:root {
    --white: #eee;
    --grey: #cbcbcb;
    --black: #111;
    --yellow-muted: #e0cfae;
    --yellow: #ffd579;
    --orange-muted: #e0b296;
    --orange: #fd987e;
    --display-bg: #7c837e;
    --display-text: #000;
}

.dark-side-mode {
    filter: brightness(0.5) contrast(1.5);
    transition: filter 2s ease-in-out;
}

.dark-side-mode .led.on,
.dark-side-mode .led.blinking {
    filter: brightness(1.5) !important;
}

.dark-side-mode .btn.active,
.dark-side-mode .skip-btn.active {
    filter: brightness(1.5) !important;
}

body,
html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    perspective: 100cm;
    user-select: none;
}

button {
    cursor: pointer;
    pointer-events: auto !important;
}

#audio-overlay {
    position: fixed;
    inset: 0;
    padding: 3rem;
    background: rgba(0, 0, 0, 0.8);
    font-family: "Urbanist", sans-serif;
    text-align: center;
    text-transform: uppercase;
    color: var(--white);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    z-index: 100;
    backdrop-filter: blur(5px);
}

#audio-overlay h2 {
    font-family: "Sofia Sans Condensed", sans-serif;
    font-weight: 700;
    font-size: 6rem;
    margin: 0;
    color: var(--grey);

    .g {
        color: white;
        text-shadow: 0 0 20px black;
    }
}

#audio-overlay p {
    font-size: 1.2rem;
    margin: 0 0 3rem 0;
    color: #ccc;
}

.start-button {
    font-family: "Sofia Sans Condensed", sans-serif;
    font-weight: 700;
    font-size: 3rem;
    padding: 0.5rem 1.5rem;
    background-color: var(--black);
    color: var(--white);
    border-radius: 8px;
    box-shadow: 0 0 20px black;
}

.start-button:hover {
    box-shadow: 0 0 30px black;
}

.start-button:active {
    box-shadow: none;
}

#audio-overlay.hidden {
    display: none;
}

#segment-fade-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.8s ease-in-out;
}

#segment-fade-overlay.fading {
    opacity: 1;
}

#main {
    position: fixed;
    display: flex;
    flex-direction: column;
    height: 100vh;
    outline: var(--grey) solid 1000px;
}

#top-panel {
    flex: 10;
    display: flex;
    flex-direction: row;
    width: 100vw;
}

#control {
    flex: 1;
    background: var(--grey);
    padding: 1rem;
    display: grid;
    justify-items: center;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    grid-template-columns: 2fr 1fr 2fr;
    grid-template-rows: 2fr 1fr 1fr;
    transform: scale(1.01);
    z-index: 4;
    min-width: 0;
    width: fit-content;
    overflow: visible;
    transition: all 0.5s ease;
}

#main.wv {
    #control {
        flex: 0;
        padding: 0;
        overflow: hidden;
    }

    #bottom-panel {
        flex: 0;
        height: 0;
        overflow: hidden;
    }

    #window-spacer {
        width: calc(40vw - 15rem);
    }

    #window-border {
        width: 90vh;
        height: 90vh;
        top: 50%;
        left: 50%;
        animation: border-expand 0.5s forwards ease;
    }

    #window-mask {
        animation: mask-expand 0.8s forwards ease;
    }
}

@keyframes border-expand {
    0% {
        background-color: transparent;
        width: 30rem;
        height: 30rem;
    }

    80% {
        background-color: var(--grey);
    }

    100% {
        background-color: transparent;
        width: 90vh;
        height: 90vh;
    }
}

@keyframes mask-expand {

    0% {
        mask: radial-gradient(circle at 50% 50%, transparent 14rem, black 16rem);
        -webkit-mask: radial-gradient(circle at 50% 50%, transparent 14rem, black 16rem);
    }

    100% {
        mask: radial-gradient(circle at 50% 50%, transparent 14rem, black 16rem);
        -webkit-mask: radial-gradient(circle at 50% 50%, transparent 14rem, black 16rem);
        mask: radial-gradient(circle at 50% 50%, transparent 40vh, black 45vh);
        -webkit-mask: radial-gradient(circle at 50% 50%, transparent 40vh, black 45vh);
    }
}

.label {
    font-family: "Urbanist", sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: var(--black);
    margin-bottom: 10px;
    text-transform: uppercase;
    text-align: center;
}

#buttons-container {
    grid-column-start: 2;
    grid-row-start: 1;
    grid-column-end: 4;
    background: var(--grey);
    border-radius: 8px;
    border: 2px outset;
    padding: 0.5rem;
    width: calc(100% - 2rem);
    min-width: fit-content;
    height: calc(100% - 2rem);
    min-height: 17rem;
    max-height: 15rem;
    display: flex;
    flex-direction: column;
}

.button-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    gap: 0.5rem;
    flex: 1;
    align-items: stretch;
}

.btn-container {
    background: var(--grey);
    border-radius: 6px;
    border: 2px inset;
    border-color: initial;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn {
    font-family: "Sofia Sans Condensed", sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--black);
    border-radius: 4px;
    border: 1px solid var(--black);
    cursor: pointer;
    text-align: center;
    line-height: 1;
    text-wrap: nowrap;
    width: 100%;
    min-width: fit-content;
    padding: 0.5rem 1rem;
    height: 100%;
    box-shadow:
        inset 0 0 10px rgba(0, 0, 0, 0.5),
        inset 0 1px 2px rgba(0, 0, 0, 0.3);
    z-index: 5;

    &.white-btn {
        background-color: var(--grey);
    }

    &.yellow-btn {
        background-color: var(--yellow-muted);
    }

    &.orange-btn {
        background-color: var(--orange-muted);
    }
}

.btn.active {
    border: var(--black) solid 1px;
    color: black;

    &.white-btn {
        background-color: white;
        box-shadow:
            inset 0 0 10px rgba(0, 0, 0, 0.2),
            0 0 1rem 0.5rem white;
    }

    &.yellow-btn {
        background-color: var(--yellow);
        box-shadow:
            inset 0 0 10px rgba(0, 0, 0, 0.2),
            0 0 1rem 0.5rem var(--yellow-muted);
    }

    &.orange-btn {
        background-color: var(--orange);
        box-shadow:
            inset 0 0 10px rgba(0, 0, 0, 0.2),
            0 0 1rem 0.5rem var(--orange-muted);
    }
}

.btn-container:has(.btn.active) {
    border: 2px outset var(--grey);
}

.btn-container:hover {
    .btn {
        box-shadow:
            inset 0 0 20px rgba(0, 0, 0, 0.5),
            inset 0 2px 4px rgba(0, 0, 0, 0.3);
    }

    .white-btn {
        background-color: var(--white);
        box-shadow:
            inset 0 0 10px rgba(0, 0, 0, 0.5),
            inset 0 1px 2px rgba(0, 0, 0, 0.3);
    }

    .yellow-btn {
        background-color: var(--yellow);
        box-shadow:
            inset 0 0 10px rgba(0, 0, 0, 0.5),
            inset 0 1px 2px rgba(0, 0, 0, 0.3),
            inset 0 0 20px 10px var(--yellow-muted);
    }

    .orange-btn {
        background-color: var(--orange);
        box-shadow:
            inset 0 0 10px rgba(0, 0, 0, 0.5),
            inset 0 1px 2px rgba(0, 0, 0, 0.3),
            inset 0 0 20px 10px var(--orange-muted);
    }

    .white-btn.active {
        background-color: var(--white);
        box-shadow:
            inset 0 0 20px white,
            0 0 1rem 0.5rem white;
    }

    .yellow-btn.active {
        background-color: var(--yellow);
        box-shadow:
            inset 0 0 20px var(--yellow-muted),
            0 0 1rem 0.5rem var(--yellow-muted);
    }

    .orange-btn.active {
        background-color: var(--orange);
        box-shadow:
            inset 0 0 20px var(--orange-muted),
            0 0 1rem 0.5rem var(--orange-muted);
    }
}

#lights-container {
    grid-column-start: 1;
    grid-row-start: 1;
    background: var(--grey);
    padding: 0.5rem;
    border-radius: 8px;
    border: 2px outset;
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    width: calc(100% - 2rem);
    min-width: fit-content;
    height: calc(100% - 2rem);
    min-height: fit-content;
    max-height: 15rem;
}

#led-labels {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-right: 1rem;
    writing-mode: vertical-lr;
    text-orientation: mixed;
    transform: rotate(180deg);
    min-height: 17rem;
}

.led-label {
    font-family: "Urbanist", sans-serif;
    font-weight: 500;
    font-size: 1rem;
    color: var(--black);
    text-transform: uppercase;
}

#leds {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    gap: 0.1rem;
}

.led-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
}

.led {
    width: 0.5rem;
    height: 0.5rem;
    margin: 0 0.25rem;
    border: 1px inset;
    border-radius: 50%;
    background: var(--black);
    box-shadow: inset -1px -1px 5px rgba(0, 0, 0, 0.5);

    &.white-led {
        background: var(--white);

        &.on {
            background: white;
            border: 1px inset white;
            box-shadow:
                inset -1px -1px 3px rgba(0, 0, 0, 0.2),
                0 0 1rem 0.5rem white;
        }

        &.blinking {
            animation: white-blink-animation 1s infinite;
        }
    }

    &.yellow-led {
        background: var(--yellow-muted);

        &.on {
            background: var(--yellow);
            border: 1px inset var(--yellow-muted);
            box-shadow:
                inset -1px -1px 3px rgba(0, 0, 0, 0.2),
                0 0 1rem 0.5rem var(--yellow);
        }

        &.blinking {
            animation: yellow-blink-animation 1s infinite;
        }
    }

    &.orange-led {
        background: var(--orange-muted);

        &.on {
            background: var(--orange);
            border: 1px inset var(--orange-muted);
            box-shadow:
                inset -1px -1px 3px rgba(0, 0, 0, 0.2),
                0 0 1rem 0.5rem var(--orange);
        }

        &.blinking {
            animation: orange-blink-animation 1s infinite;
        }
    }
}

@keyframes white-blink-animation {

    0%,
    50%,
    100% {
        border: 1px inset var(--white);
        background: var(--white);
        box-shadow: inset -1px -1px 5px rgba(0, 0, 0, 0.5);
    }

    25%,
    75% {
        background: white;
        border: 1px inset white;
        box-shadow:
            inset -1px -1px 3px rgba(0, 0, 0, 0.2),
            0 0 1rem 0.5rem white;
    }
}

@keyframes yellow-blink-animation {

    0%,
    50%,
    100% {
        border: 1px inset var(--yellow-muted);
        background: var(--yellow-muted);
        box-shadow: inset -1px -1px 5px rgba(0, 0, 0, 0.5);
    }

    25%,
    75% {
        background: var(--yellow);
        border: 1px inset var(--yellow-muted);
        box-shadow:
            inset -1px -1px 3px rgba(0, 0, 0, 0.2),
            0 0 1rem 0.5rem var(--yellow);
    }
}

@keyframes orange-blink-animation {

    0%,
    50%,
    100% {
        border: 1px inset var(--orange-muted);
        background: var(--orange-muted);
        box-shadow: inset -1px -1px 5px rgba(0, 0, 0, 0.5);
    }

    25%,
    75% {
        background: var(--orange);
        border: 1px inset var(--orange-muted);
        box-shadow:
            inset -1px -1px 3px rgba(0, 0, 0, 0.2),
            0 0 1rem 0.5rem var(--orange);
    }
}

.led-spacer {
    height: 0.5rem;
}

#stages-container {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 2;
    background: var(--grey);
    padding: 0.5rem;
    border-radius: 8px;
    border: 2px outset;
    display: flex;
    flex-direction: column;
    width: calc(100% - 2rem);
    min-width: 22rem;
}

.stages-display {
    position: relative;
    background: var(--display-bg);
    border: 2px inset var(--display-bg);
    border-radius: 4px;
    padding: 1rem;
    box-shadow:
        inset 0 0 20px rgba(0, 0, 0, 0.5),
        inset 0 2px 4px rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3px;
    flex: 1;
}

.stage-segment {
    height: 3.5rem;
    width: auto;
    opacity: 1;
    transition: opacity 0.3s ease;
    user-select: none;
    filter: drop-shadow(0 0 30px rgba(0, 0, 0, 0.5));
}

.stage-separator {
    width: 3rem;
}

.stage-segment.off {
    opacity: 0.1;
    filter: none;
}

.stage-segment.blinking {
    animation: blink-animation 1s infinite;
}

@keyframes blink-animation {

    0%,
    50%,
    100% {
        opacity: 1;
    }

    25%,
    75% {
        opacity: 0.1;
    }
}


#time-container {
    grid-column-start: 1;
    grid-row-start: 3;
    grid-column-end: 3;
    background: var(--grey);
    padding: 0.5rem;
    border-radius: 8px;
    border: 2px outset;
    width: calc(100% - 2rem);
    min-width: 22rem;
    height: 6rem;
}

.seven-segment {
    position: relative;
    background: var(--display-bg);
    border: 2px inset var(--display-bg);
    border-radius: 4px;
    padding: 1rem 1rem;
    box-shadow:
        inset 0 0 20px rgba(0, 0, 0, 0.5),
        inset 0 2px 4px rgba(0, 0, 0, 0.3);
    font-family: 'Seven Segment', monospace;
    font-style: italic;
    font-size: 2rem;
    letter-spacing: 6px;
    line-height: 1;
    text-align: center;
    user-select: none;
}

.segment-background {
    color: rgba(0, 0, 0, 0.1);
}

.segment-active {
    color: black;
    position: absolute;
    top: 1rem;
    left: 1rem;
    right: 1rem;
    text-shadow:
        0 0 30px black;
}

#skip-container {
    grid-column-start: 3;
    grid-row-start: 3;
    background: var(--grey);
    padding: 0;
    border-radius: 8px;
    border: 2px inset;
    border-color: initial;
}

#skip-btn {
    background-color: var(--white);
    color: var(--black);
    border: var(--black) solid 1px;
    border-radius: 6px;
    font-family: "Sofia Sans Condensed", sans-serif;
    cursor: pointer;
    font-weight: 700;
    font-size: 4rem;
    padding: 0.5rem 1.5rem;
    box-shadow:
        inset 0 0 20px rgba(0, 0, 0, 0.5),
        inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

#skip-btn.active {
    background-color: white;
    border: var(--black) solid 1px;
    color: black;
    box-shadow:
        inset 0 0 20px rgba(0, 0, 0, 0.2),
        0 0 4rem 2rem rgba(255, 255, 255, 0.7);
}

#skip-container:has(#skip-btn.active) {
    border: 2px outset var(--grey);
}

#skip-container:hover {
    #skip-btn {
        background-color: white;
    }

    #skip-btn.active,
    #skip-btn:active {
        background-color: var(--white);
        box-shadow:
            inset 0 0 20px white,
            0 0 4rem 2rem rgba(255, 255, 255, 0.7);
    }
}

#window {
    flex: 1;
    position: relative;
    transform: scale(1.01);
    cursor: pointer;
    pointer-events: auto !important;
}

#window-spacer {
    width: 0;
    background-color: var(--grey);
    transform: scale(1.01);
    transition: width 0.5s ease;
}

#window-border {
    position: absolute;
    width: 30rem;
    height: 30rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1.8rem solid var(--grey);
    border-radius: 50%;
    box-shadow:
        inset 0 0 3rem rgba(0, 0, 0, 1),
        0 0 2rem rgba(0, 0, 0, 0.3);
    animation: border-shrink 0.5s forwards ease;
}

#window-mask {
    position: absolute;
    width: 100%;
    height: 100%;
    mask: radial-gradient(circle at 50% 50%, transparent 14rem, black 16rem);
    -webkit-mask: radial-gradient(circle at 50% 50%, transparent 14rem, black 16rem);
    background: var(--grey);
}

#game-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: inherit;
    z-index: 10;
    display: none;
    aspect-ratio: 3 / 4;
    height: 80%;
    width: 80%;
    inset: 10%;
    border-radius: 8px;
    border: 2px inset;
}

@keyframes border-shrink {
    0% {
        background-color: var(--grey);
        width: 90vh;
        height: 90vh;
    }

    100% {
        background-color: transparent;
        width: 30rem;
        height: 30rem;
    }
}

#bottom-panel {
    flex: 3;
    display: flex;
    background: var(--grey);
    transform: scale(1.01);
    height: min-content;
    transition: all 0.5s ease;
}

#timeline {
    flex: 3;
    display: flex;
    flex-direction: column;
    padding-right: 1rem;
    height: fit-content;
    gap: 1rem;
    padding-top: 1rem;
}

#line-detail {
    width: 95%;
    height: 3rem;
    margin: auto;
    border-radius: 8px;
    border: 2px inset;
    background-color: var(--white);
    position: relative;
}

#line-detail::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 100%;
    background-color: var(--white);
    transform: translate(-50%, -50%);
    z-index: 5;
}

.line-wheel {
    width: 100%;
    height: 70%;
    position: relative;
    top: 15%;
    background-color: var(--black);
    overflow: hidden;
}

.timeline-event {
    position: absolute;
    top: 0;
    width: 2px;
    height: 60%;
    background-color: var(--white);
    z-index: 10;
    pointer-events: all;
    transition: left 0.1s linear;
}

#line-detail .timeline-event {
    width: 6px;
}

.timeline-event:hover {
    transform: scaleX(1.5);
    background-color: white;
    box-shadow:
        0 0 10px white;
}

.current-time-marker {
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 100%;
    z-index: 20;
    transition: left 0.1s linear;
}

.current-time-marker::before,
.current-time-marker::after {
    content: '';
    position: absolute;
    left: -6px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
}

.current-time-marker::before {
    top: 0;
    border-top: 6px solid var(--black);
    border-bottom: none;
}

.current-time-marker::after {
    bottom: 0;
    border-bottom: 6px solid var(--black);
    border-top: none;
}

#line-full {
    width: 95%;
    height: 3rem;
    margin: auto;
    border-radius: 8px;
    border: 2px inset;
    background-color: var(--white);
    position: relative;
    overflow: hidden;
}

#line-full .current-time-marker {
    position: absolute;
    top: 0;
    width: 0;
    border-left: var(--white) solid 1.5px;
    border-right: var(--white) solid 1.5px;
    height: 100%;
    z-index: 20;
}

.timeline-events-container,
.timeline-hours-container,
.timeline-sections-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.timeline-hour-mark {
    position: absolute;
    top: 85%;
    width: 2px;
    height: 15%;
    background-color: var(--white);
    z-index: 2;
    pointer-events: none;
    transition: left 0.1s linear;
}

.timeline-section {
    position: absolute;
    top: 15%;
    height: 70%;
    background-color: rgba(255, 255, 255, 0.3);
    border-left: 1px solid var(--grey);
    border-right: 1px solid var(--grey);
    z-index: 1;
    pointer-events: none;
    transition: left 0.1s linear;
}

#detail-sections .timeline-section::after {
    content: attr(data-title);
    position: absolute;
    top: 1px;
    left: 2px;
    font-family: 'Sofia Sans Condensed', monospace;
    font-size: 0.7rem;
    color: var(--grey);
    text-transform: uppercase;
    pointer-events: none;
}

.line-shadow {
    position: absolute;
    width: 100%;
    height: 3rem;
    border-radius: 4px;
    border: 2px transparent;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.3) 0%, transparent 20% 80%, rgba(0, 0, 0, 0.3) 100%);
}

#line-labels {
    width: 95%;
    margin: auto;
}

#all.shake1 {
    animation: shake-animation-5 5s linear infinite;
}

#all.shake2 {
    animation: shake-animation-4 5s linear infinite;
}

#all.shake3 {
    animation: shake-animation-3 5s linear infinite;
}

#all.shake4 {
    animation: shake-animation-2 5s linear infinite;
}

#all.shake5 {
    animation: shake-animation-1 5s linear infinite;
}

@keyframes shake-animation-1 {

    0%,
    10%,
    20%,
    30%,
    40%,
    50%,
    60%,
    70%,
    80%,
    90%,
    100% {
        margin: 0 0;
    }

    1%,
    11%,
    21%,
    31%,
    41%,
    51%,
    61%,
    71%,
    81%,
    91% {
        margin: -5px 0;
    }

    2%,
    12%,
    22%,
    32%,
    42%,
    52%,
    62%,
    72%,
    82%,
    92% {
        margin: 5px -5px;
    }

    3%,
    13%,
    23%,
    33%,
    43%,
    53%,
    63%,
    73%,
    83%,
    93% {
        margin: -5px 0;
    }

    4%,
    14%,
    24%,
    34%,
    44%,
    54%,
    64%,
    74%,
    84%,
    94% {
        margin: 5px 0;
    }

    5%,
    15%,
    25%,
    35%,
    45%,
    55%,
    65%,
    75%,
    85%,
    95% {
        margin: -5px 5px;
    }

    6%,
    16%,
    26%,
    36%,
    46%,
    56%,
    66%,
    76%,
    86%,
    96% {
        margin: 5px 0;
    }

    7%,
    17%,
    27%,
    37%,
    47%,
    57%,
    67%,
    77%,
    87%,
    97% {
        margin: -5px 0;
    }

    8%,
    18%,
    28%,
    38%,
    48%,
    58%,
    68%,
    78%,
    88%,
    98% {
        margin: 5px -5px;
    }

    9%,
    19%,
    29%,
    39%,
    49%,
    59%,
    69%,
    79%,
    89%,
    99% {
        margin: -5px 0;
    }

}

@keyframes shake-animation-2 {

    0%,
    10%,
    20%,
    30%,
    40%,
    50%,
    60%,
    70%,
    80%,
    90%,
    100% {
        margin: 0 0;
    }

    1%,
    11%,
    21%,
    31%,
    41%,
    51%,
    61%,
    71%,
    81%,
    91% {
        margin: -4px 0;
    }

    2%,
    12%,
    22%,
    32%,
    42%,
    52%,
    62%,
    72%,
    82%,
    92% {
        margin: 4px -4px;
    }

    3%,
    13%,
    23%,
    33%,
    43%,
    53%,
    63%,
    73%,
    83%,
    93% {
        margin: -4px 0;
    }

    4%,
    14%,
    24%,
    34%,
    44%,
    54%,
    64%,
    74%,
    84%,
    94% {
        margin: 4px 0;
    }

    5%,
    15%,
    25%,
    35%,
    45%,
    55%,
    65%,
    75%,
    85%,
    95% {
        margin: -4px 4px;
    }

    6%,
    16%,
    26%,
    36%,
    46%,
    56%,
    66%,
    76%,
    86%,
    96% {
        margin: 4px 0;
    }

    7%,
    17%,
    27%,
    37%,
    47%,
    57%,
    67%,
    77%,
    87%,
    97% {
        margin: -4px 0;
    }

    8%,
    18%,
    28%,
    38%,
    48%,
    58%,
    68%,
    78%,
    88%,
    98% {
        margin: 4px -4px;
    }

    9%,
    19%,
    29%,
    39%,
    49%,
    59%,
    69%,
    79%,
    89%,
    99% {
        margin: -4px 0;
    }

}

@keyframes shake-animation-3 {

    0%,
    10%,
    20%,
    30%,
    40%,
    50%,
    60%,
    70%,
    80%,
    90%,
    100% {
        margin: 0 0;
    }

    1%,
    11%,
    21%,
    31%,
    41%,
    51%,
    61%,
    71%,
    81%,
    91% {
        margin: -3px 0;
    }

    2%,
    12%,
    22%,
    32%,
    42%,
    52%,
    62%,
    72%,
    82%,
    92% {
        margin: 3px -3px;
    }

    3%,
    13%,
    23%,
    33%,
    43%,
    53%,
    63%,
    73%,
    83%,
    93% {
        margin: -3px 0;
    }

    4%,
    14%,
    24%,
    34%,
    44%,
    54%,
    64%,
    74%,
    84%,
    94% {
        margin: 3px 0;
    }

    5%,
    15%,
    25%,
    35%,
    45%,
    55%,
    65%,
    75%,
    85%,
    95% {
        margin: -3px 3px;
    }

    6%,
    16%,
    26%,
    36%,
    46%,
    56%,
    66%,
    76%,
    86%,
    96% {
        margin: 3px 0;
    }

    7%,
    17%,
    27%,
    37%,
    47%,
    57%,
    67%,
    77%,
    87%,
    97% {
        margin: -3px 0;
    }

    8%,
    18%,
    28%,
    38%,
    48%,
    58%,
    68%,
    78%,
    88%,
    98% {
        margin: 3px -3px;
    }

    9%,
    19%,
    29%,
    39%,
    49%,
    59%,
    69%,
    79%,
    89%,
    99% {
        margin: -3px 0;
    }

}

@keyframes shake-animation-4 {

    0%,
    10%,
    20%,
    30%,
    40%,
    50%,
    60%,
    70%,
    80%,
    90%,
    100% {
        margin: 0 0;
    }

    1%,
    11%,
    21%,
    31%,
    41%,
    51%,
    61%,
    71%,
    81%,
    91% {
        margin: -2px 0;
    }

    2%,
    12%,
    22%,
    32%,
    42%,
    52%,
    62%,
    72%,
    82%,
    92% {
        margin: 2px -2px;
    }

    3%,
    13%,
    23%,
    33%,
    43%,
    53%,
    63%,
    73%,
    83%,
    93% {
        margin: -2px 0;
    }

    4%,
    14%,
    24%,
    34%,
    44%,
    54%,
    64%,
    74%,
    84%,
    94% {
        margin: 2px 0;
    }

    5%,
    15%,
    25%,
    35%,
    45%,
    55%,
    65%,
    75%,
    85%,
    95% {
        margin: -2px 2px;
    }

    6%,
    16%,
    26%,
    36%,
    46%,
    56%,
    66%,
    76%,
    86%,
    96% {
        margin: 2px 0;
    }

    7%,
    17%,
    27%,
    37%,
    47%,
    57%,
    67%,
    77%,
    87%,
    97% {
        margin: -2px 0;
    }

    8%,
    18%,
    28%,
    38%,
    48%,
    58%,
    68%,
    78%,
    88%,
    98% {
        margin: 2px -2px;
    }

    9%,
    19%,
    29%,
    39%,
    49%,
    59%,
    69%,
    79%,
    89%,
    99% {
        margin: -2px 0;
    }

}

@keyframes shake-animation-5 {

    0%,
    10%,
    20%,
    30%,
    40%,
    50%,
    60%,
    70%,
    80%,
    90%,
    100% {
        margin: 0 0;
    }

    1%,
    11%,
    21%,
    31%,
    41%,
    51%,
    61%,
    71%,
    81%,
    91% {
        margin: -1px 0;
    }

    2%,
    12%,
    22%,
    32%,
    42%,
    52%,
    62%,
    72%,
    82%,
    92% {
        margin: 1px -1px;
    }

    3%,
    13%,
    23%,
    33%,
    43%,
    53%,
    63%,
    73%,
    83%,
    93% {
        margin: -1px 0;
    }

    4%,
    14%,
    24%,
    34%,
    44%,
    54%,
    64%,
    74%,
    84%,
    94% {
        margin: 1px 0;
    }

    5%,
    15%,
    25%,
    35%,
    45%,
    55%,
    65%,
    75%,
    85%,
    95% {
        margin: -1px 1px;
    }

    6%,
    16%,
    26%,
    36%,
    46%,
    56%,
    66%,
    76%,
    86%,
    96% {
        margin: 1px 0;
    }

    7%,
    17%,
    27%,
    37%,
    47%,
    57%,
    67%,
    77%,
    87%,
    97% {
        margin: -1px 0;
    }

    8%,
    18%,
    28%,
    38%,
    48%,
    58%,
    68%,
    78%,
    88%,
    98% {
        margin: 1px -1px;
    }

    9%,
    19%,
    29%,
    39%,
    49%,
    59%,
    69%,
    79%,
    89%,
    99% {
        margin: -1px 0;
    }

}

.layer1 {
    z-index: 1;
    position: fixed;
    inset: 0;
    background-image: url(images/sky.jpg);
    background-size: cover;
    background-position-y: 100%;
    background-repeat: repeat;
    transition: background-position 1s linear;
}

.layer2 {
    z-index: 2;
    position: fixed;
    inset: 0;
    background-image: url(images/earth_orbit.jpg);
    background-size: contain;
    background-position-x: -50%;
    background-repeat: no-repeat;
    opacity: 0;
    transition: background-position 1s linear, opacity 5s ease-in-out;
}

.layer3 {
    z-index: 3;
    transform-style: preserve-3d;
}

.layer4 {
    transform-style: preserve-3d;
    z-index: 5;
}

.layer1,
.layer2,
.layer3,
.layer4 {
    pointer-events: none;
}

@media screen and (max-width: 1200px) {

    .layer1,
    .layer2,
    #window {
        display: none;
    }

    #main {
        width: 100vw;
    }
}