/*
X1 = sin(36)*width = 58.778525
Z1 = sin(54)*width = 80.901699
X2 = sin(72)*width = 95.105651
Z2 = sin(18)*width = 30.901699

Entfernung (100) je minus Raduis Sechseck (=Höhe der Flächen)

Raduis = Kantenlänge*1.538842

25^2=12.5^2+x^2
x^2=25^2-12.5^2
x=sqrt(25^2-12.5^2)
x=21.650635

with 35: 30.310899
*/

* {
    --spacewidth: calc(100vw*1.5392);
    --spaceheight: 86.61vh;
    --spacetotal: calc(var(--spacewidth) - var(--spaceheight));
}


@media (min-aspect-ratio: 1/1) {
    #blocker {
        z-index: -100;
        opacity: 0;
    }
}

@media (max-aspect-ratio: 1/1) {
    #blocker {
        z-index: 100;
        opacity: 1;
    }
}


#blocker {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #222;
    transition: all 1s;
}

body {
    width: 100%;
    height: 100%;
    perspective: 150vmax;
    overflow: hidden;
    background-color: #fff;
    text-align: center;
}

button {
    width: 2em;
    height: 2em;
    border: none;
    position: absolute;
}

div {
    transition: transform 1s;
    -webkit-transition: transform 1s;
    -moz-transition: transform 1s;
    -o-transition: transform 1s;
    -ms-transition: transform 1s;
}

main {
    transform-origin: 50% 50% -200vmax;
    -webkit-transform-origin: 50% 50% -200vmax;
    -moz-transform-origin: 50% 50% -200vmax;
    -o-transform-origin: 50% 50% -200vmax;
    -ms-transform-origin: 50% 50% -200vmax;
    width: 100vw;
    height: 100vh;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transition: transform 1s;
    -webkit-transition: transform 1s;
    -moz-transition: transform 1s;
    -o-transition: transform 1s;
    -ms-transition: transform 1s;
    transform: translateZ(-200vmax);
    -webkit-transform: translateZ(-200vmax);
    -moz-transform: translateZ(-200vmax);
    -o-transform: translateZ(-200vmax);
    -ms-transform: translateZ(-200vmax);
}

.transparent {
    width: 100vw;
    height: 100vh;
    position: absolute;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    top: 0;
    left: 0;
    transition: transform 1s;
    -webkit-transition: transform 1s;
    -moz-transition: transform 1s;
    -o-transition: transform 1s;
    -ms-transition: transform 1s;
}

.solid {
    position: absolute;
    height: 100%;
    width: 100%;
    opacity: 100%;
    background-color: #222;
    outline: 0.2em solid #888;
    color: #fff;
/*    overflow: hidden; */
}

.up {
    top: 35%;
    position: relative;
}

.down {
    bottom: -40%;
    position: relative;
}

.left {
    left: 5em;
    bottom: 50%;
}

.right {
    right: 5em;
    bottom: 50%;
}

.con {
    width: 100vw;
    height: 100vh;
    position: absolute;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
}

.position0 {
    transform: rotateY(0deg) translateZ(var(--spacetotal));
    -webkit-transform: rotateY(0deg) translateZ(var(--spacetotal));
    -moz-transform: rotateY(0deg) translateZ(var(--spacetotal));
    -o-transform: rotateY(0deg) translateZ(var(--spacetotal));
    -ms-transform: rotateY(0deg) translateZ(var(--spacetotal));
}

.position1 {
    transform: rotateY(36deg) translateZ(var(--spacetotal));
    -webkit-transform: rotateY(36deg) translateZ(var(--spacetotal));
    -moz-transform: rotateY(36deg) translateZ(var(--spacetotal));
    -o-transform: rotateY(36deg) translateZ(var(--spacetotal));
    -ms-transform: rotateY(36deg) translateZ(var(--spacetotal));
}

.position2 {
    transform: rotateY(72deg) translateZ(var(--spacetotal));
    -webkit-transform: rotateY(72deg) translateZ(var(--spacetotal));
    -moz-transform: rotateY(72deg) translateZ(var(--spacetotal));
    -o-transform: rotateY(72deg) translateZ(var(--spacetotal));
    -ms-transform: rotateY(72deg) translateZ(var(--spacetotal));
}

.position3 {
    transform: rotateY(108deg) translateZ(var(--spacetotal));
    -webkit-transform: rotateY(108deg) translateZ(var(--spacetotal));
    -moz-transform: rotateY(108deg) translateZ(var(--spacetotal));
    -o-transform: rotateY(108deg) translateZ(var(--spacetotal));
    -ms-transform: rotateY(108deg) translateZ(var(--spacetotal));
}

.position4 {
    transform: rotateY(144deg) translateZ(var(--spacetotal));
    -webkit-transform: rotateY(144deg) translateZ(var(--spacetotal));
    -moz-transform: rotateY(144deg) translateZ(var(--spacetotal));
    -o-transform: rotateY(144deg) translateZ(var(--spacetotal));
    -ms-transform: rotateY(144deg) translateZ(var(--spacetotal));
}

.position5 {
    transform: rotateY(180deg) translateZ(var(--spacetotal));
    -webkit-transform: rotateY(180deg) translateZ(var(--spacetotal));
    -moz-transform: rotateY(180deg) translateZ(var(--spacetotal));
    -o-transform: rotateY(180deg) translateZ(var(--spacetotal));
    -ms-transform: rotateY(180deg) translateZ(var(--spacetotal));
}

