:root {
 --vw: 1024;
 --vh: 768;

 --width: 100vw;
 --height: calc(var(--vh) *1px);
 --width-index: 1000;
 --height-index: 1000;
 --z-index: 1000;
 --width-segments: 11;
 --height-segments: 11;

 --perspective:10cm;
 --perspective-origin_x:50%;
 --perspective-origin_y:70%;
 --transform-origin_x:50%;
 --transform-origin_y:50%;
 --transform-origin_z:0px;
 --rotace-zak-deska:90deg;

 --fild-width: calc(var(--width) / var(--width-segments));
 --fild-height:calc(var(--height) / var(--height-segments));

 --cube-x: calc(var(--fild-width) * (var(--width-index) /100));
 --cube-y: calc(var(--fild-height) * (var(--height-index) /100));
 --cube-z: calc(var(--fild-height) * (var(--z-index) /100));
 --cube-top: calc( calc(var(--cube-y) - var(--cube-z) ) *0.5);
 
 --cube-xy-ratio: calc( ( ( var(--vw) * (var(--width-index) /100)) / var(--width-segments) ) / ( ( var(--vh) * (var(--height-index) /100)) / var(--height-segments) ) );
 --cube-diagonal: 229.706px; /*229.706px*/
 --cube-angle: 23.31deg; /*23.31deg*/

}

html, body{
 margin: 0;
 padding:0;
 box-sizing: border-box;
 height: calc(var(--height) *1);
 overflow:hidden;
}

html{
 position:relative;
 width: 100%;
 text-align:left;
 overflow:hidden;
}

body{
 width: 100%; 
 margin:0;
 animation-duration: 0.05s;
 animation-timing-function: linear;
 animation-delay: 0s;
 animation-iteration-count: 1;
 animation-direction: normal;
 animation-fill-mode: forwards;
 overflow:hidden;
}

body, button, input, select{
 font-size: 1.0vw;
 font-family: Arial, Helvetica, sans-serif
}


.ori0{
  background-position: 0% top;
}

.ori90{
  background-position: 25% top;
}

.ori180{
  background-position: 50% top;
}

.ori270{
  background-position: 100% top;
}

input{
 border-radius: 0;
}

@keyframes forward{
   0% {top:calc(((var(--height) * (var(--height-index) /100)) *-0.5) + ((var(--fild-height) * (var(--height-index) /100))) *0.5);}
 100% {top:calc(((var(--height) * (var(--height-index) /100)) *-0.5) + ((var(--fild-height) * (var(--height-index) /100))) *1.5);}
}

@keyframes backward{
   0% {top:calc(((var(--height) * (var(--height-index) /100)) *-0.5) + ((var(--fild-height) * (var(--height-index) /100))) *0.5);}
 100% {top:calc(((var(--height) * (var(--height-index) /100)) *-0.5) + ((var(--fild-height) * (var(--height-index) /100))) *-0.5);}
}

@keyframes turn-right{

 0% {transform: rotateX(calc(var(--rotace-zak-deska) *1)) translate(-50%, 0%)  rotateY(0deg) rotateZ(0deg);}
 100% {transform: rotateX(calc(var(--rotace-zak-deska) *1)) translate(-50%, 0%)  rotateY(0deg) rotateZ(-90deg);}
}

@keyframes turn-left{
 0% {transform: rotateX(calc(var(--rotace-zak-deska) *1)) translate(-50%, 0%)  rotateY(0deg) rotateZ(0deg);}
 100% {transform: rotateX(calc(var(--rotace-zak-deska) *1)) translate(-50%, 0%)  rotateY(0deg) rotateZ(90deg);}
}

@keyframes move-right{
   0% {left:calc((var(--width) * (var(--width-index) /100)) *-0.5);}
 100% {left:calc(((var(--width) * (var(--width-index) /100)) *-0.5) - var(--fild-width));}
}

