/* Für alle Geräte */
#wrapper {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

h1 {
    text-align: center;
}

#circle {
    align-items: center;
    background-color: #4D4646;
    border: 3px solid #FFD700;
    border-radius: 200px;
    display: flex;
    justify-content: center;
}

/* Würfel */
#scene {
    perspective: 600px;
}

@keyframes rotate {
    100% {transform: rotateZ(360deg) rotateX(720deg) rotateY(360deg);}
}

#cube {
    animation: rotate 20s linear infinite;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    width: 100%; 
}

#cube div {
    height: 100%;
    position: absolute;
    width: 100%; 
}

#top {transform: translateZ(100px);}
#bottom {transform: rotateX(180deg) translateZ(100px);}
#front {transform:rotateX(-90deg) translateZ(100px);}
#back {transform: rotateX(90deg) translateZ(100px);}
#left {transform: rotateY(-90deg) translateZ(100px);}
#right {transform: rotateY(90deg) translateZ(100px);} 

/* Für grössere Geräte */
@media only screen and (min-width: 321px){
    #circle {
        height: 400px;
        width: 400px;
    }
    
    /* Würfel */
    #scene {
        height: 200px;
        margin: 4em;
        width: 200px;
    }
    
    #front {background-image: url("Bilder/Wuerfel/ente200.jpg");}
    #back {background-image: url("Bilder/Wuerfel/geier200.jpg");}
    #left {background-image: url("Bilder/Wuerfel/gaemse200.jpg");}
    #right {background-image: url("Bilder/Wuerfel/rinde200.jpg");}
    #top {background-image: url("Bilder/Wuerfel/schildi200.jpg");}
    #bottom {background-image: url("Bilder/Wuerfel/vari200.jpg");}
    
    
    
    #top {transform: translateZ(100px);}
    #bottom {transform: rotateX(180deg) translateZ(100px);}
    #front {transform:rotateX(-90deg) translateZ(100px);}
    #back {transform: rotateX(90deg) translateZ(100px);}
    #left {transform: rotateY(-90deg) translateZ(100px);}
    #right {transform: rotateY(90deg) translateZ(100px);} 
}


/* Für Handys */
@media only screen and (max-width: 420px) {
    #circle {
        height: 290px;
        width: 290px;
    }
    
    /* Würfel */
    #scene {
        height: 150px;
        margin: 3.5em;
        width: 150px;
    }
    
    #front {background-image: url("Bilder/Wuerfel/ente150.jpg");}
    #back {background-image: url("Bilder/Wuerfel/geier150.jpg");}
    #left {background-image: url("Bilder/Wuerfel/gaemse150.jpg");}
    #right {background-image: url("Bilder/Wuerfel/rinde150.jpg");}
    #top {background-image: url("Bilder/Wuerfel/schildi150.jpg");}
    #bottom {background-image: url("Bilder/Wuerfel/vari150.jpg");}
    
    #top {transform: translateZ(75px);}
    #bottom {transform: rotateX(180deg) translateZ(75px);}
    #front {transform:rotateX(-90deg) translateZ(75px);}
    #back {transform: rotateX(90deg) translateZ(75px);}
    #left {transform: rotateY(-90deg) translateZ(75px);}
    #right {transform: rotateY(90deg) translateZ(75px);}
}