/* Animation variables */
:root {
    --standard-animation-speed: 20s;
    --animation-delay: -1s;
}

/* Environment */
main > div:first-child {
    grid-row: 1/3;
    grid-column: 1/4;
    text-align: center;
}

main > div > div > div > div {
    background: url("../images/sterren.jpg");
    background-size: cover;
}

main > div:first-child:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

main > div > div {
    display: inline-block;
    vertical-align: middle;
    perspective: calc((var(--speed))*8px);
    perspective-origin: 50% 50%;
    position: relative;
    transition: 1s;
}

main > div > div > div {
    position: absolute;
    width: 62.5em;
    height: 62.5em;
    left: -31.25em;
    top: -31.25em;
    transform-style: preserve-3d;
    animation: move var(--standard-animation-speed) infinite linear;
    animation-delay: var(--animation-delay);
}

main > div > div > div > div {
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0;
    animation: fade var(--standard-animation-speed) infinite linear;
    animation-delay: var(--animation-delay);
}

main > div > div > div > div:first-child {
    transform: rotateY(90deg) translateZ(500px);
}

main > div > div > div > div:nth-child(2) {
    transform: rotateY(-90deg) translateZ(500px);
}

main > div > div > div  > div:nth-child(3) {
    transform: rotateX(90deg) translateZ(500px);
}

main > div > div > div  > div:nth-child(4) {
    transform: rotateX(-90deg) translateZ(500px);
}

main > div > div > div > div:nth-child(5) {
    transform: rotateX(180deg) translateZ(500px);
}

 /* https://codepen.io/noahblon/pen/DpNRyR */

@keyframes move {
    0% {
        transform: translateZ(-500px);
    }
    100% {
        transform: translateZ(500px);
    }
}

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

/* Media query */
@media (min-width: 80em) {
    main > div:first-child {
        grid-column: 1/6;
    }
}