@keyframes move-left{
  0% {left:calc((var(--width) * (var(--width-index) /100)) *-0.5);}
 100% {left:calc(((var(--width) * (var(--width-index) /100)) *-0.5) + var(--fild-width));}
}

@keyframes auto-rotate{
 0% {transform: rotateX(calc(var(--rotace-zak-deska) *1)) translate(-50%, 0%)  rotateY(0deg) rotateZ(0deg);}
 100% {transform: rotateX(calc(var(--rotace-zak-deska) *1)) translate(-50%, 0%)  rotateY(0deg) rotateZ(365deg);}
}

div[id="plocha"]{
 transform-style: preserve-3d;
 perspective: calc(var(--perspective) *1);  /*70vh*/ /*calc(var(--perspective) *1)*/
 perspective-origin: calc(var(--perspective-origin_x) *1) calc(var(--perspective-origin_y) *1); /*50% 80%*/ /* calc(var(--perspective-origin_x) *1) calc(var(--perspective-origin_y) *1)*/
 width: calc(var(--width) *1); 
 height: 50%;
 overflow:visible;
 position:absolute;
 bottom:0;
 left:0;
}

div[id="tocna"]{ /*točna*/
 transform-style: preserve-3d;
 border:2px dotted red;
 box-sizing: border-box; 
 position:absolute;
 left: 50%;
 bottom: 50%;/*-1px*/
 height: calc(var(--fild-height) * (var(--height-index) /100));/*2px*/
 width:  calc(var(--fild-width) * (var(--width-index) /100));/*2px*/
 transform-origin: calc(var(--transform-origin_x) *1) calc(var(--transform-origin_y) *1) calc(var(--transform-origin_z) *1);
 transform: rotateX(calc(var(--rotace-zak-deska) *1)) translate3d(-50%, 50%, 0px) /*na střed v rámci točny,a le tam má minimální čířku, takže nemá na zobrazení vliv*/  rotateY(0deg) rotateZ(0deg); /*transform: rotateY(45deg) translateZ(-100px) rotateX(10deg)*/
 animation-duration: 0.2s;
 animation-timing-function: linear;
 animation-delay: 0s;
 animation-iteration-count: 1;
 animation-direction: normal;
 animation-fill-mode: forwards;
}

div[id="main"]{ /*plocha - main*/
 /*visibility:hidden;*/
 transform-style: preserve-3d;
 box-sizing: border-box;
 display: inline-grid;
 width: calc(var(--width) * (var(--width-index) /100));
 height: calc(var(--height) * (var(--height-index) /100));
 transform:  translate3d(0%, 0%, -1px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
 position:absolute;
 top: calc(((var(--height) * (var(--height-index) /100)) *-0.5) + ((var(--fild-height) * (var(--height-index) /100))) *0.5);/*posun trochu dopředu abychom se při otáčení neocitli uprostřed zdi*/
 left:calc(((var(--width) * (var(--width-index) /100)) *-0.5) + ((var(--fild-width) * (var(--width-index) /100))) *0.5);
 animation-duration: 0.2s;
 animation-timing-function: linear;
 animation-delay: 0s;
 animation-iteration-count: 1;
 animation-direction: normal;
 animation-fill-mode: forwards;
 padding:0;
}

body > div > div > div > div{ /*pole*/
 transform-style: preserve-3d;
 box-sizing: border-box;
 width: calc(var(--fild-width) * (var(--width-index) /100));
 height: calc(var(--fild-height)* (var(--height-index) /100));
}

div[id="main"] > span{ /*stěna mezi poli*/
 transform-style: preserve-3d;
 /*transform-origin: 50% 50% 0;*/ 
 box-sizing: border-box;
 position:absolute;
 top:calc(var(--height) *-1); /*-100vh;*/
 left:calc(var(--width) *-0.5); /*-50%;*/
 display:block;
 width: 100%;
 height: calc(var(--height) *7);/*5000px; *//*calc(var(--height) *2);*/ /*200vh;*/
 transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg) translateY(0px);
 background:0;
}

