:root {
    /* Sizing of everything */
    /* This variable is used to set the font-size */
    /* With em we can let widths en heights be dependent of the font-size */
    /* 1em will be 75px if the font-size is 75px */
    /* 2em will be 150px if the font-size is 75px */
    --sizing-sm: 23px;
    --sizing-md: 35px;
    --sizing-lg: 73px;

    /* Color of the box */
    --boxColor: #0ff7;

    /* Rotational speed of scene */
    --rotateSpeed: 30s;

    /* Bounce speed of ball */
    --bounceSpeed: 1.5s;
}

body {
    /* No scrollbars */
    overflow: hidden;

    /* Black background */
    background: black;

    /* Body 100% of ViewHeight */
    /* ViewHeight is the height of your screen */
    height: 100vh;
    width: 100vw;
    overflow: hidden;

    /* Center all the content */
    display: flex;
    justify-content: center;
    align-items: center;

    /* How far you stand (from the body in this case) */
    perspective: 10em;

    /* How you look (at the body in this case) */
    /* Horizontal in the center */
    /* Vertical 50% - 2em */
    perspective-origin: 50% calc(50% - 2em);
}

/* Sizing of content */
/* No text on this page, so you can use font-size as a variable */
/* Because the font-size is set you can use 1em, 2em... */
/* 1em is  1 * font-size*/
/* If font-size on body is 75px then width: 2em will give a width of 150px */
body {
    font-size: var(--sizing-sm);
}


@media only screen and (min-width: 600px) {
    body {
        font-size: var(--sizing-md);
    }
}

@media only screen and (min-width: 1100px) {
    body {
        font-size: var(--sizing-lg);
    }
}


.scene {
    /* Positioning */
    position: relative;

    /* Make 3d */
    transform-style: preserve-3d;

    /* Animation */
    animation: sceneRotate var(--rotateSpeed) infinite linear;
}

.floor,
.cube,
.ball {
    /* Positioning */
    position: absolute;
}

.ball {
    /* Sizing */
    width: 1em;
    height: 1em;

    /* Circle */
    border-radius: 50%;

    /* Visual color(s) */
    background: lightblue;
    background-image: radial-gradient(circle at top, lightblue, #000);

    /* Positioning */
    left: -0.5em;
    bottom: 1em;

    /* Animation */
    animation:
        ballBounce var(--bounceSpeed) infinite,
        sceneRotate var(--rotateSpeed) infinite linear reverse;
}

.cube {
    /* Sizing */
    width: 2em;
    height: 2em;

    /* Make 3D */
    transform-style: preserve-3d;

    /* Positioning */
    bottom: -1em;
    left: -1em;

    /* Animation */
    animation: cubeHeight var(--bounceSpeed) infinite linear;
}

.cube :is(.left, .right, .front, .back) {
    /* Positioning */
    position: absolute;

    /* Sizing */
    width: 100%;
    height: 100%;

    /* Visual color(s) */
    background: var(--boxColor);
    /* Shadow */
    box-shadow: 0 0 0.5em #000a inset;
}

.cube .front {
    /* Positioning */
    transform: rotateY(0deg) translateZ(1em);
}

.cube .right {
    /* Positioning */
    transform: rotateY(90deg) translateZ(1em);
}

.cube .back {
    /* Positioning */
    transform: rotateY(180deg) translateZ(1em);
}

.cube .left {
    /* Positioning */
    transform: rotateY(270deg) translateZ(1em);
}

.cube .top {
    /* Sizing */
    width: 2em;
    height: 2em;

    /* Visual color(s) */
    background: var(--boxColor);
    /* Shadow */
    box-shadow: 0 0 0.5em #000a inset;

    /* Positioning */
    position: absolute;
    transform: translateY(-50%) rotateX(90deg);
}

.cube .top .ballShadow {
    /* Sizing */
    width: 100%;
    height: 100%;

    /* Visual color(s) */
    background-image: radial-gradient(#0007, #0000 50%);

    /* Positioning */
    position: absolute;

    /* Animation */
    animation: ballShadow var(--bounceSpeed) infinite;
}

.cube .bottom {
    /* Sizing */
    width: 2em;
    height: 2em;

    /* Visual color(s) */
    background: #0007;
    /* Shadow */
    box-shadow: 0 0 0.5em #000a;

    /* Positioning */
    position: absolute;
    bottom: 0;
    transform: translateY(50%) rotateX(90deg);
}

.floor {
    /* Sizing */
    width: 15em;
    height: 15em;

    /* Visual color(s) */
    background-image:
        /* Shadow */
        radial-gradient(#0000, #000 75%),
        /* Floor */
        repeating-conic-gradient(from 45deg, #111 0deg 90deg, #222 90deg 180deg);
    background-size: 100%, 1em 1em;

    /* Positioning */
    top: 1em;
    transform: translate(-50%, -50%) rotateX(90deg);
}

/* Animations */
@keyframes sceneRotate {

    /* Makes the scene rotate fully over a period of time */
    to {
        transform: rotateY(360deg);
    }
}

@keyframes ballBounce {

    /* Ball starts and ends at bottom 0.5em with ease-out */
    /* It goes up but loses speed as it goes up (gravity) */
    0%,
    100% {
        bottom: 0.5em;
        animation-timing-function: ease-out;
    }

    /* Halfway in the animation (highest point the ball is a 3em */
    /* From there it goes back to 0.5em and speeds up on the way down (gravity) */
    50% {
        bottom: 3em;
        animation-timing-function: ease-in;
    }
}

@keyframes ballShadow {

    /* When the ball is on the cube the shadow has a size and opacity of 1 */
    /* When the ball is launched of the cube the shadow gets bigger and starts to fade away */
    0%,
    8%,
    93.5%,
    100% {
        transform: scale(1);
        opacity: 1;
        animation-timing-function: ease-out;
    }

    /* At the halfway point the shadow is twice as big and and is faded away half */
    50% {
        transform: scale(2);
        opacity: 0.5;
        animation-timing-function: ease-in;
    }
}

@keyframes cubeHeight {

    /* The height of the cube starts compacted and pushes out until 8% of the time is passed */
    /* Then the cube stays fill size until 93.5% */
    /* From then until 100% the cube catches the ball */
    0%,
    100% {
        height: 1.5em;
    }

    8%,
    93.5% {
        height: 2em;
    }
}