.position6 {
    transform: rotateY(216deg) translateZ(var(--spacetotal));
    -webkit-transform: rotateY(216deg) translateZ(var(--spacetotal));
    -moz-transform: rotateY(216deg) translateZ(var(--spacetotal));
    -o-transform: rotateY(216deg) translateZ(var(--spacetotal));
    -ms-transform: rotateY(216deg) translateZ(var(--spacetotal));
}

.position7 {
    transform: rotateY(252deg) translateZ(var(--spacetotal));
    -webkit-transform: rotateY(252deg) translateZ(var(--spacetotal));
    -moz-transform: rotateY(252deg) translateZ(var(--spacetotal));
    -o-transform: rotateY(252deg) translateZ(var(--spacetotal));
    -ms-transform: rotateY(252deg) translateZ(var(--spacetotal));
}

.position8 {
    transform: rotateY(288deg) translateZ(var(--spacetotal));
    -webkit-transform: rotateY(288deg) translateZ(var(--spacetotal));
    -moz-transform: rotateY(288deg) translateZ(var(--spacetotal));
    -o-transform: rotateY(288deg) translateZ(var(--spacetotal));
    -ms-transform: rotateY(288deg) translateZ(var(--spacetotal));
}

.position9 {
    transform: rotateY(324deg) translateZ(var(--spacetotal));
    -webkit-transform: rotateY(324deg) translateZ(var(--spacetotal));
    -moz-transform: rotateY(324deg) translateZ(var(--spacetotal));
    -o-transform: rotateY(324deg) translateZ(var(--spacetotal));
    -ms-transform: rotateY(324deg) translateZ(var(--spacetotal));
}

.rotationA {
    transform: rotateX(0deg) translateZ(var(--spaceheight));
    -webkit-transform: rotateX(0deg) translateZ(var(--spaceheight));
    -moz-transform: rotateX(0deg) translateZ(var(--spaceheight));
    -o-transform: rotateX(0deg) translateZ(var(--spaceheight));
    -ms-transform: rotateX(0deg) translateZ(var(--spaceheight));
}

.rotationB {
    transform: rotateX(60deg) translateZ(var(--spaceheight));
    -webkit-transform: rotateX(60deg) translateZ(var(--spaceheight));
    -moz-transform: rotateX(60deg) translateZ(var(--spaceheight));
    -o-transform: rotateX(60deg) translateZ(var(--spaceheight));
    -ms-transform: rotateX(60deg) translateZ(var(--spaceheight));
}

.rotationC {
    transform: rotateX(120deg) translateZ(var(--spaceheight));
    -webkit-transform: rotateX(120deg) translateZ(var(--spaceheight));
    -moz-transform: rotateX(120deg) translateZ(var(--spaceheight));
    -o-transform: rotateX(120deg) translateZ(var(--spaceheight));
    -ms-transform: rotateX(120deg) translateZ(var(--spaceheight));
}

.rotationD {
    transform: rotateX(180deg) translateZ(var(--spaceheight));
    -webkit-transform: rotateX(180deg) translateZ(var(--spaceheight));
    -moz-transform: rotateX(180deg) translateZ(var(--spaceheight));
    -o-transform: rotateX(180deg) translateZ(var(--spaceheight));
    -ms-transform: rotateX(180deg) translateZ(var(--spaceheight));
}

.rotationE {
    transform: rotateX(240deg) translateZ(var(--spaceheight));
    -webkit-transform: rotateX(240deg) translateZ(var(--spaceheight));
    -moz-transform: rotateX(240deg) translateZ(var(--spaceheight));
    -o-transform: rotateX(240deg) translateZ(var(--spaceheight));
    -ms-transform: rotateX(240deg) translateZ(var(--spaceheight));
}

.rotationF {
    transform: rotateX(300deg) translateZ(var(--spaceheight));
    -webkit-transform: rotateX(300deg) translateZ(var(--spaceheight));
    -moz-transform: rotateX(300deg) translateZ(var(--spaceheight));
    -o-transform: rotateX(300deg) translateZ(var(--spaceheight));
    -ms-transform: rotateX(300deg) translateZ(var(--spaceheight));
}

#particles-js {
    position: absolute;
    z-index: 0;
    width: 100vw;
    height: 100vh;
}

#shadingleft {
    position: absolute;
    z-index: 5;
    left: 0;
    top: 0;
    height: 100%;
    width: 15vw;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    opacity: 0.8;
    transition: opacity 0.5s;
    -webkit-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    -o-transition: opacity 0.5s;
    -ms-transition: opacity 0.5s;
}

#shadingright {
    position: absolute;
    z-index: 5;
    right: 0;
    top: 0;
    height: 100%;
    width: 15vw;
    background-image: linear-gradient(to left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    opacity: 0.8;
    transition: opacity 0.5s;
    -webkit-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    -o-transition: opacity 0.5s;
    -ms-transition: opacity 0.5s;
}

#shadingtop {
    position: absolute;
    z-index: 4;
    left: 0;
    top: 0;
    height: 15vh;
    width: 100%;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    opacity: 0.8;
    transition: opacity 0.5s;
    -webkit-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    -o-transition: opacity 0.5s;
    -ms-transition: opacity 0.5s;
}

#shadingbottom {
    position: absolute;
    z-index: 4;
    left: 0;
    bottom: 0;
    height: 15vh;
    width: 100%;
    background-image: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    opacity: 0.8;
    transition: opacity 0.5s;
    -webkit-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    -o-transition: opacity 0.5s;
    -ms-transition: opacity 0.5s;
}

#shadingleft:hover,
#shadingright:hover,
#shadingtop:hover,
#shadingbottom:hover {
    opacity: 0.5;
}