.cube { /*objekt*/
 transform-style: preserve-3d; 
 width: calc(var(--cube-x)*1);
 height: calc(var(--cube-y)*1);
 position: relative;
 transform: translateZ(calc(var(--cube-z)*0.5)) rotateX(0deg) rotateY(0deg);
}

.cube_ori_90, .cube_ori_-270 { 
 transform-origin: center center; 
 transform: scale3d( var(--cube-xy-ratio), calc( 1 / var(--cube-xy-ratio)), 1)  translateZ(calc(var(--cube-z)*0.5)) rotateZ(90deg);
}

.cube_ori_180 { 
 transform-origin: center center; 
 transform: translateZ(calc(var(--cube-z)*0.5)) rotateZ(180deg);
}

.cube_ori_-90, .cube_ori_270 { 
 /*transform-style: preserve-3d;*/
 transform-origin: center center; 
 transform: scale3d( var(--cube-xy-ratio), calc( 1 / var(--cube-xy-ratio)), 1)  translateZ(calc(var(--cube-z)*0.5))  rotateZ(270deg); /*1.6, 0.625*/  /*rotate3d(0, 0, 1, 270deg)*/
}

.cube_ori_-180 { 
 transform-origin: center center; 
 transform: translateZ(calc(var(--cube-z)*0.5)) rotateZ(180deg);
}

figure {
 transform-style: preserve-3d;
 display: block; 
 position: absolute;
 margin:0;
 padding:0;
 transform-origin: 50% 50% 0; 
}

.f_top         {width: calc(var(--cube-x)*1);        height: calc(var(--cube-y)*1);                                                                 transform: rotateY( 0deg)    translateZ(calc(var(--cube-z)*0.5));}
.f_top_i       {width: calc(var(--cube-x)*1);        height: calc(var(--cube-y)*1);                                                                 transform: rotateX( -180deg) translateZ(calc(var(--cube-z)*-0.499));}

.f_bottom      {width: calc(var(--cube-x)*1);        height: calc(var(--cube-y)*1);                                                                 transform: rotateX( -180deg) translateZ(calc(var(--cube-z)*0.5));}
.f_bottom_i    {width: calc(var(--cube-x)*1);        height: calc(var(--cube-y)*1);                                                                 transform: rotateY( 0deg)    translateZ(calc(var(--cube-z)*-0.499));}

.f_right       {width: calc(var(--cube-y)*1);        height: calc(var(--cube-z)*1);                                 transform-origin: top left 0;   transform: rotateY( -90deg) rotateZ( 90deg) rotateY( 180deg) translateY(calc(var(--cube-z)*-0.5)) translateX(calc(var(--cube-y)*-1)) translateZ(calc(var(--cube-x)*1));}
.f_right_i     {width: calc(var(--cube-y)*1);        height: calc(var(--cube-z)*1);                                 transform-origin: top left 0;   transform: rotateY( -90deg) rotateZ( 90deg) translateY(calc(var(--cube-z)*-0.5)) translateZ(calc(var(--cube-x)*-0.999)) /*translateZ(calc(var(--cube-x)*1))  */;}

.f_left        {width: calc(var(--cube-y)*1);        height: calc(var(--cube-z)*1);                                 transform-origin: top left 0;   transform: rotateY( -90deg) rotateZ( 90deg) translateY(calc(var(--cube-z)*-0.5));} 
.f_left_i      {width: calc(var(--cube-y)*1);        height: calc(var(--cube-z)*1);                                 transform-origin: top left 0;   transform: rotateY( -90deg) rotateZ( 90deg) rotateY( 180deg) translateY(calc(var(--cube-z)*-0.5)) translateZ(calc(var(--cube-x)*0.001)) translateX(calc(var(--cube-y)*-1));}

