* {   /* Vordefinierte Bilder-Links */
    --image-1: url("images/vita/baby.png");
    --image-2: url("images/vita/erfolge.png");
    --image-3: url("images/vita/jung.png");
    --image-4: url("images/vita/mitte.png");
    --image-5: url("images/vita/starte.png");
    --image-6: url("images/vita/fehler.png");
}


.cube-container {
    width: 20em;
    height: 20em;
    text-align: center;
    perspective: 45em;
    margin-top: 5%;
    margin-left: 50%;
    transform: translateX(-50%);
}

.cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition-duration: 2s;
    transform: rotateX(-15deg) rotateY(20deg);
}

.cube-side {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: white;
    border: 1px solid black;
    background-position: center;
    background-size: cover;
}

.radio-button {
    margin-bottom: 5em;
    margin-right: 10px;
}

/* Fotos in den Würfel-Flächen */
.cube-side:nth-child(1) {
    transform: rotateY(0deg) translateZ(10em);
    background-image: var(--image-1);
}
.cube-side:nth-child(2) {
    transform: rotateY(90deg) translateZ(10em);
    background-image: var(--image-2);
}
.cube-side:nth-child(3) {
    transform: rotateY(180deg) translateZ(10em);
    background-image: var(--image-3);
}
.cube-side:nth-child(4) {
    transform: rotateY(-90deg) translateZ(10em);
    background-image: var(--image-4);
}
.cube-side:nth-child(5) {
    transform: rotateX(-90deg) translateZ(10em);
    background-image: var(--image-5);
}
.cube-side:nth-child(6) {
    transform: rotateX(90deg) translateZ(10em);
    background-image: var(--image-6);
}

/* Animation und Dauer nach Betätigen der Buttons */
.radio-button:checked ~ .cube {
    transition-duration: 3s;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}
.radio-button:nth-child(1):checked ~ .cube { 
    transform: rotateX(-15deg) rotateY(20deg);
}
.radio-button:nth-child(2):checked ~ .cube { 
    transform: rotateX(-15deg) rotateY(180deg);
}
.radio-button:nth-child(3):checked ~ .cube { 
    transform: rotateX(-15deg) rotateY(90deg);
}
.radio-button:nth-child(4):checked ~ .cube { 
    transform: rotateX(-15deg) rotateY(-90deg);
}
.radio-button:nth-child(5):checked ~ .cube { 
    transform: rotateX(-105deg) rotateY(0deg);
}
.radio-button:nth-child(6):checked ~ .cube { 
    transform: rotateX(75deg) rotateY(0deg);
}


@media screen and (min-width: 1200px) {
    .cube-container {
        margin-top: 24px;}
}
    
@media screen and (max-width: 800px) 
{   .cube-container {
        width: 14em;
        height: 14em; }

    .cube-side:nth-child(1) {
        transform: rotateY(0deg) translateZ(7em);
        background-image: var(--image-1);
    }
    .cube-side:nth-child(2) {
        transform: rotateY(90deg) translateZ(7em);
        background-image: var(--image-2);
    }
    .cube-side:nth-child(3) {
        transform: rotateY(180deg) translateZ(7em);
        background-image: var(--image-3);
    }
    .cube-side:nth-child(4) {
        transform: rotateY(-90deg) translateZ(7em);
        background-image: var(--image-4);
    }
    .cube-side:nth-child(5) {
        transform: rotateX(-90deg) translateZ(7em);
        background-image: var(--image-5);
    }
    .cube-side:nth-child(6) {
        transform: rotateX(90deg) translateZ(7em);
        background-image: var(--image-6);
    }

}