/*
prime numbers 10 to 40: 11, 13, 17, 19, 23, 29, 31, 37
leaf midpoint lower side is tx160 ty-320 tz0 rx90 ry0 rz0

foliage starting points:
x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x
x x x x x x 1 x x 2 x x x x x x
x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x
x x x 8 x x o o o o x x 3 x x x
x x x x x x o o o o x x x x x x
x x x x x x o o o o x x x x x x
x x x 7 x x o o o o x x 4 x x x
x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x
x x x x x x 6 x x 5 x x x x x x
x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x
-> 30:90 off mid

base rotation: 11/22/33 deg x animation time
base movement: y reverts to 100px, x/z random around, max animation time * from prev.
75% -> 100%, fade out
*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@keyframes rotate {
    0% {
        transform: translate(-50%, -50%) rotateX(-20deg) rotateY(20deg);
    }
    25% {
        transform: translate(-50%, -50%) rotateX(-20deg) rotateY(110deg);
    }
    50% {
        transform: translate(-50%, -50%) rotateX(-20deg) rotateY(200deg);
    }
    75% {
        transform: translate(-50%, -50%) rotateX(-20deg) rotateY(290deg);
    }
    100% {
        transform: translate(-50%, -50%) rotateX(-20deg) rotateY(380deg);
    }
}

@keyframes room {
    0% {
        transform: translate(-50%,-50%) rotateY(0deg);
    }
    25% {
        transform: translate(-50%,-50%) rotateY(-90deg);
    }
    50% {
        transform: translate(-50%,-50%) rotateY(-180deg);
    }
    75% {
        transform: translate(-50%,-50%) rotateY(-270deg);
    }
    100% {
        transform: translate(-50%,-50%) rotateY(-360deg);
    }
}

@keyframes foliage1 {
    0% {
        transform: translateX(190px) translateY(-320px) translateZ(90px) rotateX(90deg) rotateY(0deg) rotateZ(0deg);
    }
    25% {
        transform: translateX(190px) translateY(-320px) translateZ(90px) rotateX(90deg) rotateY(0deg) rotateZ(0deg);
    }
    50% {
        transform: translateX(124px) translateY(-140px) translateZ(90px) rotateX(695deg) rotateY(-484deg) rotateZ(363deg);
    }
    75% {
        transform: translateX(454px) translateY(20px) translateZ(354px) rotateX(1058deg) rotateY(-726deg) rotateZ(847deg);
        opacity: 1;
    }
    100% {
        transform: translateX(322px) translateY(160px) translateZ(156px) rotateX(937deg) rotateY(-363deg) rotateZ(605deg);
        opacity: 0;
    }
}

@keyframes foliage2 {
    0% {
        transform: translateX(190px) translateY(-320px) translateZ(-90px) rotateX(90deg) rotateY(0deg) rotateZ(0deg);
    }
    25% {
        transform: translateX(190px) translateY(-320px) translateZ(-90px) rotateX(90deg) rotateY(0deg) rotateZ(0deg);
    }
    50% {
        transform: translateX(-554px) translateY(-160px) translateZ(-90px) rotateX(-682deg) rotateY(1023deg) rotateZ(1364deg);
    }
    75% {
        transform: translateX(-368px) translateY(140px) translateZ(-462px) rotateX(-1956deg) rotateY(2728deg) rotateZ(2387deg);
        opacity: 1;
    }
    100% {
        transform: translateX(-926px) translateY(160px) translateZ(468px) rotateX(-933deg) rotateY(2387deg) rotateZ(1705deg);
        opacity: 0;
    }
}

@keyframes foliage3 {
    0% {
        transform: translateX(130px) translateY(-320px) translateZ(90px) rotateX(90deg) rotateY(0deg) rotateZ(0deg);
    }
    25% {
        transform: translateX(130px) translateY(-320px) translateZ(90px) rotateX(90deg) rotateY(0deg) rotateZ(0deg);
    }
    50% {
        transform: translateX(538px) translateY(-160px) translateZ(-216px) rotateX(-284deg) rotateY(748deg) rotateZ(561deg);
    }
    75% {
        transform: translateX(436px) translateY(-60px) translateZ(294px) rotateX(277deg) rotateY(374deg) rotateZ(374deg);
        opacity: 1;
    }
    100% {
        transform: translateX(232px) translateY(160px) translateZ(294px) rotateX(-471deg) rotateY(935deg) rotateZ(1309deg);
        opacity: 0;
    }
}

@keyframes foliage4 {
    0% {
        transform: translateX(130px) translateY(-320px) translateZ(-90px) rotateX(90deg) rotateY(0deg) rotateZ(0deg);
    }
    25% {
        transform: translateX(130px) translateY(-320px) translateZ(-90px) rotateX(90deg) rotateY(0deg) rotateZ(0deg);
    }
    50% {
        transform: translateX(820px) translateY(-260px) translateZ(-366px) rotateX(-163deg) rotateY(-506deg) rotateZ(759deg);
    }
    75% {
        transform: translateX(820px) translateY(0px) translateZ(-228px) rotateX(1102deg) rotateY(253deg) rotateZ(-253deg);
        opacity: 1;
    }
    100% {
        transform: translateX(406px) translateY(160px) translateZ(-780px) rotateX(1861deg) rotateY(1265deg) rotateZ(-759deg);
        opacity: 0;
    }
}

@keyframes foliage5 {
    0% {
        transform: translateX(250px) translateY(-320px) translateZ(30px) rotateX(90deg) rotateY(0deg) rotateZ(0deg);
    }
    25% {
        transform: translateX(250px) translateY(-320px) translateZ(30px) rotateX(90deg) rotateY(0deg) rotateZ(0deg);
    }
    50% {
        transform: translateX(562px) translateY(-200px) translateZ(-48px) rotateX(-196deg) rotateY(429deg) rotateZ(-143deg);
    }
    75% {
        transform: translateX(328px) translateY(-40px) translateZ(342px) rotateX(376deg) rotateY(143deg) rotateZ(286deg);
        opacity: 1;
    }
    100% {
        transform: translateX(328px) translateY(160px) translateZ(186px) rotateX(805deg) rotateY(-429deg) rotateZ(1001deg);
        opacity: 0;
    }
}

@keyframes foliage6 {
    0% {
        transform: translateX(250px) translateY(-320px) translateZ(-30px) rotateX(90deg) rotateY(0deg) rotateZ(0deg);
    }
    25% {
        transform: translateX(250px) translateY(-320px) translateZ(-30px) rotateX(90deg) rotateY(0deg) rotateZ(0deg);
    }
    50% {
        transform: translateX(-416px) translateY(-160px) translateZ(-474px) rotateX(1718deg) rotateY(1221deg) rotateZ(-814deg);
    }
    75% {
        transform: translateX(-416px) translateY(160px) translateZ(-696px) rotateX(2936deg) rotateY(3256deg) rotateZ(-2442deg);
        opacity: 1;
    }
    100% {
        transform: translateX(694px) translateY(160px) translateZ(192px) rotateX(2125deg) rotateY(2849deg) rotateZ(-1221deg);
        opacity: 0;
    }
}

@keyframes foliage7 {
    0% {
        transform: translateX(70px) translateY(-320px) translateZ(30px) rotateX(90deg) rotateY(0deg) rotateZ(0deg);
    }
    25% {
        transform: translateX(70px) translateY(-320px) translateZ(30px) rotateX(90deg) rotateY(0deg) rotateZ(0deg);
    }
    50% {
        transform: translateX(184px) translateY(-80px) translateZ(30px) rotateX(717deg) rotateY(1045deg) rotateZ(-836deg);
    }
    75% {
        transform: translateX(-44px) translateY(0px) translateZ(-426px) rotateX(299deg) rotateY(836deg) rotateZ(-209deg);
        opacity: 1;
    }
    100% {
        transform: translateX(526px) translateY(160px) translateZ(-768px) rotateX(1135deg) rotateY(1463deg) rotateZ(-627deg);
        opacity: 0;
    }
}

@keyframes foliage8 {
    0% {
        transform: translateX(70px) translateY(-320px) translateZ(-30px) rotateX(90deg) rotateY(0deg) rotateZ(0deg);
    }
    25% {
        transform: translateX(70px) translateY(-320px) translateZ(-30px) rotateX(90deg) rotateY(0deg) rotateZ(0deg);
    }
    50% {
        transform: translateX(-626px) translateY(-280px) translateZ(-552px) rotateX(1044deg) rotateY(-319deg) rotateZ(-638deg);
    }
    75% {
        transform: translateX(-974px) translateY(-120px) translateZ(318px) rotateX(409deg) rotateY(638deg) rotateZ(638deg);
        opacity: 1;
    }
    100% {
        transform: translateX(-800px) translateY(160px) translateZ(318px) rotateX(-867deg) rotateY(2233deg) rotateZ(1595deg);
        opacity: 0;
    }
}


#foliage {
    position: absolute;
    top: 95%;
    left: 50%;
    transform: translate(-50%, -50%) rotateX(20deg) rotateY(-20deg);
    transform-style: preserve-3d;
    height: 320px;
    width: 320px;
    animation: rotate 60s linear;
    animation-iteration-count: infinite;
}

.foliageface {
    position: absolute;
    height: 20px;
    width: 20px;
}

.foliageface:nth-child(1) {
    background-color: #4baa29;
    animation: translate 11s cubic-bezier(.5, 0, .5, 1);
    animation-iteration-count: infinite;
    animation-name: foliage1;
}

.foliageface:nth-child(2) {
    background-color: #57b934;
    animation: translate 31s cubic-bezier(.5, 0, .5, 1);
    animation-iteration-count: infinite;
    animation-name: foliage2;
}

.foliageface:nth-child(3) {
    background-color: #17601c;
    animation: translate 17s cubic-bezier(.5, 0, .5, 1);
    animation-iteration-count: infinite;
    animation-name: foliage3;
}

.foliageface:nth-child(4) {
    background-color: #397424;
    animation: translate 23s cubic-bezier(.5, 0, .5, 1);
    animation-iteration-count: infinite;
    animation-name: foliage4;
}

.foliageface:nth-child(5) {
    background-color: #28401f;
    animation: translate 13s cubic-bezier(.5, 0, .5, 1);
    animation-iteration-count: infinite;
    animation-name: foliage5;
}

.foliageface:nth-child(6) {
    background-color: #315d20;
    animation: translate 37s cubic-bezier(.5, 0, .5, 1);
    animation-iteration-count: infinite;
    animation-name: foliage6;
}

.foliageface:nth-child(7) {
    background-color: #256c14;
    animation: translate 19s cubic-bezier(.5, 0, .5, 1);
    animation-iteration-count: infinite;
    animation-name: foliage7;
}

.foliageface:nth-child(8) {
    background-color: #5aa724;
    animation: translate 29s cubic-bezier(.5, 0, .5, 1);
    animation-iteration-count: infinite;
    animation-name: foliage8;
}


#room {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%) rotateX(0deg) rotateY(0deg);
    transform-style: preserve-3d;
    height: 3840px;
    width: 3840px;
    animation: rotate 61s linear;
    animation-name: room;
    animation-iteration-count: infinite;
}

.roomface {
    position: absolute;
    height: 100%;
    width: 100%;
}

.roomface:nth-child(1) {
    transform: rotateY(0deg) translateZ(1920px);
    background-image: url("../images/gui/title/background/panorama_1.png");
    background-size: contain;
}

.roomface:nth-child(2) {
    transform: rotateY(90deg) translateZ(1920px);
    background-image: url("../images/gui/title/background/panorama_2.png");
    background-size: contain;
}

.roomface:nth-child(3) {
    transform: rotateY(180deg)translateZ(1920px);
    background-image: url("../images/gui/title/background/panorama_3.png");
    background-size: contain;
}

.roomface:nth-child(4) {
    transform: rotateY(270deg)translateZ(1920px);
    background-image: url("../images/gui/title/background/panorama_0.png");
    background-size: contain;
}

.roomface:nth-child(5) {
    transform: rotateX(90deg) translateZ(1920px);
    background-image: url("../images/gui/title/background/panorama_4.png");
    background-size: contain;
}

.roomface:nth-child(6) {
    transform: rotateX(-90deg) translateZ(1920px);
    background-image: url("../images/gui/title/background/panorama_5.png");
    background-size: contain;
}


#stone {
    position: absolute;
    top: 95%;
    left: 50%;
    transform: translate(-50%, -50%) rotateX(20deg) rotateY(-20deg);
    transform-style: preserve-3d;
    height: 320px;
    width: 320px;
    transition: all 1s;
    animation: rotate 61s linear;
    animation-iteration-count: infinite;
}

.stoneface {
    position: absolute;
    height: 100%;
    width: 100%;
    border: 0px solid black;
}

.stoneface:nth-child(1) {
    transform: rotateY(0deg) translateY(320px) translateZ(160px);
    background-image: url("../images/blocks/stone.png");
    background-size: contain;
}

.stoneface:nth-child(2) {
    transform: rotateY(90deg) translateY(320px) translateZ(160px);
    background-image: url("../images/blocks/stone.png");
    background-size: contain;
}

.stoneface:nth-child(3) {
    transform: rotateY(180deg) translateY(320px) translateZ(160px);
    background-image: url("../images/blocks/stone.png");
    background-size: contain;
}

.stoneface:nth-child(4) {
    transform: rotateY(270deg) translateY(320px) translateZ(160px);
    background-image: url("../images/blocks/stone.png");
    background-size: contain;
}

.stoneface:nth-child(5) {
    transform: rotateX(90deg) translateZ(-160px) translateY(0px);
    background-image: url("../images/blocks/stone.png");
    background-size: contain;
}

.stoneface:nth-child(6) {
    transform: rotateX(270deg) translateZ(480px) translateY(0px);
    background-image: url("../images/blocks/stone.png");
    background-size: contain;
}


#podzol {
    position: absolute;
    top: 95%;
    left: 50%;
    transform: translate(-50%, -50%) rotateX(20deg) rotateY(-20deg);
    transform-style: preserve-3d;
    height: 320px;
    width: 320px;
    transition: all 1s;
    animation: rotate 61s linear;
    animation-iteration-count: infinite;
}

.podzolface {
    position: absolute;
    height: 100%;
    width: 100%;
    border: 0px solid black;
}

.podzolface:nth-child(1) {
    transform: rotateY(0deg) translateZ(160px);
    background-image: url("../images/blocks/dirt_podzol_side.png");
    background-size: contain;
}

.podzolface:nth-child(2) {
    transform: rotateY(90deg) translateZ(160px);
    background-image: url("../images/blocks/dirt_podzol_side.png");
    background-size: contain;
}

.podzolface:nth-child(3) {
    transform: rotateY(180deg) translateZ(160px);
    background-image: url("../images/blocks/dirt_podzol_side.png");
    background-size: contain;
}

.podzolface:nth-child(4) {
    transform: rotateY(270deg) translateZ(160px);
    background-image: url("../images/blocks/dirt_podzol_side.png");
    background-size: contain;
}

.podzolface:nth-child(5) {
    transform: rotateX(90deg) translateZ(160px);
    background-image: url("../images/blocks/dirt_podzol_top.png");
    background-size: contain;
}

.podzolface:nth-child(6) {
    transform: rotateX(270deg) translateZ(160px);
    background-image: url("../images/blocks/dirt.png");
    background-size: contain;
}


#fence {
    position: absolute;
    top: 95%;
    left: 50%;
    transform: translate(-50%, -50%) rotateX(20deg) rotateY(-20deg);
    transform-style: preserve-3d;
    height: 320px;
    width: 320px;
    transition: all 1s;
    animation: rotate 61s linear;
    animation-iteration-count: infinite;
}

.fenceface {
    position: absolute;
    height: 100%;
    width: 100%;
    border: 0px solid black;
}

.fenceface:nth-child(1) {
    transform: rotateY(0deg) translateZ(40px) translateX(60px) translateY(-320px);
    background-image: url("../images/blocks/planks_oak.png");
    background-size: cover;
    width: 25%;
    margin-left: 60px;
}

.fenceface:nth-child(2) {
    transform: rotateY(90deg) translateZ(20px) translateY(-320px);
    background-image: url("../images/blocks/planks_oak.png");
    background-size: cover;
    width: 25%;
    margin-left: 60px;
}

.fenceface:nth-child(3) {
    transform: rotateY(180deg) translateZ(40px) translateX(-60px) translateY(-320px);
    background-image: url("../images/blocks/planks_oak.png");
    background-size: cover;
    width: 25%;
    margin-left: 60px;
}

.fenceface:nth-child(4) {
    transform: rotateY(270deg) translateZ(-100px) translateY(-320px);
    background-image: url("../images/blocks/planks_oak.png");
    background-size: cover;
    width: 25%;
    margin-left: 60px;
}

.fenceface:nth-child(5) {
    transform: rotateX(90deg) translateZ(100px) translateY(0px) translateX(60px);
    background-image: url("../images/blocks/planks_oak.png");
    background-size: 320px;
    width: 25%;
    height: 25%;
    margin: 60px;
}

.fenceface:nth-child(6) {
    transform: rotateX(270deg) translateZ(-420px) translateY(0px) translateX(60px);
    background-image: url("../images/blocks/planks_oak.png");
    background-size: 320px;
    width: 25%;
    height: 25%;
    margin: 60px;
}


#leaf {
    position: absolute;
    top: 95%;
    left: 50%;
    transform: translate(-50%, -50%) rotateX(20deg) rotateY(-20deg);
    transform-style: preserve-3d;
    height: 320px;
    width: 320px;
    transition: all 1s;
    animation: rotate 61s linear;
    animation-iteration-count: infinite;
}

.leafface {
    position: absolute;
    height: 100%;
    width: 100%;
    border: 0px solid black;
}

.leafface:nth-child(1) {
    transform: rotateY(0deg) translateZ(160px) translateY(-640px);
    background-image: url("../images/blocks/leaves_oak.png");
    background-size: contain;
}

.leafface:nth-child(2) {
    transform: rotateY(90deg) translateZ(160px) translateY(-640px);
    background-image: url("../images/blocks/leaves_oak.png");
    background-size: contain;
}

.leafface:nth-child(3) {
    transform: rotateY(180deg) translateZ(160px) translateY(-640px);
    background-image: url("../images/blocks/leaves_oak.png");
    background-size: contain;
}

.leafface:nth-child(4) {
    transform: rotateY(270deg) translateZ(160px) translateY(-640px);
    background-image: url("../images/blocks/leaves_oak.png");
    background-size: contain;
}

.leafface:nth-child(5) {
    transform: rotateX(90deg) translateZ(480px) translateY(0px);
    background-image: url("../images/blocks/leaves_oak.png");
    background-size: contain;
}

.leafface:nth-child(6) {
    transform: rotateX(270deg) translateZ(-800px) translateY(0px);
    background-image: url("../images/blocks/leaves_oak.png");
    background-size: contain;
}