body {
    margin: 0;
    background-color: black;
    counter-reset: points;
}

.screen {
    position: relative;
    margin: 0 auto;
    max-width: 100vw;
    width: 75vh;
    height: 100vh;
    overflow: hidden;
}


/* Sky */

.sky {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    pointer-events: none;
}

.sky>div {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.sky>div::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    display: block;
    height: 1000vh;
}

.sky>div+div {
    animation: opacity 30s linear infinite forwards paused;
}


/* All gradients except last are from https://uigradients.com/ */

.sky>div::before {
    background: linear-gradient( #f12711, #f5af19 10%, #91eae4 11%, #86a8e7, #7f7fd5 21%, #f64f59 22%, #c471ed, #12c2e9 32%, #f7797d 33%, #fbd786, #c6ffdd 43%, #8a2387 44%, #e94057, #f27121 54%, #3a1c71 55%, #d76d77, #fdbb2d 65%, #22c1c3 66%, #fdbb2d 76%, #1a2a6c 77%, #b21f1f, #fdbb2d 87%);
    animation: sky 240s steps(8, end) infinite forwards paused;
}

.sky>div+div::before {
    background: linear-gradient( #ff0080, #ff8c00, #40e0d0 10%, #1d2671 11%, #c33764 21%, #78ffd6 22%, #a8ff78 32%, #4b1248 33%, #f0c27b 43%, #2980b9 44%, #6dd5fa, #fff 54%, #03001e 55%, #7303c0, #ec38bc, #fdeff9 65%, #56ccf2 66%, #2f80ed 76%, #0c0510 77%, #160b3e, #5f4282, #cecc99 87%);
    animation: sky 240s steps(8, end) -15s infinite forwards paused;
}


/* Inputs and Last Label */

input,
.last {
    z-index: 1;
    position: absolute;
    display: none;
    width: 300vh;
    height: 300vh;
    opacity: 0;
    cursor: pointer;
    pointer-events: auto;
    transform: translate(-150vh, -150vh);
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

#last {
    display: initial;
    pointer-events: none;
}

input:checked,
#last:checked {
    display: none !important;
}


/* Base */

.base {
    position: relative;
    left: calc(50% - 15vh);
    top: 50vh;
    width: 30vh;
    height: 30vh;
    background-color: red;
    pointer-events: none;
    transform: rotateX(45deg) rotateZ(45deg);
    transform-style: preserve-3d;
    transition: transform 0.5s ease-in-out;
}


/* Base Sides */

.base::before,
.base::after {
    content: "";
    z-index: -1;
    position: absolute;
    display: block;
}

.base::before {
    right: 0;
    width: 50vh;
    height: 100%;
    background: linear-gradient(to left, #d00, rgba(221, 0, 0, 0));
    transform: rotateY(-90deg);
    transform-origin: right;
}

.base::after {
    bottom: 0;
    width: 100%;
    height: 50vh;
    background: linear-gradient(to top, #e00, rgba(238, 0, 0, 0));
    transform: rotateX(90deg);
    transform-origin: bottom;
}


/* Containers */

.container {
    position: absolute;
    display: flex;
    transform-style: preserve-3d;
}

.container.horizontal {
    left: -45vh;
    flex-direction: row;
    width: calc(90vh + 100%);
    height: 100%;
}

.container.vertical {
    top: -45vh;
    flex-direction: column;
    width: 100%;
    height: calc(90vh + 100%);
}


/* Spacers */

.container::before,
.container::after {
    content: "";
}

.container.horizontal::before,
.container.horizontal::after {
    max-width: calc(100% - 45vh);
    min-width: 45vh;
    height: 100%;
}

.container.vertical::before,
.container.vertical::after {
    width: 100%;
    max-height: calc(100% - 45vh);
    min-height: 45vh;
}


/* Blocks */

.block {
    position: relative;
    visibility: hidden;
    flex-grow: 1;
    background-color: currentColor;
    transform: translateZ(6vh);
    transform-style: preserve-3d;
}

.block.horizontal {
    height: 100%;
}

.block.vertical {
    width: 100%;
}

.block.floating {
    position: absolute;
    display: none;
    visibility: visible;
}

.block.floating.horizontal {
    width: calc(100% - 90vh);
    animation: left 2s linear alternate infinite both;
}

.block.floating.vertical {
    height: calc(100% - 90vh);
    animation: top 2s linear alternate infinite both;
}


/* Block Sides */

.block::before,
.block::after {
    content: "";
    z-index: -1;
    position: absolute;
    display: block;
    background-color: currentColor;
}

.block::before {
    right: 0;
    width: 6vh;
    height: 100%;
    box-shadow: inset -6vh 0 rgba(0, 0, 0, 0.2);
    transform: rotateY(-90deg);
    transform-origin: right;
}

.block::after {
    bottom: 0;
    width: 100%;
    height: 6vh;
    box-shadow: inset 0 -6vh rgba(0, 0, 0, 0.1);
    transform: rotateX(90deg);
    transform-origin: bottom;
}


/* End Labels */

.end {
    position: absolute;
    left: -200vh;
    top: -300vh;
    visibility: visible;
    max-width: 400vh;
    max-height: 600vh;
    pointer-events: auto;
    cursor: pointer;
    transform: rotateZ(-45deg) rotateX(-45deg) translateZ(100vh);
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

.end.horizontal {
    width: calc(400vh - 100000%);
    height: 600vh;
}

.end.vertical {
    width: 400vh;
    height: calc(600vh - 100000%);
}


/* Points */

.points {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    display: none;
    text-align: center;
    color: white;
    font-family: "Helvetica", "Roboto", "Segoe UI", "Arial", sans-serif;
    font-size: 9vh;
    font-weight: lighter;
    pointer-events: none;
}

.points::before {
    content: "YOU'VE REACHED THE TOP!";
    display: block;
    margin: 4vh auto;
    font-size: 4vh;
    opacity: 0;
    transition: opacity 0.25s;
}

.points::after {
    content: counter(points);
    display: block;
}


/* Start Label */

.start {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    padding: 15vh 0;
    text-align: center;
    color: transparent;
    text-shadow: 0 0 0 white;
    font-family: "Helvetica", "Roboto", "Segoe UI", "Arial", sans-serif;
    font-size: 9vh;
    font-weight: lighter;
    cursor: pointer;
    transition: opacity 0.25s;
    animation: start 0.75s linear;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

.start::before {
    content: "";
    position: absolute;
    left: calc(50% - 3vh);
    top: 59.5vh;
    display: block;
    border-top: 5vh solid transparent;
    border-bottom: 5vh solid transparent;
    border-left: 8.5vh solid white;
}

.start::after {
    content: "";
    position: absolute;
    left: calc(50% - 10vh);
    top: 54.5vh;
    display: block;
    box-sizing: border-box;
    border: solid 2vh white;
    border-radius: 50%;
    width: 20vh;
    height: 20vh;
}


/* Restart Button */

button {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border: none;
    padding-top: 80vh;
    width: 100%;
    color: white;
    background: transparent;
    opacity: 0;
    pointer-events: none;
    font-family: "Helvetica", "Roboto", "Segoe UI", "Arial", sans-serif;
    font-size: 4vh;
    font-weight: lighter;
    cursor: pointer;
    transition: opacity 0.25s;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}


/* Keyframes */

@keyframes opacity {
    0% {
        opacity: 1;
    }
    25% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    75% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes sky {
    from {
        transform: none;
    }
    to {
        transform: translateY(-880vh);
    }
}

@keyframes width {
    from {
        width: 0;
    }
    to {
        width: 90vh;
    }
}

@keyframes height {
    from {
        height: 0;
    }
    to {
        height: 90vh;
    }
}

@keyframes left {
    from {
        left: 0;
    }
    to {
        left: 90vh;
    }
}

@keyframes top {
    from {
        top: 0;
    }
    to {
        top: 90vh;
    }
}

@keyframes color {
    0% {
        color: #f00;
    }
    19% {
        color: #ff0;
    }
    31% {
        color: #0f0;
    }
    43% {
        color: #0ff;
    }
    62% {
        color: #00f;
    }
    81% {
        color: #f0f;
    }
    100% {
        color: #f00;
    }
}

@keyframes start {
    from {
        text-shadow: 0 0 1vh white, 2vh -2vh 1vh white, 2vh 2vh 1vh white, -2vh 2vh 1vh white, -2vh -2vh 1vh white;
        opacity: 0;
    }
    to {
        text-shadow: 0 0 0 white;
        opacity: 1;
    }
}


/* Sky: start changing */

#start:checked~.sky>div+div,
#start:checked~.sky>div::before {
    animation-play-state: running;
}


/* Sky: stop changing */

#end:checked~.sky>div+div,
#end:checked~.sky>div::before,
#last:checked~.sky>div+div,
#last:checked~.sky>div::before {
    animation-play-state: paused;
}


/* Base: start movement */

#start:checked~.base {
    transform: translateY(200vh) rotateX(45deg) rotateZ(45deg);
    transition-duration: 60s;
    transition-timing-function: linear;
}


/* Base: stop movement */

#end:checked~.base,
#last:checked~.base {
    transform: translateY(25vh) rotateX(45deg) rotateZ(45deg) scale3d(0.3, 0.3, 0.3);
    transition-duration: 1s;
    transition-timing-function: ease-in-out;
}


/* Inputs and Last Label: display current */

#start:checked~.base>input,
input:checked+.container>.block>input,
input:checked+.container>.block>.last {
    display: block;
}


/* Containers: start color rotation */

#start:checked~.base .container {
    animation: color 60s linear alternate infinite both;
}


/* Containers: stop color rotation of current */

#start:checked~.base>.container,
input:checked+.container>.block>.container {
    animation-play-state: paused !important;
}


/* Spacers: start sizing of current */

#start:checked~.base>.container.horizontal::before,
input:checked+.container>.block>.container.horizontal::before {
    animation: width 2s linear infinite alternate both running;
}

#start:checked~.base>.container.horizontal::after,
input:checked+.container>.block>.container.horizontal::after {
    animation: width 2s linear infinite alternate-reverse both running;
}

#start:checked~.base>.container.vertical::before,
input:checked+.container>.block>.container.vertical::before {
    animation: height 2s linear infinite alternate both running;
}

#start:checked~.base>.container.vertical::after,
input:checked+.container>.block>.container.vertical::after {
    animation: height 2s linear infinite alternate-reverse both running;
}


/* Spacers: stop sizing of current */

#end:active~.base .container::before,
#end:active~.base .container::after,
#end:checked~.base .container::before,
#end:checked~.base .container::after,
#last:active~.base .container::before,
#last:active~.base .container::after,
#last:checked~.base .container::before,
#last:checked~.base .container::after,
input:active+.container::before,
input:active+.container::after,
input:checked+.container::before,
input:checked+.container::after {
    animation-play-state: paused !important;
}


/* Floating Blocks: display current */

#start:checked~.base>.container>.floating,
input:checked+.container>.block>.container>.floating {
    display: block;
}


/* Floating Blocks: stop movement of current */

#end:active~.base .floating,
#last:active~.base .floating,
input:active+.container>.floating {
    animation-play-state: paused;
}


/* Floating Blocks: stop movement of current then fadeout */

#end:checked~.base .floating,
#last:checked~.base .floating,
input:checked+.container>.floating {
    visibility: hidden;
    color: transparent;
    transition: color 0.5s, background-color 0.5s, visibility 0s 0.5s;
    animation-play-state: paused;
}


/* Increment Points */

#last:checked~.base .floating,
input:checked+.container>.floating {
    counter-increment: points 1;
}


/* Floating Block Sides: stop sizing of current then fadeout */

#end:checked~.base .floating::before,
#end:checked~.base .floating::after,
#last:checked~.base .floating::before,
#last:checked~.base .floating::after,
input:checked+.container>.floating::before,
input:checked+.container>.floating::after {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5s, visibility 0s 0.5s;
    animation-play-state: paused;
}


/* Blocks: show current  */

input:checked+.container>.floating+.block,
#last:checked~.base .last+.container>.floating+.block {
    visibility: visible;
}


/* Points: show only positive */

.screen:valid .points {
    display: block;
}


/* Points: top reached */

#last:checked~.points::before {
    opacity: 1;
}


/* Start Label: hide after started */

#start:checked~.start {
    pointer-events: none;
    opacity: 0;
    animation: none;
}


/* Restart Button: show on end */

#end:checked~button,
#last:checked~button {
    pointer-events: auto;
    opacity: 1;
}