.f_back        {width: calc(var(--cube-x)*1);        height: calc(var(--cube-z)*1); top: calc(var(--cube-top)*1);                                   transform: rotateX( -90deg) rotateY( 180deg) translateZ(calc(var(--cube-y)*0.5));}
.f_back_i      {width: calc(var(--cube-x)*1);        height: calc(var(--cube-z)*1); top: calc(var(--cube-top)*1);                                   transform: rotateX( -90deg) translateZ(calc(var(--cube-y)*-0.499));}

.f_middle      {width: calc(var(--cube-x)*1);        height: calc(var(--cube-z)*1); top: calc(var(--cube-top)*1);                                   transform: rotateX( -90deg);}
.f_middle_i    {width: calc(var(--cube-x)*1);        height: calc(var(--cube-z)*1); top: calc(var(--cube-top)*1);                                   transform: rotateX( -90deg);}
.f_middle_user {width: calc(var(--cube-x)*1);        height: calc(var(--cube-z)*1); top: calc(var(--cube-top)*1);                                   transform: rotateX( -90deg); display:none;} /*vypne vrstvu s uživatelem, zapne se scriptem, pokud je použita*/

.f_front       {width: calc(var(--cube-x)*1);        height: calc(var(--cube-z)*1); top: calc(var(--cube-top)*1);                                   transform: rotateX( -90deg) translateZ(calc(var(--cube-y)*0.5));}
.f_front_i     {width: calc(var(--cube-x)*1);        height: calc(var(--cube-z)*1); top: calc(var(--cube-top)*1);                                   transform: rotateX( -90deg) translateZ(calc(var(--cube-y)*0.499)) rotateY( 180deg);}

.f_FrLe_BoRi   {width: calc(var(--cube-diagonal)*1); height: calc(var(--cube-z)*1); top: calc(var(--cube-top)*1.0); transform-origin: top left 0;   transform: rotateX( -90deg) translateZ(calc(var(--cube-y)*0.912)) translateY(calc(var(--cube-y)*-0.41)) rotateY( calc(var(--cube-angle)*1.0)); }
.f_FrRi_BoLe   {width: calc(var(--cube-diagonal)*1); height: calc(var(--cube-z)*1); top: calc(var(--cube-top)*1.0); transform-origin: top left 0;   transform: rotateX( -90deg) translateZ(calc(var(--cube-y)*-0.089)) translateY(calc(var(--cube-y)*-0.41)) rotateY( calc(var(--cube-angle)*-1)); }

form[id="dash"]{
 position:absolute;
 right:1%;
 bottom:1%;
 z-index:100;
 display: grid;
 grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
 grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
 width: 20%;
 height: 10%;
 box-shadow: 0.3rem 0.3rem 0.3rem rgba(0, 0, 0, 1);
}

form[id="debug"]{
 position:absolute;
 left:1%;
 top:1%;
 z-index:100;
 width: 20%;
 height: 10%;
 background:#FFF;
 box-shadow: 0.3rem 0.3rem 0.3rem rgba(0, 0, 0, 1);
 text-align:center;
}

form[id="debug"] span{
 position:absolute;
 right:1%;
 bottom:1%;
 z-index:101;
 display:block;
 font-size: 60%;
}

div[id="mess"]{
 position:absolute;
 right:1%;
 top:1%;
 z-index:100;
 width: 50%;
 height: 10%;
 background:#FFF;
 box-shadow: 0.3rem 0.3rem 0.3rem rgba(0, 0, 0, 1);
 text-align:left;
 overflow-y: auto;
}
div[id="mess"] span{
 color:red;
}

form[id="dashboard"]{
 position:absolute;
 right:5%;
 top:5%;
 z-index:90;
 padding-left:20%;
 box-sizing: border-box;
 width: 90%;
 height: 90%;
 background:#FFF;
 box-shadow: 0.3rem 0.3rem 0.3rem rgba(0, 0, 0, 1);
 text-align:left;
 overflow-y: auto;
 opacity:0.4;
}


form[id="dashboard"] input[type="range"]{
 width:60%;
}