// IN PROGRESS

- let sides = '<div class="side"></div><div class="side"></div><div class="side"></div><div class="side"></div><div class="side"></div><div class="side"></div>';
- let faces = '<div class="face"></div><div class="face"></div><div class="face"></div><div class="face"></div><div class="face"></div><div class="face"></div><div class="face"></div><div class="face"></div><div class="face"></div><div class="face"></div>';
input#d-options(name='options' type='checkbox')
label(for='d-options')
  span
input#d-none(name='doors' type='radio' checked)
label(for='d-none')
  span
input#d-front(name='doors' type='radio')
label(for='d-front')
  span front
input#d-left(name='doors' type='radio')
label(for='d-left')
  span left
input#d-right(name='doors' type='radio')
label(for='d-right')
  span right
input#d-upper(name='doors' type='radio')
label(for='d-upper')
  span upper
input#d-lower(name='doors' type='radio')
label(for='d-lower')
  span lower
input#d-look(name='look' type='checkbox')
label(for='d-look')
  span
input#d-number(name='num' type='checkbox')
label(for='d-number')
  span
input#d-enter(name='enter' type='checkbox')
label(for='d-enter')
  span
each dsb in ['number', 'look', 'right', 'front', 'left', 'upper', 'lower', 'none', 'enter', 'options']
  span(class='disable' id='h-'+dsb)
a.reload(href='https://codepen.io/josetxu/pen/PodPWaK' target='_top')
  span
.content
  .cube.room !{sides}
    each sds in ['front', 'left', 'right', 'upper', 'lower']
      div(class='side '+sds)
        .cube.door !{sides}
          - for (var c=0; c<3; c++)
            .cylinder !{faces}
          .cylinder.knob1 !{faces}
          .cylinder.knob2 !{faces}
        .cube.tunnel
          .side
          .side
          - for(var sd=0; sd<4; sd++)
            .side
              span
        each ln in ['vl', 'vr', 'ht', 'hb']
          div(class='cube line '+ln) !{sides}
        each mn in ['lt', 'rt', 'lb', 'rb']
          div(class='cube mini '+mn) !{sides}
        - for (var f=1; f<9; f++)
          div(class='drawing fig-'+f)
    .green.trap
    .red.trap
    .orange.trap
      - for (var c=0; c<36; c++)
        .cylinder !{faces}
a.by(target='_blank' href='https://josetxu.com') JOSETXU

//
  Copyright (c) 2023 by Josetxu  (https://codepen.io/josetxu/pen/PodPWaK)
  
  Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
  
  The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
  
  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

/*** IN PROGRESS ***/

:root {
  --u: 1vmin;
  --gp: 50%/calc(var(--u) * 32.25) calc(var(--u) * 32.25);
  --orange-wall: #df882a;
  --orange-shine: #e3a664;
  --orange-light: #e1a461;
  --green-wall: #048d0a;
  --green-shine: #48a84d;
  --green-light: #47a74b;
  --red-wall: #ad0c00;
  --red-shine: #c04e45;
  --red-light: #be4c44;
  --blue-wall: #3b7ccc;
  --blue-shine: #6f9dd5;
  --blue-light: #6f9dd7;
  --white-wall: #dbdbdb;
  --white-shine: #efefef;
  --white-light: #d9d9d9;
  --gold: #a79a76;
  --hole: #565656;
  --color: var(--blue-wall);
  --shine: var(--blue-shine);
  --light: var(--blue-light);
}

html {
  height: 100%;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
  height: 100vh;
  background: #000;
  overflow: hidden;
}

body * {
  transform-style: preserve-3d;
  box-sizing: border-box;
  outline: none;
}

.content {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  perspective-origin: center;
  position: absolute;
  z-index: -1;
  transition: all 1s ease 0s;
  left: 0;
  top: 0;
  perspective: 100vmin;
}


/*** CUBE ***/
.cube {
  --width: 100;
  --height: 100;
  --depth: 100;
  transform: translateZ(10vmin) rotateX(0deg) rotateY(0deg);
  position: absolute;
  transition: all 0.5s ease 0s;
  height: calc(var(--height) * 1vmin);
  width: calc(var(--width) * 1vmin);
}

.side {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  width: 100%;
  box-shadow: 0 0 35vmin 3vmin #363636 inset, 0.25vmin 0.2vmin 0vmin 2.85vmin #555 inset;
  border: 2px solid #181818;  
}


.side:nth-of-type(1) {
  transform: translate3d(-50%, -50%, calc(var(--depth) * 0.5vmin));
  opacity: 0;
}

.side:nth-of-type(2) {
  transform: translate3d(-50%, -50%, calc(var(--depth) * -0.5vmin)) rotateY(180deg);
}
.side:nth-of-type(3) {
  width: calc(var(--depth) * 1vmin);
  transform: translate(-50%, -50%) rotateY(90deg) translate3d(0, 0, calc(var(--width) * 0.5vmin));
}
.side:nth-of-type(4) {
  width: calc(var(--depth) * 1vmin);
  transform: translate(-50%, -50%) rotateY(-90deg) translate3d(0, 0, calc(var(--width) * 0.5vmin));
}
.side:nth-of-type(5) {
  height: calc(var(--depth) * 1vmin);
  transform: translate(-50%, -50%) rotateX(90deg) translate3d(0, 0, calc(var(--height) * 0.5vmin));
}
.side:nth-of-type(6) {
  height: calc(var(--depth) * 1vmin);
  transform: translate(-50%, -50%) rotateX(-90deg) translate3d(0, 0, calc(var(--height) * 0.5vmin));
}


.cube.room:before {
  content: "";
  background: #fff;
  width: 20vmin;
  height: 20vmin;
  position: absolute;
  left: calc(50% - 10vmin);
  top: calc(50% - 10vmin);
  border: 3vmin solid #fff;
  box-sizing: border-box;
  transform: translateZ(-500vmin);
  border-color: #fff #efefef #dfdfdf #dedede;
  box-shadow: 0 0 0 1px #ccc inset, 0 0 20vmin 0 #fff, 0 0 5vmin -1vmin #fff;
}

.cube.room:after {
  content: "";
  background: #fff8;
  width: 100vmin;
  height: 100vmin;
  position: absolute;
  left: calc(50% - 50vmin);
  top: calc(50% - 50vmin);
  transform: translateZ(-500vmin);
  z-index: -1;
  background: 
    conic-gradient(from 0deg at 55% 45%, #2a2a2a30 12.5%, #00000040 25%, #fff0 0 100%) 0% 0%, 
    repeating-conic-gradient(from 90deg at 5vmin 5vmin, #06121c40 0% 25%, #fff0 0% 100%) var(--gp),
    repeating-conic-gradient(from 90deg at 3.25vmin 3.25vmin, #06121c40 0% 25%, #fff0 0% 100%) var(--gp);
  background-position: 0vmin 35.5vmin, -0.95vmin -0.95vmin, 0vmin 0vmin;
  background-repeat: no-repeat, repeat, repeat;
  background-size: 64.5vmin 64.5vmin, 32.25vmin 32.25vmin, 32.25vmin 32.25vmin;
  opacity: 0.85;
  background-color: #000000;
}


/*** ROOM ***/
.room > .side {

  --dot-pos: 
    50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%,
    50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 
    50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%,
    50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%,
    50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%,
    50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%,
    50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%;
  --dot-rep: 
    no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, 
    no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, 
    no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat,
    no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat,
    no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat,
    no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat,
    no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  --dot-siz: 
    100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 
    100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 
    100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%,
    100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%,
    100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%,
    100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%,
    100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;  
  background: 
    /*bolts start*/
    radial-gradient( circle at 10.25% 68.375%, #777 0 0.15%, #fff0 0.2% 100%),
    radial-gradient( circle at 17.7% 68.375%, #777 0 0.15%, #fff0 0.2% 100%),
    radial-gradient( circle at 24.25% 68.375%, #777 0 0.15%, #fff0 0.2% 100%),
    radial-gradient( circle at 43% 68.375%, #777 0 0.15%, #fff0 0.2% 100%),
    radial-gradient( circle at 50.35% 68.375%, #777 0 0.15%, #fff0 0.2% 100%),
    radial-gradient( circle at 57% 68.375%, #777 0 0.15%, #fff0 0.2% 100%),
    radial-gradient( circle at 75.75% 68.375%, #777 0 0.15%, #fff0 0.2% 100%),
    radial-gradient( circle at 83.15% 68.375%, #777 0 0.15%, #fff0 0.2% 100%),
    radial-gradient( circle at 89.75% 68.375%, #777 0 0.15%, #fff0 0.2% 100%),
    radial-gradient( circle at 10.25% 64.275%, #777 0 0.15%, #fff0 0.2% 100%),
    radial-gradient( circle at 17.7% 64.275%, #777 0 0.15%, #fff0 0.2% 100%),
    radial-gradient( circle at 24.25% 64.275%, #777 0 0.15%, #fff0 0.2% 100%),
    radial-gradient( circle at 75.75% 64.275%, #777 0 0.15%, #fff0 0.2% 100%),
    radial-gradient( circle at 83.15% 64.275%, #777 0 0.15%, #fff0 0.2% 100%),
    radial-gradient( circle at 89.75% 64.275%, #777 0 0.15%, #fff0 0.2% 100%),
    /*fin fila abajo*/
    radial-gradient( circle at 10.25% 36.1%, #777 0 0.15%, #fff0 0.2% 100%),
    radial-gradient( circle at 17.7% 36.1%, #777 0 0.15%, #fff0 0.2% 100%),
    radial-gradient( circle at 24.25% 36.1%, #777 0 0.15%, #fff0 0.2% 100%),
    radial-gradient( circle at 75.85% 36.1%, #777 0 0.15%, #fff0 0.2% 100%),
    radial-gradient( circle at 83.15% 36.1%, #777 0 0.15%, #fff0 0.2% 100%),
    radial-gradient( circle at 89.75% 36.1%, #777 0 0.15%, #fff0 0.2% 100%),
    radial-gradient( circle at 10.25% 31.925%, #777 0 0.15%, #fff0 0.2% 100%),
    radial-gradient( circle at 17.7% 31.925%, #777 0 0.15%, #fff0 0.2% 100%),
    radial-gradient( circle at 24.25% 31.925%, #777 0 0.15%, #fff0 0.2% 100%),
    radial-gradient( circle at 43% 31.925%, #777 0 0.15%, #fff0 0.2% 100%),
    radial-gradient( circle at 50.35% 31.925%, #777 0 0.15%, #fff0 0.2% 100%),
    radial-gradient( circle at 57% 31.925%, #777 0 0.15%, #fff0 0.2% 100%),
    radial-gradient( circle at 75.75% 31.925%, #777 0 0.15%, #fff0 0.2% 100%),
    radial-gradient( circle at 83.1% 31.925%, #777 0 0.15%, #fff0 0.2% 100%),
    radial-gradient( circle at 89.75% 31.925%, #777 0 0.15%, #fff0 0.2% 100%),
    /*fin fila arriba*/
    radial-gradient( circle at 68.4% 90.15%, #777 0 0.15%, #fff0 0.2% 100%),
    radial-gradient( circle at 68.4% 82.75%, #777 0 0.185%, #fff0 0.25% 100%),
    radial-gradient( circle at 68.4% 76.15%, #777 0 0.185%, #fff0 0.25% 100%),
    radial-gradient( circle at 64.375% 90.15%, #777 0 0.15%, #fff0 0.2% 100%),
    radial-gradient( circle at 64.375% 82.75%, #777 0 0.185%, #fff0 0.25% 100%),
    radial-gradient( circle at 64.375% 76.15%, #777 0 0.185%, #fff0 0.25% 100%),
    radial-gradient( circle at 36.125% 90.15%, #777 0 0.15%, #fff0 0.2% 100%),
    radial-gradient( circle at 36.125% 82.75%, #777 0 0.185%, #fff0 0.25% 100%),
    radial-gradient( circle at 36.125% 76.15%, #777 0 0.185%, #fff0 0.25% 100%),
    radial-gradient( circle at 32% 90.15%, #777 0 0.15%, #fff0 0.2% 100%),
    radial-gradient( circle at 32% 82.75%, #777 0 0.185%, #fff0 0.25% 100%),
    radial-gradient( circle at 32% 76.15%, #777 0 0.185%, #fff0 0.25% 100%),
    /*dos vert abajo*/
    radial-gradient( circle at 36.125% 10.75%, #777 0 0.15%, #fff0 0.2% 100%),
    radial-gradient( circle at 36.125% 17.35%, #777 0 0.185%, #fff0 0.25% 100%),
    radial-gradient( circle at 36.125% 24.65%, #777 0 0.185%, #fff0 0.25% 100%),
    radial-gradient( circle at 64.375% 10.75%, #777 0 0.15%, #fff0 0.2% 100%),
    radial-gradient( circle at 64.375% 17.35%, #777 0 0.185%, #fff0 0.25% 100%),
    radial-gradient( circle at 64.375% 24.65%, #777 0 0.185%, #fff0 0.25% 100%),
    radial-gradient( circle at 32% 10.75%, #777 0 0.15%, #fff0 0.2% 100%),
    radial-gradient( circle at 32% 17.35%, #777 0 0.185%, #fff0 0.25% 100%),
    radial-gradient( circle at 32% 24.65%, #777 0 0.185%, #fff0 0.25% 100%),
    radial-gradient( circle at 68.4% 10.75%, #777 0 0.15%, #fff0 0.2% 100%),
    radial-gradient( circle at 68.4% 17.35%, #777 0 0.185%, #fff0 0.25% 100%),
    radial-gradient( circle at 68.4% 24.65%, #777 0 0.185%, #fff0 0.25% 100%),
    /*dos vert arriba*/
    radial-gradient( circle at 68.4% 57.35%, #777 0 0.185%, #fff0 0.25% 100%),
    radial-gradient( circle at 68.4% 43.45%, #777 0 0.185%, #fff0 0.25% 100%),
    radial-gradient( circle at 68.4% 50%, #777 0 0.185%, #fff0 0.25% 100%),
    radial-gradient( circle at 32% 57.35%, #777 0 0.185%, #fff0 0.25% 100%),
    radial-gradient( circle at 32% 43.45%, #777 0 0.185%, #fff0 0.25% 100%),
    radial-gradient( circle at 32% 50%, #777 0 0.185%, #fff0 0.25% 100%),
    /*bolts end*/
    conic-gradient(from 0deg at 55% 45%, #a7a6a6 12.5%, #c9c9c9 25%, #fff0 0 100%) 0% 0%, 
    repeating-conic-gradient(from 90deg at 5vmin 5vmin, var(--color) 0% 25%, #fff0 0% 100%) var(--gp), 
    repeating-conic-gradient(from 90deg at 3.25vmin 3.25vmin, var(--hole) 0% 25%, #fff0 0% 100%) var(--gp);
  background-size: var(--dot-siz), 64.5vmin 64.5vmin, 32.25vmin 32.25vmin, 32.25vmin 32.25vmin;
  background-position: var(--dot-pos), 0vmin 35.5vmin, -0.95vmin -0.95vmin, 0vmin 0vmin;
  background-repeat: var(--dot-rep), no-repeat, repeat, repeat; 
  clip-path: polygon(0% 0%, 0% 100%, 40% 100%, 40% 40%, 60% 40%, 60% 60%, 40% 60%, 40% 100%, 100% 100%, 100% 0%);
  filter: none;
}


.room > .side:nth-of-type(1) {
  transform: translate3d(-50%, -50%, calc(var(--depth) * 0.5vmin));
  opacity: 1;
  clip-path: none;
  filter: none;
  box-shadow: 0 0 0vmin 150vmin #000000fe;
  background: #fff0;
}
.room > .side:nth-of-type(2) {
  transform: translate3d(-50%, -50%, calc(var(--depth) * -0.5vmin)) rotateY(180deg);  
}
.room > .side:nth-of-type(3) {
  width: calc(var(--depth) * 1vmin);
  transform: translate(-50%, -50%) rotateY(90deg) translate3d(0, 0, calc(var(--width) * 0.5vmin));
}
.room > .side:nth-of-type(4) {
  width: calc(var(--depth) * 1vmin);
  transform: translate(-50%, -50%) rotateY(-90deg) translate3d(0, 0, calc(var(--width) * 0.5vmin));
}
.room > .side:nth-of-type(5) {
  height: calc(var(--depth) * 1vmin);
  transform: translate(-50%, -50%) rotateX(90deg) translate3d(0, 0, calc(var(--height) * 0.5vmin));
}
.room > .side:nth-of-type(6) {
  height: calc(var(--depth) * 1vmin);
  transform: translate(-50%, -50%) rotateX(-90deg) translate3d(0, 0, calc(var(--height) * 0.5vmin));
}

/* front open */
input#d-front:checked ~ input#d-look ~ .content > .room  {
  transition: all 0s ease 0s !important;
}
/* front look */
input#d-front:checked ~ input#d-look:checked ~ .content > .room > .side:nth-of-type(1) {
  --color: #146485;
  box-shadow: 0 0 0vmin 150vmin #000000fe, 0 0 50vmin 50vmin #000e inset;
  background: 
    conic-gradient(from 0deg at 55% 45%, #a7a6a6 12.5%, #c9c9c9 25%, #fff0 0 100%) 0% 0%, 
    repeating-conic-gradient(from 90deg at 5vmin 5vmin, var(--color) 0% 25%, #fff0 0% 100%) var(--gp), 
    repeating-conic-gradient(from 90deg at 3.25vmin 3.25vmin, var(--hole) 0% 25%, #fff0 0% 100%) var(--gp);
  background-position: 0vmin 35.5vmin, -0.95vmin -0.95vmin, 0vmin 0vmin;
  background-repeat: no-repeat, repeat, repeat;
  background-size: 64.5vmin 64.5vmin, 32.25vmin 32.25vmin, 32.25vmin 32.25vmin;
}
input#d-front:checked ~ input#d-look:checked ~ .content > .room > .side:nth-of-type(1):before {
  opacity: 1;
  content: "";
  transform: rotateY(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 1.2vmin;

}


.room > .side.front {
  transform: translate3d(-50%, -50%, calc(var(--depth) * -0.5vmin)) rotateY(180deg);
  clip-path: none;
  background: #fff0;
  box-shadow: 0 0 3vmin 3vmin #383838 inset /*0 0 0vmin 3.25vmin #383838 inset*/;
}

.room > .side.left {
  transform: translate(-50%, -50%) rotateY(-90deg) translate3d(0, 0, calc(var(--width) * 0.5vmin));
  clip-path: none;
  background: #fff0;
  box-shadow: 0 0 0vmin 3.25vmin #383838 inset;
}

.room > .side.right {
  transform: translate(-50%, -50%) rotateY(90deg) translate3d(0, 0, calc(var(--width) * 0.5vmin));
  clip-path: none;
  background: #fff0;
  box-shadow: 0 0 0vmin 3.25vmin #383838 inset;
}

.room > .side.upper {
  transform: translate(-50%, -50%) rotateX(90deg) translate3d(0, 0, calc(var(--height) * 0.5vmin));
  clip-path: none;
  background: #fff0;
  box-shadow: 0 0 0vmin 3.25vmin #383838 inset;
}

.room > .side.lower {
  transform: translate(-50%, -50%) rotateX(-90deg) translate3d(0, 0, calc(var(--height) * 0.5vmin));
  clip-path: none;
  background: #fff0;
  box-shadow: 0 0 0vmin 3.25vmin #383838 inset;
}
/* lower lights off */
.room > .side.lower .line .side:nth-child(1):before {
  /*display: none;*/
}
/* lower lights on */
input#d-upper:checked ~ input#d-look:checked ~ .content .room > .side.lower .line .side:nth-child(1):before {
  /*display: block;*/
}
/* white lower lights off */
input#d-lower:checked ~ input#d-look:checked ~ .content .room > .side.upper .line .side:nth-child(1):before {
  /*display: none;*/
}


/*** Door Panel ***/
.room > .side:before {
  content: "";
  border: none;
  position: absolute;
  width: calc(27.25% + 2vmin);
  height: calc(27.25% + 2vmin);
  top: 35.5%;
  left: 35.5%;
  background: 
    radial-gradient( circle at 50.75% 1.65% , #777 0 0.35%, #fff0 0.75% 100%),
    radial-gradient( circle at 73.5% 1.65%, #777 0 0.35%, #fff0 0.75% 100%),
    radial-gradient( circle at 25.5% 1.65%, #777 0 0.35%, #fff0 0.75% 100%),
    radial-gradient( circle at 50.75% 98.35%, #777 0 0.35%, #fff0 0.75% 100%),
    radial-gradient( circle at 73.5% 98.35%, #777 0 0.35%, #fff0 0.75% 100%),
    radial-gradient( circle at 25.5% 98.35%, #777 0 0.35%, #fff0 0.75% 100%),
    radial-gradient( circle at 2% 49.5%, #777 0 0.35%, #fff0 0.75% 100%),
    radial-gradient( circle at 2% 74.5%, #777 0 0.35%, #fff0 0.75% 100%),
    radial-gradient( circle at 2% 27.1%, #777 0 0.35%, #fff0 0.75% 100%),
    radial-gradient( circle at 98% 49.5%, #777 0 0.35%, #fff0 0.75% 100%),
    radial-gradient( circle at 98% 74.5%, #777 0 0.35%, #fff0 0.75% 100%),
    radial-gradient( circle at 98% 27.1%, #777 0 0.35%, #fff0 0.75% 100%),
    radial-gradient( circle at 10% 50%, #777 0 0.5%, #fff0 0.75% 100%),
    radial-gradient( circle at 10% 53%, #777 0 0.5%, #fff0 0.75% 100%),
    radial-gradient( circle at 10% 47%, #777 0 0.5%, #fff0 0.75% 100%),
    radial-gradient( circle at 90% 50%, #777 0 0.5%, #fff0 0.75% 100%),
    radial-gradient( circle at 90% 53%, #777 0 0.5%, #fff0 0.75% 100%),
    radial-gradient( circle at 90% 47%, #777 0 0.5%, #fff0 0.75% 100%), 
    radial-gradient( circle at 50% 10%, #777 0 0.5%, #fff0 0.75% 100%),
    radial-gradient( circle at 53% 10%, #777 0 0.5%, #fff0 0.75% 100%),
    radial-gradient( circle at 47% 10%, #777 0 0.5%, #fff0 0.75% 100%), 
    radial-gradient( circle at 50% 90%, #777 0 0.5%, #fff0 0.75% 100%),
    radial-gradient( circle at 53% 90%, #777 0 0.5%, #fff0 0.75% 100%),
    radial-gradient( circle at 47% 90%, #777 0 0.5%, #fff0 0.75% 100%),
    linear-gradient(0deg, var(--hole) 0 1vmin, #fff0 0 calc(100% - 1vmin), var(--hole) 0 100%),
    linear-gradient(90deg, var(--hole) 0 1vmin, #fff0 0 calc(100% - 1vmin), var(--hole) 0 100%);
}






/*** exit ***/
.room > .side:nth-of-type(1):before {
  content: "";
  background: #fff;
  width: 20vmin;
  height: 20vmin;
  position: absolute;
  left: calc(50% - 10vmin);
  top: calc(50% - 10vmin);
  border: 3vmin solid #fff;
  box-sizing: border-box;
  border-color: #fff #efefef #dfdfdf #dedede;
  box-shadow: 0 0 0 1px #ccc inset, 0 0 20vmin 0 #fff, 0 0 5vmin -1vmin #fff;
  opacity: 0;
}









/*** LINES ***/
.line {
  --width: 3.25;
  --height: 93.5;
  --depth: 4;
  transform: translate3d(32.25vmin, 3.275vmin, 2vmin);
}

.line .side {
  clip-path: none;
  box-shadow: none;
  border: 1px solid var(--hole) !important;
  background: var(--hole);
  opacity: 1;
  filter: brightness(1.25);
}

.line .side:nth-child(1):before {
  --light: var(--blue-light);
  background: linear-gradient(0deg, var(--light) 0 10%, #fff0 0 45%, var(--light) 0 55%, #fff0 0 90%, var(--light) 0 100%, #fff0 0 30%);
  position: absolute;
  width: 40%;
  height: 80%;
  content: "";
  top: 10%;
  left: 20%;
  filter: drop-shadow(0px 0 5px var(--light));
}

.line + .line + .line .side:nth-child(1):before {
  background: linear-gradient(90deg, var(--light) 0 10%, #fff0 0 45%, var(--light) 0 55%, #fff0 0 90%, var(--light) 0 100%, #fff0 0 30%);
  width: 80%;
  height: 40%;
  top: 20%;
  left: 10%;
}

.line .side:nth-child(2) {
  background: #fff0;
  filter: none;
}


.line + .line + .line .side:nth-child(2) {
  background: #fff0;
}



.line .side:nth-child(2):before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: 
    repeating-linear-gradient(180deg, #fff0 0 7%, #888 7.25%, var(--hole) 8%, #fff0 0 14%, #888 14.25%, var(--hole) 15%, #fff0 0 22%, #888 22.25%, var(--hole) 23%, #fff0 0 35.33%);
  transform: translate3d(0px, 0px, -1.5vmin);
}

.line + .line + .line .side:nth-child(2):before {
  background: repeating-linear-gradient(90deg, #fff0 0 7%, #888 7.25%, var(--hole) 8%, #fff0 0 14%, #888 14.25%, var(--hole) 15%, #fff0 0 22%, #888 22.25%, var(--hole) 23%, #fff0 0 35.33%);
}


.line .side:nth-of-type(3), .line .side:nth-of-type(4),
.line .side:nth-of-type(5), .line .side:nth-of-type(6) {
  filter: brightness(1.5);
}



.line.vr {
  transform: translate3d(64.5vmin, 3.275vmin, 2vmin);
}
.line.vr .side:nth-child(1):before {
  left: 40%;
}

.line.ht {
  transform: translate3d(3.275vmin, 32.25vmin, 2vmin);
  --width: 93.5;
  --height: 3.25;
}

.line.hb {
  transform: translate3d(3.275vmin, 64.5vmin, 2vmin);
  --width: 93.5;
  --height: 3.25;
}
.line.hb .side:nth-child(1):before {
  top: 37% !important;
}









/*** LIGHT COLORS ***/
input#d-left:checked ~ input#d-look:checked ~ .content .cube .side .line .side:nth-child(1):before {
  --light: #be4c44;
  --light: var(--red-light);
}
input#d-right:checked ~ input#d-look:checked ~ .content .cube .side .line .side:nth-child(1):before {
  --light: #47a74b;
  --light: var(--green-light);
}
input#d-upper:checked ~ input#d-look:checked ~ .content .cube .side .line .side:nth-child(1):before {
  --light: #e1a461;
  --light: #6f9dd7;
  --light: var(--orange-light);
}
input#d-lower:checked ~ input#d-look:checked ~ .content .cube .side .line .side:nth-child(1):before {
  --light: #d9d9d9;
  --light: var(--white-light);
}








/*** MINI CUBES ***/

.mini {
  --width: 5;
  --height: 5;
  --depth: 4;
  transform: translate3d(63.675vmin, 31.5vmin, 1.95vmin);
}

.mini > .side {
  background: #484848 !important;
  clip-path: none;
  box-shadow: 0 0 2vmin 0 #fff2 inset;
  border: 1px solid #181818;
}

.mini > .side:nth-child(2) {
  border: 1.25vmin solid #505050;
  box-shadow: 0 0 0 1px #2228;
  background: 
    radial-gradient(circle at 15% 15%, #525252 0 4%, #fff0 8% 100%), 
    radial-gradient(circle at 15% 85%, #525252 0 4%, #fff0 8% 100%), 
    radial-gradient(circle at 85% 15%, #525252 0 4%, #fff0 8% 100%), 
    radial-gradient(circle at 85% 85%, #525252 0 4%, #fff0 8% 100%), 
    var(--gold) !important;
}

.mini.rt {
  transform: translate3d(31.35vmin, 31.5vmin, 1.95vmin);
}

.mini.lb {
  transform: translate3d(63.675vmin, 63.675vmin, 1.95vmin);
}

.mini.rb {
  transform: translate3d(31.35vmin, 63.675vmin, 1.95vmin);
}










/*** TUNNEL ***/

.tunnel {
  --width: 20;
  --height: 20;
  --depth: 30;
  transition: all 0.25s ease 0s;
  transform: translate3d(39.75vmin, 39.75vmin, 15vmin);
}

.tunnel .side { 
  --crack: #222;
  --luz: linear-gradient(0deg, #fff, #fff);
  --grid0: linear-gradient(180deg, #000, #6e6e6e);
  --grid1: linear-gradient(0deg, #000, #6e6e6e);
  --grid2: linear-gradient(90deg, #000000, #9f9f9f 40% 60%, #000000);
  --test: linear-gradient(0deg, var(--crack), var(--crack));
  --dig1: linear-gradient(45deg, #fff0 0 47%, var(--crack) 0 53.75%, #fff0 0 100%);
  --dig2: linear-gradient(-45deg, #fff0 0 47%, var(--crack) 0 53.75%, #fff0 0 100%);
  --dig3: linear-gradient(-74deg, #fff0 0 42%, var(--crack) 0 58%, #fff0 0 100%);
  --dig4: linear-gradient(74deg, #fff0 0 42%, var(--crack) 0 58%, #fff0 0 100%);
  background: 
    var(--grid2) 50% 10%, var(--grid0) 85% 14%,  var(--grid0) 15% 14%,
    var(--grid2) 50% 91%, var(--grid1) 85% 87%, var(--grid1) 15% 87%,
    var(--dig4) 21.5% 50%, var(--dig4) 72.2% 50%, 
    var(--dig3) 78.2% 50%, var(--dig3) 28% 50%, 
    var(--dig2) 4.91% 50%, var(--dig2) 59.25% 50%, 
    var(--dig1) 40.7% 50%, var(--dig1) 94.4% 50%, 
    var(--test) 50% 53%, var(--test) 32% 47%, var(--test) 68% 47%, var(--test) 15% 47%,
    var(--test) 85.25% 47%, var(--test) -3.5% 53%, var(--test) 103% 53%, var(--test) 75.5% 53%, 
    var(--test) 24.5% 53%,   
    linear-gradient(0deg, #FFF0 0 42%, #343434 0 42.75%, #232323 0 43.25%, #343434 0 44%, #232323 0 44.5%, #343434 0 45.25%, #232323 0 45.5%, #343434 0 55%, #232323 0 55.25%, #343434 0 56%, #232323 0% 56.5%, #343434 0 57.25%, #232323 0 57.75%, #343434 0 58.25%, #fff0 0 100%), 
    linear-gradient(90deg, #585858 0 15.5%, #fff0 0 84.5%, #585858 0 100%), 
    linear-gradient(0deg, #585858 0 10%, #fff0 0 37.5%, #585858 0 62%, #fff0 0 89.5%, #585858 0 100%),  
    repeating-conic-gradient(from 0deg at 45% 86%, #ffffff 0 25%, #232323 0 100%) 2% -1%;
  clip-path: none;
  box-shadow: 0 0 5vmin 2vmin #000000 inset;
  filter: none;
  border: 1px solid #0b0b0b;
  background-size: 70% 1%, 0.5% 28%, 0.5% 28%, 70% 1%, 0.5% 28%, 0.5% 28%, 3% 6.55%, 3% 6.55%, 3% 6.55%, 3% 6.55%, 10% 6.55%, 10% 6.55%, 10% 6.55%, 9.7% 6.55%, 8% 0.75%, 8% 0.75%, 8% 0.75%, 8% 0.75%, 7.5% 0.75%, 8% 0.75%, 8% 0.75%, 4% 0.75%, 4% 0.75%, 100% 100%, 100% 100%, 100% 100%, 4.5% 13%;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat;
}

.tunnel .side:nth-child(2) {
  opacity: 0;
}

.tunnel .side:nth-child(3), 
.tunnel .side:nth-child(4) {
  box-shadow: none;
  --grid0: linear-gradient(90deg, #000, #6e6e6e);
  --grid1: linear-gradient(-90deg, #000, #6e6e6e);
  --grid2: linear-gradient(0deg, #000000, #9f9f9f 40% 60%, #000000);
  background: 
    var(--grid2) 9.5% 50%, var(--grid1) 86.25% 16%, var(--grid0) 13.5% 84%, 
    var(--grid2) 90% 50%, var(--grid1) 86.25% 84%, var(--grid0) 13.5% 16%, 
    linear-gradient( 0deg, #585858 0 16.25%, #fff0 0 83.75%, #585858 0 100%), 
    linear-gradient( 90deg, #585858 0 10%, #fff0 0 37.5%, #585858 0 62%, #fff0 0 89.5%, #585858 0 100%), 
    repeating-conic-gradient(from 0deg at 16% 57.5%, #ffffff 0 25%, #232323 0 100%) 11% 5%;
  clip-path: none;
  background-size: 0.65% 67.5%, 28% 0.5%, 28% 0.5%, 0.65% 67%, 28% 0.5%, 28% 0.5%, 100% 100%, 100% 100%, 13% 4.4%;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat;
}

/** side metal **/
.tunnel .side:nth-child(3):before,
.tunnel .side:nth-child(4):before {
  content: "";
  position: absolute;
  height: 100%;
  width: 20%;
  background: 
    linear-gradient(-90deg, #fff0 0 55%, #979797 0% 75%, #b9b9b9 100%), 
    linear-gradient(0deg, #979797 0 15%, #565656 0 15.5%, #fff0 0 84%, #565656 0 84.5%, #979797 0 100%),
    linear-gradient(-90deg, #fff0 0 54%, #565656 0 55%, #979797 0 100%);
  border: 1px solid #565656;
  border-right: 0;
  box-sizing: border-box;
  animation: gear-close-right 2s linear 0s 1;
  border-radius: 2px;
  transform: translate3d(0vmin, 0vmin, -0.075vmin);
}

.tunnel .side:nth-child(3):before {
  transform: translate3d(0vmin, 0vmin, -0.075vmin) rotateY(180deg);
  left: 80%;
  animation: gear-close-left 2s linear 0s 1;
}

.tunnel .side:nth-child(5) {
  transform: translate(-50%, -50%) rotateX(270deg) rotateZ(0deg) translate3d(0, 0, calc(var(--height) * -0.5vmin));
}


/** lower metal ***/
.tunnel .side:nth-child(6):before {
  content: "";
  position: absolute;
  height: 15%;
  width: calc(100% - 0.2vmin);
  background: linear-gradient( 0deg, #a5a5a5 0% 75%, #b9b9b9 100%);
  border: 1px solid #565656;
  box-sizing: border-box;
  animation: gear-close-bot 2s linear 0s 1;
  border-radius: 1px;
  top: 80%;
  transform: translate3d(0vmin, 0vmin, -0.25vmin);
  left: 0.1vmin;
  border-bottom-width: 4px;
}

input#d-look:checked  ~ .content .room .side .tunnel .side:nth-child(6):before {
  top: 78.5%;
}










/*** NUMBERS ***/
.tunnel .side:nth-child(5):after, .tunnel .side:nth-child(6):after {
  content: "656 778 462";
  position: absolute;
  width: 2.2vmin;
  height: 0.4vmin;
  background: 
    linear-gradient(45deg, #fff0 0 51%, #f4f4f4 0 57%, #fff0 0 100%) 7% 0%, 
    linear-gradient(-45deg, #fff0 0 48%, #a3a3a3 0 53%, #fff0 0 100%) 92% 0, 
    radial-gradient(circle at 90% 50%, #555 0 4%, #fff0 5% 100%), 
    radial-gradient(circle at 10% 50%, #777 0 4%, #fff0 5% 100%), 
    linear-gradient(45deg, #fff, #999);
  background-size: 8% 100%, 8% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-repeat: no-repeat;
  left: calc(50% - 1.1vmin);
  top: 55%;
  box-shadow: 0vmin 0vmin 0 0.025vmin #3338;
  font-size: 0.2vmin;
  word-spacing: 0.1vmin;
  text-align: center;
  transform: rotateX(180deg);
  line-height: 0.65vmin;
  text-shadow: -0.01vmin 0 0 #fff;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tunnel .side:nth-child(5):after {
  transform: rotateX(180deg) rotateZ(180deg) translateZ(-19.95vmin) translateY(-3.35vmin);
}





/*** OPEN GEAR ***/

input#d-front:checked ~ .content > .cube > .side.front > .tunnel .side:nth-child(3):before,
input#d-left:checked ~ .content > .cube > .side.left > .tunnel .side:nth-child(3):before,
input#d-right:checked ~ .content > .cube > .side.right > .tunnel .side:nth-child(3):before,
input#d-upper:checked ~ .content > .cube > .side.upper > .tunnel .side:nth-child(3):before,
input#d-lower:checked ~ .content > .cube > .side.lower > .tunnel .side:nth-child(3):before {
  transform: translate3d(5vmin, 0vmin, -0.075vmin) rotateY(180deg);
  animation: gear-open-left 5s ease 0s 1;
}

input#d-front:checked ~ .content > .cube > .side.front > .tunnel .side:nth-child(4):before,
input#d-left:checked ~ .content > .cube > .side.left > .tunnel .side:nth-child(4):before,
input#d-right:checked ~ .content > .cube > .side.right > .tunnel .side:nth-child(4):before,
input#d-upper:checked ~ .content > .cube > .side.upper > .tunnel .side:nth-child(4):before,
input#d-lower:checked ~ .content > .cube > .side.lower > .tunnel .side:nth-child(4):before {
  transform: translate3d(-5vmin, 0vmin, -0.075vmin);
  animation: gear-open-right 5s ease 0s 1;
}

input#d-front:checked ~ .content > .cube > .side.front > .tunnel .side:nth-child(6):before,
input#d-left:checked ~ .content > .cube > .side.left > .tunnel .side:nth-child(6):before,
input#d-right:checked ~ .content > .cube > .side.right > .tunnel .side:nth-child(6):before,
input#d-upper:checked ~ .content > .cube > .side.upper > .tunnel .side:nth-child(6):before,
input#d-lower:checked ~ .content > .cube > .side.lower > .tunnel .side:nth-child(6):before {
  transform: translate3d(0vmin, 5vmin, -0.25vmin);
  animation: gear-open-bot 5s ease 0s 1;
}



@keyframes gear-open-right {
  0%, 20% { transform: translate3d(0vmin, 0vmin, -0.075vmin); }
  40%, 100% { transform: translate3d(-5vmin, 0vmin, -0.075vmin); }
}

@keyframes gear-close-right {
  100%, 80% { transform: translate3d(0vmin, 0vmin, -0.075vmin); }
  60%, 0% { transform: translate3d(-5vmin, 0vmin, -0.075vmin); }
}

@keyframes gear-open-left {
  0%, 20% { transform: translate3d(0vmin, 0vmin, -0.075vmin) rotateY(180deg); }
  40%, 100% { transform: translate3d(5vmin, 0vmin, -0.075vmin) rotateY(180deg); }
}

@keyframes gear-close-left {
  100%, 80% { transform: translate3d(0vmin, 0vmin, -0.075vmin) rotateY(180deg); }
  60%, 0% { transform: translate3d(5vmin, 0vmin, -0.075vmin) rotateY(180deg); }
}

@keyframes gear-open-bot {
  0%, 20% { transform: translate3d(0vmin, 0vmin, -0.25vmin); }
  40%, 100% { transform: translate3d(0vmin, 5vmin, -0.25vmin); }
}

@keyframes gear-close-bot {
  100%, 80% { transform: translate3d(0vmin, 0vmin, -0.25vmin); }
  60%, 0% { transform: translate3d(0vmin, 5vmin, -0.25vmin); }
}








/*** CARRIL ***/
.tunnel .side:nth-child(3):after, .tunnel .side:nth-child(4):after {
  content: "";
  width: 100%;
  height: 100%;
  background: 
    conic-gradient(from 0deg at 50% 50%, #222 0 25%, #fff0 0 100%) -2% 94%,  
    conic-gradient(from 0deg at 50% 50%, #ddd 0 25%, #fff0 0 100%) -27% 97.75%,
    conic-gradient(from 0deg at 50% 50%, #222 0 25%, #fff0 0 100%) -2% 8%,
    conic-gradient(from 0deg at 50% 50%, #ddd 0 25%, #fff0 0 100%) -27% 7.5%,
    linear-gradient(90deg, #FFF0 0 43%, #444 0 45%, #343434 0 55%, #444 0 57%, #fff0 0 100%), 
    linear-gradient(180deg, #fff0 0 6%, #888 0 6.5%, #363636 0 11%, #888 0 11.5%, #fff0 0 89.5%, #888 0 90%, #363636 0 94.35%, #888 0 95%, #fff0 0 100%);
  position: absolute;
  top: 0%;
  z-index: -1;
  box-sizing: border-box;
  box-shadow: 0 0 5vmin 2vmin #000000 inset;
  background-size: 4vmin 0.65vmin, 11vmin 1.5vmin, 4vmin 0.65vmin, 11vmin 1.5vmin, 100% 100%, 100% 100%;
  background-repeat: no-repeat;
}

.tunnel .side:nth-child(3):after {
  background: 
    conic-gradient(from 0deg at 50% 50%, #222 0 25%, #fff0 0 100%) 94% 94%,  
    conic-gradient(from 0deg at 50% 50%, #ddd 0 25%, #fff0 0 100%) 97.75% 97.75%,
    conic-gradient(from 0deg at 50% 50%, #222 0 25%, #fff0 0 100%) 94% 8%, 
    conic-gradient(from 0deg at 50% 50%, #ddd 0 25%, #fff0 0 100%) 97% 7.5%, 
    linear-gradient(90deg, #FFF0 0 43%, #444 0 45%, #343434 0 55%, #444 0 57%, #fff0 0 100%), 
    linear-gradient(180deg, #fff0 0 6%, #888 0 6.5%, #363636 0 11%, #888 0 11.5%, #fff0 0 89.5%, #888 0 90%, #363636 0 94.35%, #888 0 95%, #fff0 0 100%);
  background-size: 4vmin 0.65vmin, 11vmin 1.5vmin, 4vmin 0.65vmin, 11vmin 1.5vmin, 100% 100%, 100% 100%;
  background-repeat: no-repeat;
}



.tunnel .side:nth-child(3):after, .tunnel .side:nth-child(4):after {
  --dig3: linear-gradient(-15deg, #fff0 0 42%, var(--crack) 0 58%, #fff0 0 100%);
  --dig4: linear-gradient(15deg, #fff0 0 42%, var(--crack) 0 58%, #fff0 0 100%);
  background: 
    var(--dig4) 50% 72.2%, var(--dig4) 50% 21.5%, 
    var(--dig3) 50% 28%, var(--dig3) 50% 78.2%, 
    var(--dig2) 50% 59.25%, var(--dig2) 50% 4.91%, 
    var(--dig1) 50% 40.7%, var(--dig1) 50% 94.4%, 
    var(--test) 53% 24.5%, var(--test) 53% 75.5%, var(--test) 53% 103%, var(--test) 53% -3.5%, 
    var(--test) 47% 85.25%, var(--test) 47% 15%, var(--test) 47% 32%, var(--test) 47% 68%, var(--test) 53% 50%, 
    conic-gradient(from 0deg at 50% 50%, #222 0 25%, #fff0 0 100%) 94% 94%, 
    conic-gradient(from 0deg at 50% 50%, #ddd 0 25%, #fff0 0 100%) 95.75% 97.75%, 
    conic-gradient(from 0deg at 50% 50%, #222 0 25%, #fff0 0 100%) 94% 8%, 
    conic-gradient(from 0deg at 50% 50%, #ddd 0 25%, #fff0 0 100%) 95% 7.5%,
    linear-gradient(90deg, #FFF0 0 42%, #343434 0 42.75%, #232323 0 43.25%, #343434 0 44%, #232323 0 44.5%, #343434 0 45.25%, #232323 0 45.5%, #343434 0 55%, #232323 0 55.25%, #343434 0 56%, #232323 0% 56.5%, #343434 0 57.25%, #232323 0 57.75%, #343434 0 58.25%, #fff0 0 100%),
    linear-gradient(180deg, #fff0 0 6%, #888 0 6.5%, #363636 0 11%, #888 0 11.5%, #fff0 0 89.5%, #888 0 90%, #363636 0 94.35%, #888 0 95%, #fff0 0 100%);
  background-size: 6.55% 3%, 6.55% 3%, 6.55% 3%, 6.55% 3%, 6.55% 10%, 6.55% 10%, 6.55% 10%, 6.55% 9.7%, 0.75% 4%, 0.75% 4%, 0.75% 8%, 0.75% 8%, 0.75% 8%, 0.75% 8%, 0.75% 8%, 0.75% 8%, 0.75% 8%, 4vmin 0.65vmin, 11vmin 1.5vmin, 4vmin 0.65vmin, 11vmin 1.5vmin, 100% 100%, 100% 100%;
  background-repeat: no-repeat;
}


.tunnel .side:nth-child(4):after {
  --dig1: linear-gradient(-45deg, #fff0 0 47%, var(--crack) 0 53.75%, #fff0 0 100%);
  --dig2: linear-gradient(45deg, #fff0 0 47%, var(--crack) 0 53.75%, #fff0 0 100%);
  --dig3: linear-gradient(15deg, #fff0 0 42%, var(--crack) 0 58%, #fff0 0 100%);
  --dig4: linear-gradient(-15deg, #fff0 0 42%, var(--crack) 0 58%, #fff0 0 100%);
  background: 
    var(--dig4) 50% 72.2%, var(--dig4) 50% 21.5%, 
    var(--dig3) 50% 28%, var(--dig3) 50% 78.2%, 
    var(--dig2) 50% 59.25%, var(--dig2) 50% 4.91%, 
    var(--dig1) 50% 40.7%, var(--dig1) 50% 94.4%, 
    var(--test) 47% 24.5%, var(--test) 47% 75.5%, 
    var(--test) 47% 103%, var(--test) 47% -3.5%, 
    var(--test) 53% 85.25%, var(--test) 53% 15%, 
    var(--test) 53% 32%, var(--test) 53% 68%, 
    var(--test) 47% 50%, 
    conic-gradient(from 0deg at 50% 50%, #222 0 25%, #fff0 0 100%) -2% 94%,  
    conic-gradient(from 0deg at 50% 50%, #ddd 0 25%, #fff0 0 100%) -27% 97.75%,
    conic-gradient(from 0deg at 50% 50%, #222 0 25%, #fff0 0 100%) -2% 8%,
    conic-gradient(from 0deg at 50% 50%, #ddd 0 25%, #fff0 0 100%) -27% 7.5%,
    linear-gradient(90deg, #FFF0 0 42%, #343434 0 42.75%, #232323 0 43.25%, #343434 0 44%, #232323 0 44.5%, #343434 0 45.25%, #232323 0 45.5%, #343434 0 55%, #232323 0 55.25%, #343434 0 56%, #232323 0% 56.5%, #343434 0 57.25%, #232323 0 57.75%, #343434 0 58.25%, #fff0 0 100%),
    linear-gradient(180deg, #fff0 0 6%, #888 0 6.5%, #363636 0 11%, #888 0 11.5%, #fff0 0 89.5%, #888 0 90%, #363636 0 94.35%, #888 0 95%, #fff0 0 100%);
  background-size: 6.55% 3%, 6.55% 3%, 6.55% 3%, 6.55% 3%, 6.55% 10%, 6.55% 10%, 6.55% 10%, 6.55% 9.7%, 0.75% 4%, 0.75% 4%, 0.75% 8%, 0.75% 8%, 0.75% 8%, 0.75% 8%, 0.75% 8%, 0.75% 8%, 0.75% 8%, 4vmin 0.65vmin, 11vmin 1.5vmin, 4vmin 0.65vmin, 11vmin 1.5vmin, 100% 100%, 100% 100%;
  background-repeat: no-repeat;
}










/*** DOOR ***/
.door {
  --width: 19.6;
  --height: 19.6;
  --depth: 1.5;
  transform: translate3d(39.95vmin, 39.95vmin, 0.75vmin);
  animation: door-close 2s ease 0s 1;
}

.door:before {
  background: linear-gradient(30deg, #fff0 0%, #0002 25%, #0001 50%, #fff6 100%);
  position: absolute;
  width: 100%;
  height: 100%;
  content: "";
  transform: translateZ(-8px);
}

.door .side {
  background: linear-gradient(45deg, #666, #767676);
  box-shadow: 0 0 0 1vmin var(--gold) inset;
  filter: brightness(1.2);
  border-color: #a18c52;
  clip-path: none;
  opacity: 1;
}

.door .side:nth-child(1) {
  background: 
    radial-gradient(ellipse at 39% 39%, #787878 0 0.5%, #fff0 1% 100%), 
    radial-gradient(ellipse at 61% 39%, #787878 0 0.5%, #fff0 1% 100%),
    radial-gradient(ellipse at 39% 61%, #787878 0 0.5%, #fff0 1% 100%),
    radial-gradient(ellipse at 61% 61%, #787878 0 0.5%, #fff0 1% 100%), 
    conic-gradient(from 0deg at calc(50% - 5vmin) calc(50% + 5vmin), #bdbcbc 0 25% , #fff0 0 100%) 50% 50%, 
    conic-gradient(from 0deg at calc(50% - 5.1vmin) calc(50% + 5.1vmin), #5554 0 25% , #fff0 0 100%) 50% 50%, 
    linear-gradient(45deg, #dedede, #9c9c9c 45% 55%, #ccc, #dedede);
  box-shadow: none;
  border: 1px solid #0008;
  border-radius: 2px;
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 5vmin 5vmin, 5.2vmin 5.2vmin, 100% 100%;
  background-repeat: no-repeat;
  filter: none;
}

.door .side:nth-child(2) {
  background: 
    linear-gradient(0deg, #fff0 0 46%, var(--gold) 0 54%, #fff0 0 100%), 
    linear-gradient(-90deg, #fff0 0 46%, #837242 0 47%, var(--gold) 0 54%, #fff0 0 93.5%, #837242 0% 95%, #fff0 0 100%), 
    linear-gradient(0deg, #fff0 0 46%, #837242 0 47%, var(--gold) 0 54%, #fff0 0 93.5%, #837242 0% 95%, #fff0 0 100%), 
    linear-gradient(135deg, #919191, #bcbcbc 40%, #919191);
}

.door .side:nth-child(1n + 3) {
  box-shadow: 0 0 1vmin -0.5vmin #0008 inset;
  border: 1px solid #646464;
  filter: brightness(1.5);
}





/*** OPEN DOOR ***/

input#d-front:checked ~ .content > .cube > .side.front > .door,
input#d-left:checked ~ .content > .cube > .side.left > .door,
input#d-right:checked ~ .content > .cube > .side.right > .door,
input#d-upper:checked ~ .content > .cube > .side.upper > .door,
input#d-lower:checked ~ .content > .cube > .side.lower > .door {
  transform: translate3d(39.95vmin, 57.95vmin, -4vmin);
  animation: door-open 5s ease 0s 1;
}
/** front **/
input#d-front:checked ~ input#d-look:checked ~ .content > .cube.room {
  transform: translateZ(10vmin) rotateX(0.01deg) rotateY(180deg);
  transition: all 0s ease 0s !important;
}

/** left **/
input#d-left:checked ~ input#d-look:checked ~ .content > .cube.room {
  transform: translateZ(10vmin) rotateX(0.01deg) rotateY(90.01deg);
  transition: all 0s ease 0s !important;
  --color: #ad0c00;
  --shine: #c04e45;
  --color: var(--red-wall);
  --shine: var(--red-shine);
}

/** right **/
input#d-right:checked ~ input#d-look:checked ~ .content > .cube.room {
  transform: translateZ(10vmin) rotateX(0.01deg) rotateY(-90.01deg);
  transition: all 0s ease 0s !important;
  --color: #048d0a;
  --shine: #48a84d;
  --color: var(--green-wall);
  --shine: var(--green-shine);
}

/** upper **/
input#d-upper:checked ~ input#d-look:checked ~ .content > .cube.room {
  transform: translateZ(10vmin) rotateX(-90.01deg) rotateY(0.01deg);
  transition: all 0s ease 0s !important;
  --color: #df882a;
  --shine: #e3a664;
  --color: #3b7ccc;
  --shine: #6f9dd5;
  --color: var(--orange-wall);
  --shine: var(--orange-shine);
}

/** lower **/
input#d-lower:checked ~ input#d-look:checked ~ .content > .cube.room {
  transform: translateZ(10vmin) rotateX(90.01deg) rotateY(0.01deg);
  transition: all 0s ease 0s !important;
  --color: #dbdbdb;
  --shine: #efefef;
  --color: var(--white-wall);
  --shine: var(--white-shine);
}







/** open/close doors **/

@keyframes door-open {
  0%, 20% { transform: translate3d(39.95vmin, 39.95vmin, 0.75vmin); }
  40% { transform: translate3d(39.95vmin, 39.95vmin, -4vmin); }
  100% { transform: translate3d(39.95vmin, 57.95vmin, -4vmin); }
}

@keyframes door-close {
  0%,20% { transform: translate3d(39.95vmin, 55.95vmin, -4vmin); }  
  60% { transform: translate3d(39.95vmin, 39.95vmin, -4vmin); }
  100% { transform: translate3d(39.95vmin, 39.95vmin, 0.75vmin); }
}









/*** DOOR DRAW ***/

.cube.door .side:nth-of-type(1):before, 
.cube.door .side:nth-of-type(1):after,
.cube.door .side:nth-of-type(2):before, 
.cube.door .side:nth-of-type(2):after {
  content: "";
  background: 
    conic-gradient(from 0deg at 68% 32%, #9C9C9C80 0 25%, #fff0 0 100% ), 
    conic-gradient(from 0deg at 66% 33%, #c6c6c640 0 25%, #fff0 0 100% ), 
    conic-gradient(from 0deg at 34% 66%, #9c9c9c80 0 25%, #fff0 0 100% ), 
    conic-gradient(from 0deg at 31% 68%, #c6c6c640 0 25%, #9c9c9c80 0 100% ), 
    #fff0;
  width: 38.5%;
  height: 38.5%;
  position: absolute;
  top: 7%;
  left: 7%;
}

.cube.door .side:nth-of-type(1):after,
.cube.door .side:nth-of-type(2):after {
  top: 7%;
  left: 55%;
}

.cube.door .side:nth-of-type(1):before,
.cube.door .side:nth-of-type(1):after {
  transform: translateZ(-1.525vmin);
  top: 55%;
  filter: brightness(1.2);
}

.cube.door .side:nth-of-type(1):before {
  transform: translateZ(-1.525vmin) rotate(90deg);
}



.side.left .cube.door .side:nth-of-type(1):before {
  transform: translateZ(-1.525vmin) rotate(0deg);
}
.side.left .cube.door .side:nth-of-type(1):after {
  transform: translateZ(-1.525vmin) rotate(270deg);
}
.side.left .cube.door .side:nth-of-type(2):before {
  transform: translateZ(-1.525vmin) rotate(180deg);
}
.side.left .cube.door .side:nth-of-type(2):after {
  transform: translateZ(-1.525vmin) rotate(90deg);
}






/*** CYLINDER ***/
.cylinder {
  --height: 1.5;
  --width: 1.5;
  --depth: 0.5;
  height: calc(var(--height) * 1vmin);
  width: calc(var(--width) * 1vmin);
  position: absolute;
  bottom: 0;
  transform: translate3d(9.015vmin, -9.015vmin, -1.1vmin);
}
.face {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  width: 100%;
}
.face:nth-of-type(1) {
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
  transform: translate3d( -50%, -50%, calc(var(--depth) * 0.5vmin) );
  background: #888;
}
.face:nth-of-type(2) {
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
  transform: translate3d( -50%, -50%, calc(var(--depth) * -0.5vmin) ) rotateY(180deg);
  background: #888;
}
.face:nth-of-type(3) {
  width: calc(var(--depth) * 1vmin);
  height: calc(calc(calc(var(--width) * 41.17) / 100) * 1vmin);
  transform: translate(-50%, -50%) rotateY(90deg) translate3d( 0, 0, calc(var(--width) * 0.5vmin)  );
  background: #777;
}
.face:nth-of-type(4) {
  width: calc(var(--depth) * 1vmin);
  height: calc(calc(calc(var(--width) * 41.17) / 100) * 1vmin);
  transform: translate(-50%, -50%) rotateY(-90deg) translate3d( 0, 0, calc(var(--width) * 0.5vmin)  );
  background: #777;
}
.face:nth-of-type(5) {
  height: calc(var(--depth) * 1vmin);
  width: calc(calc(calc(var(--width) * 41.17) / 100) * 1vmin);
  transform: translate(-50%, -50%) rotateX(90deg) translate3d( 0, 0, calc(var(--height) * 0.5vmin)  );
  background: #777;
}
.face:nth-of-type(6) {
  height: calc(var(--depth) * 1vmin);
  width: calc(calc(calc(var(--width) * 41.17) / 100) * 1vmin);
  transform: translate(-50%, -50%) rotateX(-90deg) translate3d( 0, 0, calc(var(--height) * 0.5vmin)  );
  background: #777;
}
.face:nth-of-type(7) {
  height: calc(var(--depth) * 1vmin);
  width: calc(calc(calc(var(--width) * 41.17) / 100) * 1vmin);
  transform: translate(-50%, -50%) rotateX(-90deg) rotateY(45deg) translate3d( 0, 0, calc(var(--height) * 0.5vmin) );
  background: #666;
}
.face:nth-of-type(8) {
  height: calc(var(--depth) * 1vmin);
  width: calc(calc(calc(var(--width) * 41.17) / 100) * 1vmin);
  transform: translate(-50%, -50%) rotateX(-90deg) rotateY(-45deg) translate3d( 0, 0, calc(var(--height) * 0.5vmin) );
  background: #666;
}
.face:nth-of-type(9) {
  height: calc(var(--depth) * 1vmin);
  width: calc(calc(calc(var(--width) * 41.17) / 100) * 1vmin);
  transform: translate(-50%, -50%) rotateX(-90deg) rotateY(135deg) translate3d( 0, 0, calc(var(--height) * 0.5vmin) );
  background: #666;
}
.face:nth-of-type(10) {
  height: calc(var(--depth) * 1vmin);
  width: calc(calc(calc(var(--width) * 41.17) / 100) * 1vmin);
  transform: translate(-50%, -50%) rotateX(-90deg) rotateY(-135deg) translate3d( 0, 0, calc(var(--height) * 0.5vmin) );
  background: #666;
}






/*** KNOB ***/
.door .cylinder + .cylinder {
  transform: translate3d(9.015vmin, -9.015vmin, -2vmin);
}

.door .cylinder + .cylinder + .cylinder {
  --height: 0.75;
  --width: 0.75;
  --depth: 2;
  transform: translate3d(9.35vmin, -9.35vmin, -1.5vmin);
}

.door .cylinder + .cylinder + .cylinder + .cylinder {
  transform: translate3d(9.5vmin, -9.5vmin, -1.95vmin) rotateX(90deg);
  --depth: 3;
  --width: 0.5;
  --height: 0.5;
}

.door .cylinder + .cylinder + .cylinder + .cylinder  + .cylinder {
  transform: translate3d(9.6vmin, -9.6vmin, -2.01vmin) rotateX(90deg);
  --depth: 9;
  --width: 0.25;
  --height: 0.25;
}

.door .cylinder + .cylinder + .cylinder .face:nth-of-type(2) {
  background: radial-gradient(#888 0 40%, #fff0 0 100%), #676767;
}





/*** OPEN KNOB ***/

input#d-front:checked ~ .content > .cube > .side.front > .door > .cylinder.knob1,
input#d-left:checked ~ .content > .cube > .side.left > .door > .cylinder.knob1,
input#d-right:checked ~ .content > .cube > .side.right > .door > .cylinder.knob1,
input#d-upper:checked ~ .content > .cube > .side.upper > .door > .cylinder.knob1,
input#d-lower:checked ~ .content > .cube > .side.lower > .door > .cylinder.knob1 {
  animation: door-knob 5s ease 0s 1;
}
@keyframes door-knob {
  /*0% { transform: translate3d(9.5vmin, -9.5vmin, -2.1vmin) rotateX(90deg) rotateY(0deg) }*/
  20%, 100% { transform: translate3d(9.65vmin, -9.65vmin, -2.1vmin) rotateX(90deg) rotateY(360deg) }
}



input#d-front:checked ~ .content > .cube > .side.front > .door > .cylinder.knob2,
input#d-left:checked ~ .content > .cube > .side.left > .door > .cylinder.knob2,
input#d-right:checked ~ .content > .cube > .side.right > .door > .cylinder.knob2,
input#d-upper:checked ~ .content > .cube > .side.upper > .door > .cylinder.knob2,
input#d-lower:checked ~ .content > .cube > .side.lower > .door > .cylinder.knob2 {
  animation: door-knob-bar 5s ease 0s 1;
}
@keyframes door-knob-bar {
  /*0% { translate3d(9.6vmin, -9.6vmin, -2.1vmin) rotateX(90deg) rotateY(0deg) }*/
  20%, 100% { transform: translate3d(9.65vmin, -9.65vmin, -2.01vmin) rotateX(90deg) rotateY(360deg) }
}





















/*** PANEL DRAWINGS ***/
.drawing {
  --c-lite: #282828cc;
  --c-dark: #282828;
  border: none;
  position: absolute;
  width: 27.25%;
  height: 27.25%;
  top: 36.5%;
  left: 4.1%;
  transform: translateZ(-1px);
}











/*** BUTTONS ***/

input[type="radio"],
input[type="checkbox"] {
  display: none;
}


label {
  background: #ffffffa6;
  width: 5vmin;
  bottom: 6vmin;
  height: 5vmin;
  position: absolute;
  cursor: pointer;
  z-index: 1;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  text-transform: uppercase;
  font-size: 0.95vmin;
  text-align: center;
  line-height: 5vmin;
  font-weight: bold;
  opacity: 0.75;
}

input:checked + label,
label:hover {
  opacity: 1;
}


label[for=d-front]:hover, label[for=d-left]:hover, label[for=d-right]:hover, label[for=d-upper]:hover, label[for=d-lower]:hover {
  background: #fffc;
}


input[name=doors]:checked + label {
  background: 
    linear-gradient(0deg, #c1a862 0 10%, #fff0 0 32%, #c1a862 0 68%, #fff0 0 90%, #c1a862 0 100%), 
    linear-gradient(90deg, #c1a862 0 10%, #fff0 0 37.5%, #c1a862 0 62.5%, #fff0 0 90%, #c1a862 0 100%),
    #fffb;
}





label[for=d-none] {
  left: calc(50% - 13vmin);
  background: #bf3f36;
  color: #fff;
}
label[for=d-front] {
  left: calc(50% - 2vmin);
}
label[for=d-left] {
  left: calc(50% - 7.5vmin);
}
label[for=d-right] {
  left: calc(50% + 3.5vmin);
}
label[for=d-upper] {
  left: calc(50% - 2vmin);
  bottom: 11.5vmin;
}
label[for=d-lower] {
  left: calc(50% - 2vmin);
  bottom: 0.5vmin;
}
label[for=d-look] {
  left: calc(50% + 9vmin);
  color: #fff;
  background: #00000080;
  line-height: 1vmin;
}




label[for=d-none]:before {
  content: "CLOSE";
}

input#d-none:checked + label[for=d-none]:before {
  content: "OPEN";
}

label[for=d-none] {
  line-height: 3vmin;
}

label[for=d-none], 
input#d-none:checked + label[for=d-none], 
input#d-none:checked + label[for=d-none]:hover{
  background: #739f40;
  cursor: default;
}

input#d-none + label[for=d-none]:hover {
  background: #bf3f36;
  cursor: pointer;
}

input#d-none + label[for=d-none]:after,
input#d-none:checked + label[for=d-none]:after,
input#d-none:checked + label[for=d-none]:hover:after {
  content: "";
  font-size: 2.25vmin;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: 
    radial-gradient(#fff 0 55%, #739f40 65% 85%, #fff0 95% 100%),        
    linear-gradient(#fff0 0 60%, #fff 0 68%, #fff0 0 100%);
  background-size: 25% 25%,  75% 100%;
  background-repeat: no-repeat, no-repeat;
  background-position: 75% 70%, center top;
  transition: all 0.25s ease 0s;
}

input#d-none + label[for=d-none]:hover:after {
  transition: all 0.25s ease 0s;
  background: 
    radial-gradient(#fff 0 55%, #bf3f36 65% 85%, #fff0 95% 100%),        
    linear-gradient(#fff0 0 60%, #fff 0 68%, #fff0 0 100%);
  background-repeat: no-repeat, no-repeat;
  background-size: 25% 25%,  75% 100%;
  background-position: 25% 70%, center top;
}

























/*** BUTTONS COLORS ***/

input#d-right:checked ~ input#d-look + label[for=d-look],
input#d-right:checked ~ input#d-look:checked ~ input#d-number + label[for=d-number] {
  background-color: #00b107dd;
}
input#d-left:checked ~ input#d-look + label[for=d-look],
input#d-left:checked ~ input#d-look:checked ~ input#d-number + label[for=d-number] {
  background-color: #ff1100dd;
}
input#d-upper:checked ~ input#d-look + label[for=d-look],
input#d-upper:checked ~ input#d-look:checked ~ input#d-number + label[for=d-number] {
  background-color: #ff8300dd;
}
input#d-lower:checked ~ input#d-look + label[for=d-look],
input#d-lower:checked ~ input#d-look:checked ~ input#d-number + label[for=d-number] {
  background-color: #ffffffdd;
}
input#d-front:checked ~ input#d-look + label[for=d-look],
input#d-front:checked ~ input#d-look:checked ~ input#d-number + label[for=d-number] {
  background-color: #607d8b;
}




input#d-right:checked ~ input#d-look:checked ~ label[for=d-enter]{
  border-color: #47a74b !important;
  box-shadow: 0 0 0.5vmin 0.15vmin #47a64b inset, 0 0 0.225vmin 0.015vmin #0008 !important;
}
input#d-right:checked ~ input#d-look:checked ~ label[for=d-enter]:before {
  color: #47a74b !important;
}

input#d-left:checked ~ input#d-look:checked ~ label[for=d-enter]{
  border-color: #bd4c44 !important;
  box-shadow: 0 0 0.5vmin 0.15vmin #bd4c44 inset, 0 0 0.225vmin 0.015vmin #0008 !important;
}
input#d-left:checked ~ input#d-look:checked ~ label[for=d-enter]:before {
  color: #be4c44 !important;
}

input#d-upper:checked ~ input#d-look:checked ~ label[for=d-enter]{
  border-color: #ffab2f !important;
  box-shadow: 0 0 0.5vmin 0.15vmin #f19000 inset, 0 0 0.225vmin 0.015vmin #0008 !important;
}
input#d-upper:checked ~ input#d-look:checked ~ label[for=d-enter]:before {
  color: #ff9800 !important;
}

input#d-lower:checked ~ input#d-look:checked ~ label[for=d-enter]{
  border-color: #dedede !important;
  box-shadow: 0 0 0.5vmin 0.15vmin #dedede inset, 0 0 0.225vmin 0.015vmin #0008 !important;
}
input#d-lower:checked ~ input#d-look:checked ~ label[for=d-enter]:before {
  color: #dedede !important;
}

input#d-front:checked ~ input#d-look:checked ~ label[for=d-enter]{
  border-color: #607D8B !important;
  box-shadow: 0 0 0.5vmin 0.15vmin #607D8B inset, 0 0 0.225vmin 0.015vmin #0008 !important;
}
input#d-front:checked ~ input#d-look:checked ~ label[for=d-enter]:before {
  color: #607D8B !important;
}

input#d-lower:checked ~ input#d-look:checked ~ label[for=d-enter]:hover {
  filter: invert(1);
}

input#d-lower:checked ~ input#d-look:checked ~ label[for=d-enter]:hover span:before,
input#d-lower:checked ~ input#d-look:checked ~ label[for=d-enter]:hover span:after {
  filter: invert(0);
}






/* BUTTON LOOK */
label[for=d-look]:before {
  content: "PICK A DOOR";
  top: 1.25vmin;
  position: absolute;
  width: 100%;
  left: 0;
  line-height: 1.25vmin;
}

label[for=d-look]:after, 
input#d-look:checked + label[for=d-look]:hover:after {
  content: "";
  top: 26%;
  left: 25%;
  width: 38%;
  height: 38%;
  position: absolute;
  border: 2px solid #000;
  transition: all 0.25s ease 0s;
  background: #dddddd;
}

label[for=d-look]:hover:after, 
input#d-look:checked + label[for=d-look]:after  {
  transition: all 0.15s ease 0s;
  width: 22%;
  height: 22%;
  left: 34%;
  top: 35%;
}

input#d-none ~ input[name=doors]:checked ~ label[for=d-look],
input#d-look:checked + label[for=d-look]:hover {
  opacity: 0.85;
  background: linear-gradient(45deg, #888b, #888b, #fff, #999c, #999c);
  background-size: 200% 200%;
  background-position: 100% 50%;
  transition: all 0.4s ease 0s;
}
input#d-look + label[for=d-look]:hover {
  opacity: 1;
}

input#d-none ~ input[name=doors]:checked ~ input#d-look + label[for=d-look]:before {
  content: "";
  background: linear-gradient(-45deg, #fff0 calc(50% - 1px), black 0 calc(50% + 1px), #fff0 0 calc(50% + 1px)), linear-gradient(45deg, #fff0 calc(50% - 1px), black 0 calc(50% + 1px), #fff0 0 calc(50% + 1px));
  background-size: 100% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-position: 25% 75%;
  width: 70%;
  height: 70%;
  border-radius: 1px;
  left: 15%;
  position: absolute;
  top: 15%;
  transition: all 0.5s ease 0s;
  border: 2px solid #000;
  box-sizing: border-box;
  filter: drop-shadow(0px 0px 2px #fff);
}


input#d-none ~ input[name=doors]:checked ~ label[for=d-look]:hover,
input#d-look:checked + label[for=d-look] {
  opacity: 0.9;
  background-position: 0% 50%;
  transition: all 0.4s ease 0s;
}




label[for=d-look]:after {
  opacity: 0;
}

input[name="doors"] ~ input[name="doors"]:checked ~ label[for=d-look]:after {
  opacity: 1;
}






/*pick door / look inside / enter room*/
input#d-none:checked ~ label[for=d-look],
input#d-none:checked ~ label[for=d-number],
input#d-none:checked ~ label[for=d-enter],
label[for=d-number],
label[for=d-enter] {
  pointer-events: none;
}


input#d-look:checked ~ label[for=d-number],
input#d-look:checked ~ label[for=d-enter] {
  pointer-events: all;
}







/*** INSANE PANEL DRAWING - START ***/

.drawing {
  --c-lite: #282828cc;
  --c-dark: #282828;
  --c-lite: #1d3038cc;
  --c-dark: #1d3038;
  box-shadow: 0 0 6vmin -2vmin var(--shine);
  border: none;
  position: absolute;
  width: 27.35%;
  height: 27.35%;
  top: 36.5%;
  left: 4.1%;
  transform: translateZ(0px) rotateY(180deg);
  --dot1: conic-gradient(from 90deg at 0% 0%, var(--c-dark) 0% 25%, #fff0 0% 100%) no-repeat;
  background: var(--dot1) 0% 50%, var(--dot1) 50% 0%, var(--dot1) 76% 8%, var(--dot1) 54.25% 20%, var(--dot1) 69% 44%, var(--dot1) 0% 44%, var(--dot1) 8% 45%, var(--dot1) 0% 67%, var(--dot1) 3% 67.5%, var(--dot1) 7% 65%, var(--dot1) 10% 66.5%, var(--dot1) 10% 68%, var(--dot1) 2% 63%, var(--dot1) 3% 69%, var(--dot1) 5% 69%, var(--dot1) 7% 69%, var(--dot1) 0% 84%, var(--dot1) 12% 75%, var(--dot1) 15% 78%, var(--dot1) 12% 77%, var(--dot1) 11% 73%, var(--dot1) 18.2% 100%, var(--dot1) 20% 100%, var(--dot1) 22% 100%, var(--dot1) 27% 100%, var(--dot1) 28% 100%, var(--dot1) 55% 75%, var(--dot1) 89% 71%, var(--dot1) 82% 75%, var(--dot1) 82% 71%, var(--dot1) 100% 17%, var(--dot1) 98.5% 15%, var(--dot1) 95% 0%, var(--dot1) 20.25% 0%, var(--dot1) 20% 0%, var(--dot1) 20% 0%, var(--dot1) 6.5% 12%, var(--dot1) 14% 32%, var(--dot1) 14% 32%, var(--dot1) 14% 32%, var(--dot1) 42% 25%, var(--dot1) 39% 12%, var(--dot1) 81.5% 64%, var(--dot1) 59.5% 55%, var(--dot1) 61.5% 61%, var(--dot1) 57.5% 61.5%, var(--dot1) 64.5% 59.9%, var(--dot1) 66.5% 58.9%, var(--dot1) 66.5% 59.2%, var(--dot1) 66.15% 59.5%, var(--dot1) 63.35% 58.65%, var(--dot1) 59.75% 59.65%, var(--dot1) 55.75% 60.65%, var(--dot1) 57.5% 62.65%, var(--dot1) 57.15% 55.75%, var(--dot1) 67.65% 56.75%, var(--dot1) 77.7% 60.75%, var(--dot1) 82.5% 63.25%, var(--dot1) 87.5% 70.25%, var(--dot1) 87.5% 71.25%, var(--dot1) 90.5% 74.5%, var(--dot1) 85.5% 75.5%, var(--dot1) 0% 72.75%, var(--dot1) 0% 77.75%, var(--dot1) 0% 83%, var(--dot1) 0% 89.75%, var(--dot1) 0% 93.75%, var(--dot1) 0% 96.75%, var(--dot1) 0% 60.75%, var(--dot1) 0% 57.25%, var(--dot1) 13.25% 66.5%, var(--dot1) 12% 68%, var(--dot1) 15% 72%, var(--dot1) 18% 77.85%, var(--dot1) 13% 76.85%, var(--dot1) 5.1% 74.85%, var(--dot1) 7.1% 70.85%, var(--dot1) 11.45% 62.85%, var(--dot1) 15% 85.5%, var(--dot1) 26% 70.5%, var(--dot1) 28% 70.5%, var(--dot1) 26.5% 72%, var(--dot1) 5.6% 62%, var(--dot1) 4.7% 60.85%, var(--dot1) 3.25% 58.85%, var(--dot1) 2.25% 57.35%, var(--dot1) 0.85% 55.35%, var(--dot1) 6.45% 63.35%, var(--dot1) 45.75% 82.35%, var(--dot1) 45.75% 83.75%, var(--dot1) 45.75% 86.75%, var(--dot1) 45.75% 88.85%, var(--dot1) 2.75% 83.25%, var(--dot1) 5.75% 83.25%, var(--dot1) 26% 65.25%, var(--dot1) 28% 66.25%, var(--dot1) 31.5% 68.1%, var(--dot1) 33.5% 69.1%, var(--dot1) 29.8% 68.1% /* end bottom */ , var(--dot1) 16% 18%, var(--dot1) 0% 34%, var(--dot1) 10% 42%, var(--dot1) 5% 41%, var(--dot1) 2% 39%, var(--dot1) 5% 17.5%, var(--dot1) 6% 9.5%, var(--dot1) 13% 9.5%, var(--dot1) 18% 17.5%, var(--dot1) 18% 20%, var(--dot1) 27% 45.75%, var(--dot1) 38.75% 17%, var(--dot1) 38.75% 16.5%, var(--dot1) 38.75% 16%, var(--dot1) 58.75% 6%, var(--dot1) 71.75% 3%, var(--dot1) 70.5% 1.5%, var(--dot1) 89% 9.5%, var(--dot1) 102% 14%, var(--dot1) 102% 14.5%, var(--dot1) 90.75% 15.5%, var(--dot1) 91.75% 16.5%, var(--dot1) 60% 15.75%, var(--dot1) 63% 12.75%, var(--dot1) 60% 17%, var(--dot1) 61% 20%, var(--dot1) 75% 29%, var(--dot1) 75% 30%, var(--dot1) 81.75% 0%, var(--dot1) 84.75% 0%, var(--dot1) 92.75% -3%, var(--dot1) 93.5% -1%, var(--dot1) 94.5% 0%, var(--dot1) 95.15% -4%, var(--dot1) 89.25% 10%, var(--dot1) 91.25% 12.5%, var(--dot1) 84.25% 17.5%, var(--dot1) 89.25% 24%, var(--dot1) 81% 41%, var(--dot1) 81% 14%, var(--dot1) 91% 25%, var(--dot1) 72.15% 33.75%, var(--dot1) 58.75% 39%, var(--dot1) 63.85% 36%, var(--dot1) 67.65% 36.5%, var(--dot1) 60.65% 17.5%, var(--dot1) 57% 13.5%, var(--dot1) 8.125% 78%, var(--dot1) 3.25% 90%, var(--dot1) 1.75% 94%, var(--dot1) 0.5% 97%, var(--dot1) 3.125% 80%, var(--dot1) 57.125% 79%, var(--dot1) 59.125% 79%, var(--dot1) 61.25% 79%, var(--dot1) 63.25% 79%, var(--dot1) 65.25% 79%, var(--dot1) 67.25% 79%, var(--dot1) 69.35% 79%, var(--dot1) 71.35% 79%, var(--dot1) 73.35% 79%, var(--dot1) 75.35% 79%, var(--dot1) 77.35% 79%, var(--dot1) 79.5% 79% /*end dots*/, conic-gradient(from 135deg at 49% 50%, var(--c-dark) 0% 25%, #fff0 0% 100%) 45% 29%, conic-gradient(from 180deg at 49% 50%, var(--c-dark) 0% 25%, #fff0 0% 100%) 30% 17%, conic-gradient(from 306deg at 50% 50%, var(--c-dark) 0% 25%, #fff0 0% 100%) 10% 12.5%, conic-gradient(from 338deg at 50% 50%, var(--c-dark) 0% 25%, #fff0 0% 100%) 2% 12.5% , conic-gradient(from 45deg at 50% 50%, var(--c-dark) 0% 25%, #fff0 0% 100%) 4.5% 41.5% , conic-gradient(from 31deg at 50% 50%, var(--c-dark) 0% 19%, #fff0 0% 100%) 26% 115%, conic-gradient(from 31deg at 50% 50%, var(--c-dark) 0% 19%, #fff0 0% 100%) 17% 102%, conic-gradient(from 135deg at 50% 50%, var(--c-dark) 0% 25%, #fff0 0% 100%) 46% 100%, conic-gradient(from 50deg at 50% 50%, var(--c-dark) 0% 25%, #fff0 0% 100%) 53.15% 70%,conic-gradient(from -45deg at 50% 54%, var(--c-dark) 0% 25%, #fff0 0% 100%) 119% 81%, conic-gradient(from 45deg at 0% 32%, var(--c-dark) 0% 25%, #fff0 0% 100%) 107% 79%, conic-gradient(from 50deg at 50% 50%, var(--c-dark) 0% 25%, #fff0 0% 100%) 92.15% -1%, conic-gradient(from 315deg at 50% 50%, var(--c-dark) 0% 25%, #fff0 0% 100%) 96% 0%, conic-gradient(from 315deg at 50% 50%, var(--c-dark) 0% 25%, #fff0 0% 100%) 55% 0%, conic-gradient(from 315deg at 50% 50%, var(--c-dark) 0% 25%, #fff0 0% 100%) 54% 29%, conic-gradient(from 287deg at 50% 50%, var(--c-dark) 0% 20%, #fff0 0% 100%) 56.15% 80.5%, conic-gradient(from 144deg at 50% 50%, var(--c-dark) 0% 20%, #fff0 0% 100%) 82.75% 78.5%, conic-gradient(from 229deg at 50% 50%, var(--c-dark) 0% 20%, #fff0 0% 100%) 84.85% 81%, conic-gradient(from 62deg at 50% 50%, var(--c-dark) 0% 20%, #fff0 0% 100%) 84% 81%, conic-gradient(from -25deg at 50% 50%, var(--c-dark) 0% 20%, #fff0 0% 100%) 86.65% 83.75% /* end triangles */;
  background-size: 100% 8%, 8% 100%, 1% 45%, 3% 10%,  22% 4%, 8% 5%, 4% 3%, 3% 5%, 8% 3%, 3% 1.25%, 2% 0.75%, 2% 0.75%, 1% 0.75%, 0.6% 1%, 0.6% 1%, 0.6% 1%, 3% 3%, 2% 5%, 2% 2%, 1% 2%, 2% 1%, 2% 1%, 1% 2%, 6% 1%, 1% 2%, 2% 1%, 2% 10%, 2% 4%, 1.25% 2%, 1.5% 2%, 1.5% 3%, 1.5% 1.5%, 3% 1%, 0.75% 5%, 2% 2.5%, 5% 1.5%, 8% 3.5%, 9% 2.5%, 6% 4%, 5% 5.5%, 1.5% 3%, 0.75% 6%, 0.25% 5%, 0.25% 2%, 0.25% 4%, 0.25% 3%, 0.25% 2%, 3.35% 0.25%, 3% 0.25%, 2.35% 0.25%, 3% 0.25%, 4% 0.25%, 4% 0.25%, 9% 0.25%, 6% 0.25%, 0.25% 5%, 17% 0.25%, 7% 0.25%, 7% 0.25%, 7% 0.25%, 10% 0.25%, 2.53% 0.25%, 11.5% 0.25%, 9.25% 0.25%, 23.5% 0.25%, 14.5% 0.25%, 21.5% 0.25%, 4.5% 0.25%, 15.5% 0.25%, 12.5% 0.25%, 12.5% 0.25%, 8.5% 0.25%, 20.5% 0.25%, 15.5% 0.25%, 4% 0.25%, 0.25% 11%, 0.25% 6%, 0.25% 9%, 0.25% 29%, 0.25% 4.5%, 0.25% 4.5%, 2.5% 1%, 0.95% 0.95%, 0.95% 0.95%, 0.95% 0.95%, 0.95% 0.95%, 0.95% 0.95%, 0.95% 0.95%, 1% 1%, 1% 1%, 1% 1%, 1% 1%, 1% 1%, 1.25% 1%, 0.25% 6%, 0.25% 4%, 0.25% 12%, 0.25% 13%, 0.25% 12% , 0.5% 16%, 13% 0.5%, 0.25% 5%, 0.25% 5%, 0.25% 5%, 0.25% 20%, 0.35% 5%, 0.35% 5%, 0.5% 3%, 1% 0.85%, 1% 0.85%, 3.5% 0.35%, 3.5% 0.35%, 3.5% 0.35%, 9.5% 0.25%, 9.5% 0.25%, 9.5% 0.25%, 3% 0.25%, 20% 0.25%, 20% 0.25%, 10% 0.25%, 11% 0.25%, 11% 0.25%, 13% 0.25%, 5% 0.25%, 3% 0.25%, 4% 0.25%, 5% 0.25%, 0.25% 22%, 0.25% 8%, 0.25% 8%, 0.25% 8%, 0.25% 8%, 0.25% 6%, 0.25% 3%, 0.25% 3%, 0.25% 6%, 0.25% 7%, 0.25% 12%, 0.25% 9%, 0.25% 8%, 0.25% 14%, 0.25% 8%, 0.25% 14%, 0.25% 14%, 0.25% 3%, 0.25% 4.2%, 1% 1%, 1% 1%, 1% 1%, 1% 1%, 0.25% 15%, 1% 1%, 1% 1%, 1% 1%, 1% 1%, 1% 1%, 1% 1%, 1% 1%, 1% 1%, 1% 1%, 1% 1%, 1% 1%, 1% 1% /* end dots */, 25% 24%, 6% 6%, 8% 7%, 8% 7%, 4% 5%, 28% 60%, 4% 4%, 6% 6%, 6% 6%, 35% 35%, 25% 70%, 2% 2%, 2% 2%, 16% 16%, 4% 4%, 4% 4%, 5% 5%, 5% 5%, 4% 4%, 5% 5% /* end triangles */;
  background-color: #fff4;
  background-repeat: no-repeat;


}



.drawing:before {
  --line-dgn: linear-gradient(45deg, #fff0 0 calc(50% - 0.2vmin), var(--c-dark) 0 calc(50% + 0.2vmin), #fff0 0 100%);
  --line-rad: linear-gradient(-88deg, #fff0 0 48%, var(--c-dark) 0 50.5%, #fff0 0 100% );
  --dash-rad: linear-gradient(2deg, #fff0 0 48%, var(--c-dark) 0 50.5%, #fff0 0 100% );
  --bg-lines: linear-gradient(68deg, #fff0 0 48%, var(--c-dark) 0 52%, #fff0 0 100% ) 0% 0%, linear-gradient(135deg, #fff0 0 48%, var(--c-dark) 0 52%, #fff0 0 100% ) 20% 0%, linear-gradient(135deg, #fff0 0 49%, var(--c-dark) 0 50.5%, #fff0 0 100% ) 20% 0%, linear-gradient(172deg, #fff0 0 48%, var(--c-dark) 0 52%, #fff0 0 100% ) 27% 19.5%, linear-gradient(230deg, #fff0 0 48%, var(--c-dark) 0 52%, #fff0 0 100% ) 43% 27%, linear-gradient(104deg, #fff0 0 46%, var(--c-dark) 0 52%, #fff0 0 100% ) 8.5% 38%, linear-gradient(90deg, #fff0 0 47%, var(--c-dark) 0 53%, #fff0 0 100% ) 27.5% 23%, linear-gradient(50deg, #fff0 0 48%, var(--c-dark) 0 52%, #fff0 0 100% ) 34.55% 45.5%, linear-gradient(-16deg, #fff0 0 48%, var(--c-dark) 0 50%, #fff0 0 100% ) 14.55% 37.5%, linear-gradient(-68deg, #fff0 0 48%, var(--c-dark) 0 50.5%, #fff0 0 100% ) 0% 100%, linear-gradient(55deg, #fff0 0 48%, var(--c-dark) 0 50.5%, #fff0 0 100% ) 0% 65%, linear-gradient(123.5deg, #fff0 0 48%, var(--c-dark) 0 50.5%, #fff0 0 100% ) 21% 100%, linear-gradient(144deg, #fff0 0 49.65%, var(--c-dark) 0 50.35%, #fff0 0 100% ) 0% 100%, var(--line-dgn) 43% 55%, var(--line-dgn) 42% 59%, var(--line-dgn) 41% 64%, var(--line-dgn) 36% 64%, var(--line-dgn) 36% 69%, var(--line-dgn) 23% 70%, var(--line-dgn) 30% 73%, var(--line-dgn) 34% 54.5%, var(--line-dgn) 32% 57.5%, var(--line-dgn) 25% 57%, var(--line-dgn) 15% 57%, var(--line-dgn) 9% 60%, var(--line-dgn) 23% 66.7%, var(--dot1) 38% 56.5%, var(--dot1) 37.6% 60.75%, var(--dot1) 31% 59.8%, var(--dot1) 31% 64.75%, var(--dot1) 21.2% 59.6%, var(--dot1) 22% 56.25%, var(--dot1) 20% 64.5%, var(--dot1) 26% 67.75%, linear-gradient(122deg, #fff0 0 47.5%, var(--c-dark) 0 51.5%, #fff0 0 100% ) 69% 7%,  var(--line-dgn) 55% 31%,  var(--line-dgn) 68.5% 40%,  var(--line-dgn) 63% 27%,  var(--line-dgn) 66% 27%, var(--line-dgn) 64% 25%, var(--line-dgn) 64% 23%, var(--line-dgn) 65% 11.5%, var(--line-dgn) 62% 5.5%, var(--line-dgn) 58% 2%, var(--line-dgn) 69% -1%, var(--line-dgn) 75% -1%, var(--line-dgn) 73.5% 12%, var(--line-dgn) 71% 18%, var(--line-dgn) 75% 33%, var(--line-dgn) 75% 37%, var(--line-dgn) 88% 43%, var(--line-dgn) 88% 38.5%, var(--line-dgn) 89% 28.5%, var(--line-dgn) 96% 25.5%, var(--line-dgn) 99% 24%, var(--line-dgn) 100% 15%, var(--line-dgn) 101% 5.5%, var(--dot1) 60.65% 36.125%, var(--dot1) 71.6% 35.75%, var(--dot1) 71.25% 31.75%, var(--dot1) 74% 24.25%, var(--dot1) 75% 21.5%, var(--dot1) 55% 20.35%, var(--dot1) 54% 9.85%, var(--dot1) 54% 7%, var(--dot1) 65% 11%, var(--dot1) 75% 9.85%, var(--dot1) 80% 4.5%, var(--dot1) 84% 12.75%, var(--dot1) 81% 21.9%, var(--dot1) 88.5% 21.8%, var(--dot1) 79% 34.9%, var(--dot1) 79% 39%, var(--dot1) 54% 15.5%, var(--dot1) 54% 12.5%, var(--dot1) 54% 37.75%, var(--dot1) 59% 41.75%, var(--dot1) 64% 41.75%, var(--dot1) 67% 41.75%, var(--dot1) 84.5% 43%, var(--dot1) 86.5% 41%, var(--dot1) 89.75% 37%, var(--dot1) 94% 33%, var(--dot1) 98% 29%, var(--dot1) 100.5% 27%, linear-gradient(-24deg, #fff0 0 48%, var(--c-dark) 0 50.5%, #fff0 0 100% ) 100% 11.5%, linear-gradient(-70deg, #fff0 0 42%, var(--c-dark) 0 58%, #fff0 0 100% ) 91.8% 19%, var(--line-dgn) 57.5% 3.5%, var(--line-dgn) 60.5% 0.5%, var(--line-dgn) 59% 2%, linear-gradient(-40deg, #fff0 0 41%, var(--c-dark) 0 50%, #fff0 0 100% ) 74% 101%, linear-gradient(-45deg, #fff0 0 30%, var(--c-dark) 0 50%, #fff0 0 100% ) 94% 77%, var(--line-rad) 59% 76%, var(--line-rad) 61.5% 76.1%, var(--line-rad) 64% 76.2%, var(--line-rad) 66.5% 76.3%, var(--line-rad) 69% 76.4%, var(--line-rad) 71.5% 76.5%, var(--line-rad) 74% 76.6%, var(--line-rad) 76.5% 76.7%, var(--line-rad) 79% 76.8%, var(--line-rad) 81.5% 76.9%, var(--line-rad) 84% 77%, var(--line-rad) 86.5% 77.1%, var(--line-rad) 89% 77.2%, var(--dash-rad) 75.75% 69%, var(--dash-rad) 58.25% 86.75%, var(--dash-rad) 62.5% 86.85%, var(--dash-rad) 66.5% 86.85%, var(--dash-rad) 70.5% 87.25%, var(--dash-rad) 74.5% 87.5%, linear-gradient(-29deg, #fff0 0 51.5%, var(--c-dark) 0 52.5%, #fff0 0 100% ) 71.5% 61%, linear-gradient(-52deg, #fff0 0 43.5%, var(--c-dark) 0 52.5%, #fff0 0 100% ) 56.75% 66%, radial-gradient(transparent 0 62%, var(--c-dark) 65% 66%, #fff0 69%) 60.5% 89%, radial-gradient(transparent 61%, var(--c-dark) 66%, #fff0 71%) 93.5% 85.5%, radial-gradient(transparent 61%, var(--c-dark) 66%, #fff0 71%) 70% 99%, radial-gradient(transparent 61%, var(--c-dark) 66%, #fff0 71%) 1.75% 0.75%, radial-gradient(transparent 61%, var(--c-dark) 66%, #fff0 71%) 8.75% 1%, radial-gradient(transparent 62%, var(--c-dark) 66%, #fff0 69%) 26% 0.25%, radial-gradient(var(--c-dark) 10%, #fff0 12%) 28.5% 80.5%, radial-gradient(var(--c-dark) 10%, #fff0 12%) 26.5% 81.85%, radial-gradient(var(--c-dark) 10%, #fff0 12%) 24.25% 83.5%, linear-gradient(60deg, #fff0 0 51.65%, var(--c-lite) 0 53%, #fff0 0 100% ) 62% 92%, linear-gradient(60deg, #fff0 0 51%, var(--c-lite) 0 53%, #fff0 0 100% ) 57% 97%, linear-gradient(45deg, #fff0 0 51%, var(--c-lite) 0 53%, #fff0 0 100% ) 88% 66%, linear-gradient(57deg, #fff0 0 50.5%, var(--c-lite) 0 53%, #fff0 0 100% ) 81% 57.5%, linear-gradient(-53deg, #fff0 0 48%, var(--c-dark) 0 53.5%, #fff0 0 100% ) 83.25% 77.8%, linear-gradient(53deg, #fff0 0 48%, var(--c-dark) 0 53.5%, #fff0 0 100% ) 88% 77.8%, linear-gradient(-40deg, #fff0 0 48%, var(--c-dark) 0 53.5%, #fff0 0 100% ) 91.9% 70.7%, linear-gradient(-40deg, #fff0 0 48%, var(--c-dark) 0 53.5%, #fff0 0 100% ) 91.5% 69.8%, linear-gradient(-40deg, #fff0 0 48%, var(--c-dark) 0 53.5%, #fff0 0 100% ) 91% 69%, linear-gradient(-40deg, #fff0 0 48%, var(--c-dark) 0 53.5%, #fff0 0 100% ) 83.8% 59.8%, linear-gradient(-40deg, #fff0 0 48%, var(--c-dark) 0 53.5%, #fff0 0 100% ) 86% 62.25%, linear-gradient(-15deg, #fff0 0 49%, var(--c-dark) 0 52.5%, #fff0 0 100% ) 74.5% 65.35%, linear-gradient(-25deg, #fff0 0 49%, var(--c-dark) 0 52.5%, #fff0 0 100% ) 80.5% 63%, linear-gradient(-35deg, #fff0 0 49%, var(--c-lite) 0 50.5%, #fff0 0 100% ) 66.5% 90%, linear-gradient(-57deg, #fff0 0 49%, var(--c-lite) 0 50.5%, #fff0 0 100% ) 69.5% 92%, linear-gradient(-77deg, #fff0 0 48%, var(--c-lite) 0 50%, #fff0 0 100% ) 57.5% 99.5%, linear-gradient(-97deg, #fff0 0 48%, var(--c-lite) 0 50%, #fff0 0 100% ) 59.5% 99.5%, linear-gradient(-139deg, #fff0 0 49%, var(--c-lite) 0 50.2%, #fff0 0 100% ) 39.5% 88.5%, linear-gradient(-187deg, #fff0 0 49%, var(--c-lite) 0 50.2%, #fff0 0 100% ) 36.5% 83.5%, linear-gradient(-193deg, #fff0 0 49%, var(--c-lite) 0 50.2%, #fff0 0 100% ) 32.75% 85.5%, linear-gradient(-199deg, #fff0 0 49%, var(--c-lite) 0 50.2%, #fff0 0 100% ) 21.75% 90%, linear-gradient(-204deg, #fff0 0 49%, var(--c-lite) 0 50.2%, #fff0 0 100% ) 30.75% 91.5%, linear-gradient(-213deg, #fff0 0 49%, var(--c-lite) 0 50%, #fff0 0 100% ) 25% 98.5%, linear-gradient(-220deg, #fff0 0 49%, var(--c-lite) 0 49.85%, #fff0 0 100% ) 32% 98.5%, linear-gradient(-230deg, #fff0 0 49%, var(--c-lite) 0 49.85%, #fff0 0 100% ) 36% 99.75%, linear-gradient(-244deg, #fff0 0 49%, var(--c-lite) 0 49.85%, #fff0 0 100% ) 41% 99.75%, linear-gradient(-140deg, #fff0 0 48.5%, var(--c-lite) 0 51%, #fff0 0 100% ) 35% 93%, linear-gradient(-140deg, #fff0 0 48.5%, var(--c-lite) 0 51%, #fff0 0 100% ) 35% 95%, linear-gradient(-140deg, #fff0 0 48.5%, var(--c-lite) 0 51%, #fff0 0 100% ) 34% 96%, linear-gradient(-140deg, #fff0 0 48.5%, var(--c-lite) 0 51%, #fff0 0 100% ) 32.5% 97.5%, linear-gradient(-140deg, #fff0 0 48.5%, var(--c-lite) 0 51%, #fff0 0 100% ) 23% 99.5%, linear-gradient(-140deg, #fff0 0 48.5%, var(--c-lite) 0 51%, #fff0 0 100% ) 22.5% 100%, linear-gradient(-140deg, #fff0 0 47.5%, var(--c-lite) 0 51.5%, #fff0 0 100% ) 23% 96.75%, linear-gradient(-127deg, #fff0 0 46.5%, var(--c-lite) 0 53.5%, #fff0 0 100% ) 26% 98.25%, linear-gradient(-127deg, #fff0 0 47.5%, var(--c-lite) 0 51.5%, #fff0 0 100% ) 31% 89.5%, linear-gradient(-127deg, #fff0 0 47.5%, var(--c-lite) 0 51.5%, #fff0 0 100% ) 30% 90.5%, linear-gradient(-149deg, #fff0 0 47.5%, var(--c-lite) 0 51.5%, #fff0 0 100% ) 27% 92.5%, linear-gradient(-128deg, #fff0 0 47.5%, var(--c-lite) 0 51.5%, #fff0 0 100% ) 39.5% 98%, linear-gradient(-128deg, #fff0 0 47.5%, var(--c-lite) 0 51.5%, #fff0 0 100% ) 38.5% 99%, linear-gradient(-128deg, #fff0 0 47.5%, var(--c-lite) 0 51.5%, #fff0 0 100% ) 37.5% 100.5%, linear-gradient(-163deg, #fff0 0 47.5%, var(--c-lite) 0 51.5%, #fff0 0 100% ) 42.65% 96%, linear-gradient(-163deg, #fff0 0 47.5%, var(--c-lite) 0 51.5%, #fff0 0 100% ) 43.65% 101.5%, linear-gradient(-163deg, #fff0 0 47.5%, var(--c-lite) 0 51.5%, #fff0 0 100% ) 43.25% 102.5%, linear-gradient(-163deg, #fff0 0 49%, var(--c-lite) 0 51.5%, #fff0 0 100% ) 25.25% 88.125%, linear-gradient(-163deg, #fff0 0 47%, var(--c-lite) 0 51.5%, #fff0 0 100% ) 27.75% 87.5%, linear-gradient(-163deg, #fff0 0 47%, var(--c-lite) 0 51.5%, #fff0 0 100% ) 27.5% 88.35%, linear-gradient(-194deg, #fff0 0 47%, var(--c-lite) 0 51.5%, #fff0 0 100% ) 20.5% 68.35%, linear-gradient(-207deg, #fff0 0 47%, var(--c-lite) 0 51.5%, #fff0 0 100% ) 16.5% 66%, linear-gradient(-173deg, #fff0 0 49.5%, var(--c-lite) 0 51.5%, #fff0 0 100% ) 18.5% 81.75%, linear-gradient(-165deg, #fff0 0 49.5%, var(--c-lite) 0 51.5%, #fff0 0 100% ) 18.5% 82.75%, linear-gradient(-165deg, #fff0 0 49.5%, var(--c-lite) 0 51%, #fff0 0 100% ) 2.75% 104.25%, linear-gradient(-165deg, #fff0 0 49.5%, var(--c-lite) 0 51%, #fff0 0 100% ) 5.5% 107.5%, linear-gradient(-131deg, #fff0 0 20%, var(--c-lite) 0 70%, #fff0 0 100% ) 36.5% 97.5%, linear-gradient(-131deg, #fff0 0 20%, var(--c-lite) 0 70%, #fff0 0 100% ) 37.65% 96.25%, linear-gradient(-131deg, #fff0 0 20%, var(--c-lite) 0 70%, #fff0 0 100% ) 38.65% 95.2%, linear-gradient(-131deg, #fff0 0 20%, var(--c-lite) 0 70%, #fff0 0 100% ) 40.15% 93.2%, linear-gradient(-45deg, #fff0 0 20%, var(--c-lite) 0 70%, #fff0 0 100% ) 59.15% 83.2%, linear-gradient(45deg, #fff0 0 20%, var(--c-lite) 0 70%, #fff0 0 100% ) 67% 87.1%, linear-gradient(45deg, #fff0 0 46%, var(--c-lite) 0 51%, #fff0 0 100% ) 61.25% 57.25%, linear-gradient(45deg, #fff0 0 46%, var(--c-lite) 0 51%, #fff0 0 100% ) 56% 58%, linear-gradient(45deg, #fff0 0 48%, var(--c-lite) 0 51%, #fff0 0 100% ) 77% 58.5%, linear-gradient(62deg, #fff0 0 46%, var(--c-lite) 0 53%, #fff0 0 100% ) 73.25% 55%, linear-gradient(-173deg, #fff0 0 49.5%, var(--c-lite) 0 50.5%, #fff0 0 100% ) 65.5% 81.75%, linear-gradient(-184deg, #fff0 0 49.5%, var(--c-lite) 0 50.5%, #fff0 0 100% ) 60.5% 77.75%, linear-gradient(-195deg, #fff0 0 49.5%, var(--c-lite) 0 50.5%, #fff0 0 100% ) 71.5% 75.75%, linear-gradient(-211deg, #fff0 0 49.5%, var(--c-lite) 0 50.5%, #fff0 0 100% ) 76% 81.5%, linear-gradient(-166deg, #fff0 0 49.5%, var(--c-lite) 0 50.5%, #fff0 0 100% ) 81% 80.25%, linear-gradient(-148deg, #fff0 0 49.5%, var(--c-lite) 0 50.5%, #fff0 0 100% ) 76.125% 75.2%, linear-gradient(-185deg, #fff0 0 49.5%, var(--c-lite) 0 50.5%, #fff0 0 100% ) 80.25% 76%, linear-gradient(-189deg, #fff0 0 49.75%, var(--c-lite) 0 50.5%, #fff0 0 100% ) 82.25% 65.25%, linear-gradient(-130deg, #fff0 0 48.75%, var(--c-lite) 0 50.5%, #fff0 0 100% ) 30.5% 44%, linear-gradient(-130deg, #fff0 0 48.75%, var(--c-lite) 0 50.5%, #fff0 0 100% ) 27.5% 45%, linear-gradient(-130deg, #fff0 0 48.75%, var(--c-lite) 0 51.5%, #fff0 0 100% ) 26.5% 47%, linear-gradient(-130deg, #fff0 0 48.75%, var(--c-lite) 0 51%, #fff0 0 100% ) 22% 45%, linear-gradient(-130deg, #fff0 0 48.75%, var(--c-lite) 0 51%, #fff0 0 100% ) 20% 46%, linear-gradient(-130deg, #fff0 0 48.75%, var(--c-lite) 0 51%, #fff0 0 100% ) 18% 46.1%, linear-gradient(-130deg, #fff0 0 48.75%, var(--c-lite) 0 51%, #fff0 0 100% ) 16% 47%, linear-gradient(-130deg, #fff0 0 48.75%, var(--c-lite) 0 51%, #fff0 0 100% ) 14% 47.25%, linear-gradient(-145deg, #fff0 0 47.25%, var(--c-lite) 0 53%, #fff0 0 100% ) 23% 42.25%, linear-gradient(-81deg, #fff0 0 48.75%, var(--c-lite) 0 51.5%, #fff0 0 100% ) 11.5% 38.5%, linear-gradient(-81deg, #fff0 0 48.75%, var(--c-lite) 0 51.5%, #fff0 0 100% ) 13.25% 38.5%, linear-gradient(-81deg, #fff0 0 48.75%, var(--c-lite) 0 51.5%, #fff0 0 100% ) 15.5% 37.5%, linear-gradient(-81deg, #fff0 0 48.75%, var(--c-lite) 0 51.5%, #fff0 0 100% ) 16.75% 36.5%, linear-gradient(-81deg, #fff0 0 48.75%, var(--c-lite) 0 51.5%, #fff0 0 100% ) 19% 36%, linear-gradient(-97deg, #fff0 0 48.75%, var(--c-lite) 0 51.5%, #fff0 0 100% ) 23% 35%, linear-gradient(-79deg, #fff0 0 48.75%, var(--c-lite) 0 51.5%, #fff0 0 100% ) 27.5% 34%, linear-gradient(-103deg, #fff0 0 47.75%, var(--c-lite) 0 52.5%, #fff0 0 100% ) 19% 36%, linear-gradient(-128deg, #fff0 0 49.75%, var(--c-lite) 0 52.5%, #fff0 0 100% ) 35% 41.25%, linear-gradient(-128deg, #fff0 0 49.75%, var(--c-lite) 0 52.5%, #fff0 0 100% ) 38% 41%, linear-gradient(-128deg, #fff0 0 49.75%, var(--c-lite) 0 52.5%, #fff0 0 100% ) 40% 40.25%, linear-gradient(-128deg, #fff0 0 49.75%, var(--c-lite) 0 52.5%, #fff0 0 100% ) 43% 39.25%, linear-gradient(-86deg, #fff0 0 49.75%, var(--c-lite) 0 52.5%, #fff0 0 100% ) 32.5% 33.25%, linear-gradient(-86deg, #fff0 0 49.75%, var(--c-lite) 0 52.5%, #fff0 0 100% ) 34.75% 32.25%, linear-gradient(-86deg, #fff0 0 49.75%, var(--c-lite) 0 52.5%, #fff0 0 100% ) 36.75% 32%, linear-gradient(-86deg, #fff0 0 49.75%, var(--c-lite) 0 52.5%, #fff0 0 100% ) 39.75% 31.125%, linear-gradient(-45deg, #fff0 0 47.5%, var(--c-lite) 0 52.5%, #fff0 0 100% ) 1.65% 35.125%, linear-gradient(-56deg, #fff0 0 48.5%, var(--c-lite) 0 52.5%, #fff0 0 100% ) 4.5% 36%, linear-gradient(-78deg, #fff0 0 47.5%, var(--c-lite) 0 51.75%, #fff0 0 100% ) 8.75% 36%, linear-gradient(-112deg, #fff0 0 49.5%, var(--c-lite) 0 50.5%, #fff0 0 100% ) -1% 6%, linear-gradient(-112deg, #fff0 0 49.5%, var(--c-lite) 0 50.5%, #fff0 0 100% ) -1.5% 7%, linear-gradient(-112deg, #fff0 0 49.5%, var(--c-lite) 0 50.5%, #fff0 0 100% ) -3.5% 3%, linear-gradient(-93deg, #fff0 0 49%, var(--c-lite) 0 50.5%, #fff0 0 100% ) -3.5% 14%, linear-gradient(-98deg, #fff0 0 49%, var(--c-lite) 0 50.5%, #fff0 0 100% ) -4.5% 14%, linear-gradient(-102deg, #fff0 0 49%, var(--c-lite) 0 50.5%, #fff0 0 100% ) -5.65% 11%, linear-gradient(-86deg, #fff0 0 49%, var(--c-lite) 0 50.5%, #fff0 0 100% ) -2% 24%, linear-gradient(-78deg, #fff0 0 49%, var(--c-lite) 0 50.5%, #fff0 0 100% ) -1% 26%, linear-gradient(-70deg, #fff0 0 49%, var(--c-lite) 0 52.5%, #fff0 0 100% ) 7.35% 36%, linear-gradient(-40deg, #fff0 0 49%, var(--c-lite) 0 52.5%, #fff0 0 100% ) 0% 30%, linear-gradient(-40deg, #fff0 0 49%, var(--c-lite) 0 51.25%, #fff0 0 100% ) 8.5% 17%, linear-gradient(16deg, #fff0 0 49%, var(--c-lite) 0 54.25%, #fff0 0 100% ) 12.5% 19%, linear-gradient(16deg, #fff0 0 45%, var(--c-lite) 0 54.25%, #fff0 0 100% ) 13.65% 18.2%, linear-gradient(16deg, #fff0 0 45%, var(--c-lite) 0 49.25%, #fff0 0 100% ) 10.65% 20.2%, linear-gradient(-8deg, #fff0 0 45%, var(--c-lite) 0 50.25%, #fff0 0 100% ) 10.65% 23.2%, linear-gradient(-8deg, #fff0 0 45%, var(--c-lite) 0 52.25%, #fff0 0 100% ) 11.5% 26.2%, linear-gradient(-14deg, #fff0 0 45%, var(--c-lite) 0 52%, #fff0 0 100% ) 11.5% 26.75%, linear-gradient(5deg, #fff0 0 49%, var(--c-lite) 0 52%, #fff0 0 100% ) 19.75% 13.85%, linear-gradient(6deg, #fff0 0 49%, var(--c-lite) 0 52%, #fff0 0 100% ) 17.25% 19.85%, linear-gradient(13deg, #fff0 0 47%, var(--c-lite) 0 52%, #fff0 0 100% ) 16.75% 22.85%, linear-gradient(13deg, #fff0 0 47%, var(--c-lite) 0 58%, #fff0 0 100% ) 16.75% 24.85%, linear-gradient(-10deg, #fff0 0 49%, var(--c-lite) 0 51%, #fff0 0 100% ) 19.25% 5.5%, linear-gradient(34deg, #fff0 0 49%, var(--c-lite) 0 51%, #fff0 0 100% ) 25% 4.75%, linear-gradient(147deg, #fff0 0 49%, var(--c-lite) 0 51%, #fff0 0 100% ) 14% 4.75%, linear-gradient(149deg, #fff0 0 49%, var(--c-lite) 0 51.5%, #fff0 0 100% ) 14.25% 2.75%, linear-gradient(149deg, #fff0 0 49%, var(--c-lite) 0 50.5%, #fff0 0 100% ) 7.25% -3%, linear-gradient(87deg, #fff0 0 48.25%, var(--c-lite) 0 50.5%, #fff0 0 100% ) 1.1% 0%, linear-gradient(55deg, #fff0 0 48.25%, var(--c-lite) 0 50.5%, #fff0 0 100% ) -1.75% -0.5%, linear-gradient(146deg, #fff0 0 48.25%, var(--c-lite) 0 50.5%, #fff0 0 100% ) 2.5% -1.95%, linear-gradient(146deg, #fff0 0 48.25%, var(--c-lite) 0 53.5%, #fff0 0 100% ) 32.5% 0.5%, linear-gradient(146deg, #fff0 0 48.25%, var(--c-lite) 0 53.5%, #fff0 0 100% ) 32.5% 2.5%, linear-gradient(190deg, #fff0 0 48.25%, var(--c-lite) 0 50.5%, #fff0 0 100% ) 37.25% -2.25%, linear-gradient(190deg, #fff0 0 48.25%, var(--c-lite) 0 50.5%, #fff0 0 100% ) 37.125% 0.05%, linear-gradient(207deg, #fff0 0 48.25%, var(--c-lite) 0 51%, #fff0 0 100% ) 33.125% 4.05%, linear-gradient(204deg, #fff0 0 48.25%, var(--c-lite) 0 50%, #fff0 0 100% ) 17.125% 11%, linear-gradient(198deg, #fff0 0 48.25%, var(--c-lite) 0 50%, #fff0 0 100% ) 18.5% 9%, linear-gradient(192deg, #fff0 0 48.25%, var(--c-lite) 0 50%, #fff0 0 100% ) 18% 7%, linear-gradient(186deg, #fff0 0 48.25%, var(--c-lite) 0 50%, #fff0 0 100% ) 18% 7.5%, linear-gradient(178deg, #fff0 0 49.5%, var(--c-lite) 0 50.5%, #fff0 0 100% ) 12% -6.5%, linear-gradient(139deg, #fff0 0 47.5%, var(--c-lite) 0 53.5%, #fff0 0 100% ) 6.25% 9%, linear-gradient(140deg, #fff0 0 47%, var(--c-lite) 0 53.5%, #fff0 0 100% ) 64.5% 3.35%, linear-gradient(127deg, #fff0 0 46.5%, var(--c-lite) 0 50%, #fff0 0 100% ) 92.9% 5.25%, linear-gradient(127deg, #fff0 0 46.5%, var(--c-lite) 0 50%, #fff0 0 100% ) 93.9% 7.25%, linear-gradient(126deg, #fff0 0 46.5%, var(--c-lite) 0 50%, #fff0 0 100% ) 95.1% 8.25%, linear-gradient(56deg, #fff0 0 46.5%, var(--c-lite) 0 50.5%, #fff0 0 100% ) 98.65% 2.25%, linear-gradient(90deg, #fff0 0 46.5%, var(--c-lite) 0 50.5%, #fff0 0 100% ) 99.99% 6.75%, linear-gradient(53deg, #fff0 0 48.5%, var(--c-lite) 0 50.5%, #fff0 0 100% ) 82% 14.75%, linear-gradient(53deg, #fff0 0 48.5%, var(--c-lite) 0 50.5%, #fff0 0 100% ) 82.5% 14.75%, linear-gradient(53deg, #fff0 0 48.5%, var(--c-lite) 0 50.5%, #fff0 0 100% ) 81.5% 14.75%, linear-gradient(46deg, #fff0 0 48.5%, var(--c-lite) 0 50.5%, #fff0 0 100% ) 90.25% 23.5%, linear-gradient(-46deg, #fff0 0 48.5%, var(--c-lite) 0 50.5%, #fff0 0 100% ) 88.25% 30.5%, linear-gradient(-136deg, #fff0 0 48.5%, var(--c-lite) 0 50.95%, #fff0 0 100% ) 80.75% 31%, linear-gradient(-126deg, #fff0 0 48.5%, var(--c-lite) 0 57.5%, #fff0 0 100% ) 72.65% 30.75%, linear-gradient(-135deg, #fff0 0 46.5%, var(--c-lite) 0 51%, #fff0 0 100% ) 64% 20.65%, linear-gradient(-225deg, #fff0 0 46.5%, var(--c-lite) 0 51%, #fff0 0 100% ) 58% 20.65%, linear-gradient(90deg, #fff0 0 48.5%, var(--c-lite) 0 51%, #fff0 0 100% ) 65.75% 24.65%, linear-gradient(44deg, #fff0 0 48.5%, var(--c-lite) 0 51%, #fff0 0 100% ) 69.25% 24.65%, linear-gradient(44deg, #fff0 0 48.5%, var(--c-lite) 0 51%, #fff0 0 100% ) 69.95% 23.5%, linear-gradient(144deg, #fff0 0 47.5%, var(--c-lite) 0 51%, #fff0 0 100% ) 66.5% 12.75%, linear-gradient(99deg, #fff0 0 48.5%, var(--c-lite) 0 51%, #fff0 0 100% ) 68.35% 12.75%, linear-gradient(128deg, #fff0 0 48.5%, var(--c-lite) 0 51.5%, #fff0 0 100% ) 75.25% 25.5%, linear-gradient(72deg, #fff0 0 49.5%, var(--c-lite) 0 51.5%, #fff0 0 100% ) 76.25% 11.5%, linear-gradient(8deg, #fff0 0 48.5%, var(--c-lite) 0 51.5%, #fff0 0 100% ) 37% 24%, linear-gradient(8deg, #fff0 0 48.5%, var(--c-lite) 0 51.5%, #fff0 0 100% ) 38.5% 23%, linear-gradient(8deg, #fff0 0 48.5%, var(--c-lite) 0 54.5%, #fff0 0 100% ) 31.5% 19%, linear-gradient(8deg, #fff0 0 48.5%, var(--c-lite) 0 54.5%, #fff0 0 100% ) 30.25% 20%, linear-gradient(59deg, #fff0 0 49.5%, var(--c-lite) 0 53.5%, #fff0 0 100% ) 33.95% 21%, linear-gradient(59deg, #fff0 0 49.5%, var(--c-lite) 0 53.5%, #fff0 0 100% ) 32.5% 22%, linear-gradient(42deg, #fff0 0 49.5%, var(--c-lite) 0 53.5%, #fff0 0 100% ) 32.5% 26%, linear-gradient(42deg, #fff0 0 46.5%, var(--c-lite) 0 53.5%, #fff0 0 100% ) 31.95% 27.9%, linear-gradient(0deg, #fff0 0 46.5%, var(--c-lite) 0 53.5%, #fff0 0 100% ) 21.5% 2.9%, linear-gradient(-45deg, #fff0 0 48.5%, var(--c-lite) 0 50.5%, #fff0 0 100% ) 42.4% 2.9%, linear-gradient(-45deg, #fff0 0 48.5%, var(--c-lite) 0 50.5%, #fff0 0 100% ) 42.85% 2.9%, linear-gradient(25deg, #fff0 0 27.5%, var(--c-dark) 0 50.5%, #fff0 0 100% ) 38.25% 9%, linear-gradient(-45deg, #fff0 0 49.75%, var(--c-dark) 0 50.1%, #fff0 0 100% ) 100% 140%, linear-gradient(-40deg, #fff0 0 49.5%, var(--c-dark) 0 50.1%, #fff0 0 100% ) 77% 111%, linear-gradient(-40deg, #fff0 0 49.5%, var(--c-lite) 0 53.1%, #fff0 0 100% ) 65% 102%, linear-gradient(-40deg, #fff0 0 49.5%, var(--c-lite) 0 53.1%, #fff0 0 100% ) 66.5% 103.75%, linear-gradient(-40deg, #fff0 0 35.5%, var(--c-lite) 0 68.1%, #fff0 0 100% ) 66.5% 98.125%, linear-gradient(-40deg, #fff0 0 35.5%, var(--c-lite) 0 68.1%, #fff0 0 100% ) 68.01% 99.65%, linear-gradient(-40deg, #fff0 0 49.5%, var(--c-lite) 0 52.1%, #fff0 0 100% ) 74.85% 95%, linear-gradient(-40deg, #fff0 0 49.5%, var(--c-lite) 0 52.1%, #fff0 0 100% ) 84% 85%, linear-gradient(-59deg, #fff0 0 49.5%, var(--c-lite) 0 52.1%, #fff0 0 100% ) 80% 89%, linear-gradient(-95deg, #fff0 0 49.5%, var(--c-lite) 0 50.5%, #fff0 0 100% ) 105.35% 87%, linear-gradient(135deg, #fff0 0 49.5%, var(--c-lite) 0 50.25%, #fff0 0 100% ) 84.75% 102.15%, linear-gradient(28deg, #fff0 0 29.5%, var(--c-dark) 0 64.5%, #fff0 0 100% ) 22.5% 90%, linear-gradient(28deg, #fff0 0 47.5%, var(--c-dark) 0 58.5%, #fff0 0 100% ) 21.75% 91.25%, linear-gradient(28deg, #fff0 0 47.5%, var(--c-dark) 0 58.5%, #fff0 0 100% ) 21.25% 92.125%, linear-gradient(28deg, #fff0 0 47.5%, var(--c-dark) 0 58.5%, #fff0 0 100% ) 20.65% 93%, linear-gradient(28deg, #fff0 0 47.5%, var(--c-dark) 0 58.5%, #fff0 0 100% ) 20.1% 94%, linear-gradient(28deg, #fff0 0 47.5%, var(--c-dark) 0 58.5%, #fff0 0 100% ) 19.5% 94.75%, linear-gradient(28deg, #fff0 0 47.5%, var(--c-dark) 0 58.5%, #fff0 0 100% ) 19% 95.65%, linear-gradient(28deg, #fff0 0 47.5%, var(--c-dark) 0 58.5%, #fff0 0 100% ) 18.45% 96.45%, linear-gradient(28deg, #fff0 0 47.5%, var(--c-dark) 0 58.5%, #fff0 0 100% ) 18% 97.25%, linear-gradient(28deg, #fff0 0 47.5%, var(--c-dark) 0 58.5%, #fff0 0 100% ) 17.25% 98.2%, linear-gradient(28deg, #fff0 0 47.5%, var(--c-dark) 0 58.5%, #fff0 0 100% ) 16.5% 99.125%, linear-gradient(28deg, #fff0 0 47.5%, var(--c-dark) 0 58.5%, #fff0 0 100% ) 16.125% 100.2%, linear-gradient(28deg, #fff0 0 47.5%, var(--c-dark) 0 58.5%, #fff0 0 100% ) 15.5% 101%, linear-gradient(43deg, #fff0 0 44.5%, var(--c-dark) 0 58.5%, #fff0 0 100% ) 36.25% 98.1%, linear-gradient(43deg, #fff0 0 44.5%, var(--c-dark) 0 58.5%, #fff0 0 100% ) 37.25% 96.7%, linear-gradient(43deg, #fff0 0 44.5%, var(--c-dark) 0 58.5%, #fff0 0 100% ) 38.25% 95.5%, linear-gradient(34deg, #fff0 0 44.5%, var(--c-dark) 0 58.5%, #fff0 0 100% ) 39.75% 93.5%, linear-gradient(29deg, #fff0 0 49.5%, var(--c-dark) 0 52.5%, #fff0 0 100% ) 15.95% 94.25%, linear-gradient(45deg, #fff0 0 49.5%, var(--c-lite) 0 50.5%, #fff0 0 100% ) 105.5% 101.25%, linear-gradient(135deg, #fff0 0 49.75%, var(--c-lite) 0 50.25%, #fff0 0 100% ) 105.5% 101.25%, linear-gradient(135deg, #fff0 0 49.75%, var(--c-lite) 0 50.5%, #fff0 0 100% ) 105.5% 101.25%, linear-gradient(135deg, #fff0 0 49.75%, var(--c-lite) 0 50.25%, #fff0 0 100% ) 106.5% 101.25%, linear-gradient(135deg, #fff0 0 49.75%, var(--c-lite) 0 50.5%, #fff0 0 100% ) 105.5% 105.25%, linear-gradient(135deg, #fff0 0 49.75%, var(--c-lite) 0 50.25%, #fff0 0 100% ) 105.5% 106.25%, linear-gradient(135deg, #fff0 0 49.75%, var(--c-lite) 0 50.25%, #fff0 0 100% ) 105.5% 117.25%, linear-gradient(135deg, #fff0 0 49.5%, var(--c-lite) 0 50.25%, #fff0 0 100% ) 112.5% 108.25%, linear-gradient(135deg, #fff0 0 47.5%, var(--c-lite) 0 50.25%, #fff0 0 100% ) 104.75% 94%, linear-gradient(90deg, #fff0 0 48.5%, var(--c-lite) 0 52.25%, #fff0 0 100% ) 100.6% 100%, linear-gradient(45deg, #fff0 0 50.25%, var(--c-lite) 0 50.75%, #fff0 0 100% ) 87.5% 103.5%, linear-gradient(-45deg, #fff0 0 49.25%, var(--c-lite) 0 55%, #fff0 0 100% ) 96.85% 80.75%, linear-gradient(-45deg, #fff0 0 49.25%, var(--c-lite) 0 57%, #fff0 0 100% ) 93.5% 80.35%, linear-gradient(-53deg, #fff0 0 49%, var(--c-lite) 0 54%, #fff0 0 100% ) 96% 78.1%, linear-gradient(-62deg, #fff0 0 49.5%, var(--c-lite) 0 52%, #fff0 0 100% ) 101.5% 77.2%, linear-gradient(-45deg, #fff0 0 49.5%, var(--c-lite) 0 51%, #fff0 0 100% ) 106.25% 73.2%, var(--line-dgn) 87% 83.5%, var(--line-dgn) 89.5% 86%, var(--line-dgn) 95% 91.5%, var(--line-dgn) 99.35% 73.5%, linear-gradient(-45deg, #fff0 0 46.5%, var(--c-lite) 0 57%, #fff0 0 100% ) 95.25% 81.5%, linear-gradient(89deg, #fff0 0 49.5%, var(--c-lite) 0 52%, #fff0 0 100% ) 101% 101%, linear-gradient(89deg, #fff0 0 49.5%, var(--c-lite) 0 52%, #fff0 0 100% ) 99.6% 101%, linear-gradient(89deg, #fff0 0 49.5%, var(--c-lite) 0 52%, #fff0 0 100% ) 101.125% 102.5%, linear-gradient(-45deg, #fff0 0 47.5%, var(--c-lite) 0 50%, #fff0 0 100% ) 101.125% 86.5%, linear-gradient(-45deg, #fff0 0 42.5%, var(--c-lite) 0 54%, #fff0 0 100% ) 80.5% 93.5%, linear-gradient(45deg, #fff0 0 52.5%, var(--c-lite) 0 53.25%, #fff0 0 100% ) 88% 106.5%, linear-gradient(45deg, #fff0 0 52.5%, var(--c-lite) 0 54.25%, #fff0 0 100% ) 81.5% 94%, linear-gradient(45deg, #fff0 0 52.5%, var(--c-lite) 0 54.25%, #fff0 0 100% ) 90.5% 99%, linear-gradient(-20deg, #fff0 0 52.5%, var(--c-lite) 0 57.5%, #fff0 0 100% ) 85.125% 95%, linear-gradient(-40deg, #fff0 0 53.75%, var(--c-lite) 0 54.25%, #fff0 0 100% ) 78.125% 106%, linear-gradient(-40deg, #fff0 0 53.75%, var(--c-lite) 0 54.25%, #fff0 0 100% ) 78.125% 106.45%, linear-gradient(-45deg, #fff0 0 53.75%, var(--c-lite) 0 54.25%, #fff0 0 100% ) 115.125% 80.45%;

  --bg-lines-size: 13.5% 36%, 33% 36%, 33% 31%, 27% 36%, 6% 26%, 10% 12%, 14% 21%, 14% 15%, 38% 15%, 11% 28%, 13% 18%, 16% 24%, 33% 24%, 5% 5%, 5% 5%, 6% 6%, 7% 7%, 7% 7%, 25% 25%, 8% 8%, 5% 5%, 8% 8%, 7% 7%, 7% 7%, 12% 12%, 4% 4%, 3.5% 0.75%, 2% 0.85%, 4.45% 0.8%, 4.45% 0.8%, 4.4% 0.8%, 5.5% 0.8%, 3.5% 0.8%, 3% 0.8%, 23% 38%, 8% 8%, 10% 10%, 22% 22%, 22% 22%, 15% 15%, 12% 12%, 15% 15%, 15% 15%, 10% 10%, 12% 12%, 6% 6%, 10% 10%, 5% 5%, 4% 4%, 4% 4%, 10% 10%, 10% 10%, 15% 15%, 15% 15%, 10% 10%, 15% 15%, 20% 20%, 4.25% 0.8%, 4% 0.8%, 4.75% 0.8%, 6% 0.8%, 4% 0.8%, 4% 0.8%, 4% 0.8%, 3% 1.2%, 5% 0.8%, 5% 0.9%, 5% 0.8%, 10% 0.8%, 7% 0.8%, 8% 0.8%, 4.5% 0.8%, 4.5% 0.8%, 2.5% 1%, 2.5% 1%, 2.5% 1%, 1% 1%, 1% 1%, 1% 1%, 2% 2%, 2% 2%, 2% 2%, 2% 2%, 2% 2%, 2% 2%, 24% 20%, 4% 4%, 2% 2%, 2% 2%, 2% 2%, 27% 25%, 13% 11%, 20% 15%, 20% 15%, 20% 15%, 20% 15%, 20% 15%, 20% 15%, 20% 15%, 20% 15%, 20% 15%, 20% 15%, 20% 15%, 20% 15%, 20% 15%, 24% 20%, 2% 20%, 2% 20%, 2% 20%, 2% 20%, 2% 20%, 20% 12%, 2% 2%, 10% 10%, 6% 6%, 5% 5%, 4% 4%, 5% 5%, 8% 8%, 8% 8%, 8% 8%, 8% 8%, 14% 14%, 10% 10%, 8% 8%, 8% 8%, 3% 3%, 3% 3%, 3% 3%, 3% 3%, 3% 3%, 3% 3%, 3% 3%, 9% 6%, 5% 6%, 13% 13%, 13% 13%, 10% 10%, 10% 10%, 15% 15%, 15% 15%, 30% 16%, 34% 15%, 22% 16%, 35% 18%, 35% 18%, 35% 15%, 35% 15%, 8% 8%, 6% 6%, 6% 6%, 6.5% 6.5%, 6.5% 6.5%, 6.5% 6.5%, 4% 4%, 2% 2%, 4% 3%, 4% 3.8%, 5% 5%, 4% 3.5%, 4% 3.75%, 4% 3.75%, 6% 5%, 6% 5%, 6% 5%, 9% 9%, 4% 4%, 3% 4%, 5% 5%, 4% 4%, 12% 10%, 10% 10%, 18% 15%, 18% 15%, 1% 1%, 1% 1%, 1% 1%, 1% 1%, 0.75% 0.75%, 0.75% 0.7%, 3% 3%, 4% 4%, 5% 5%, 2% 2%, 20% 20%, 10% 20%, 10% 20%, 5% 20%, 5% 20%, 2.5% 20%, 5% 20%, 30% 20%, 10% 10%, 10% 10%, 8% 8%, 8% 8%, 8% 8%, 8% 8%, 8% 8%, 8% 8%, 3% 3%, 8% 8%, 8% 8%, 8% 8%, 9% 9%, 9% 9%, 8% 8%, 8% 8%, 8% 8%, 8% 8%, 8% 8%, 8% 8%, 8% 8%, 8% 8%, 8% 8%, 8% 8%, 8% 8%, 4% 3%, 5% 5%, 5% 6.05%, 15% 33%, 15% 33%, 15% 33%, 15% 23%, 15% 23%, 15% 23%, 15% 13%, 15% 11%, 5% 7%, 5% 7%, 8% 8%, 4% 4%, 3% 2%, 6% 5%, 6% 5%, 5% 3%, 5% 3%, 9% 10%, 7% 8%, 4% 4%, 3% 2%, 22% 10%, 10% 10%, 10% 10%, 7% 8.7%, 15% 15%, 10% 10%, 9% 10%, 9% 10%, 3% 3%, 3% 3%, 8% 8%, 7% 7%, 5% 6%, 13% 10%, 13% 12%, 15% 15%, 17% 12%, 28% 27%, 3% 3%, 3% 3%, 4.5% 4.5%, 5.5% 5.5%, 5% 4.5%, 4% 4.5%, 4% 8.5%, 8% 8.5%, 8% 8.5%, 8% 8.5%, 8% 8.5%, 8% 8.5%, 7% 7.5%, 2% 2%, 4% 3%, 4% 3%, 6% 5%, 8% 8%, 8% 8%, 4% 4%, 6% 6%, 5% 5%, 10% 10%, 7% 7%, 7% 7%, 3% 3%, 3% 3%, 5% 4.5%, 5% 4.5%, 5% 5%, 2.5% 2.5%, 3.5% 3.5%, 8.75% 8.75%, 8.75% 8.75%, 2% 3%, 50% 50%, 30% 30%, 5% 5%, 5% 5%, 1% 1%, 1% 1%, 6% 6%, 6% 6%, 6% 6%, 18% 18%, 18% 18%, 2.5% 2%, 2.5% 2%, 2.5% 2%, 2.5% 2%, 2.5% 2%, 2.5% 2%, 2.5% 2%, 2.5% 2%, 2.5% 2%, 2.5% 2%, 2.5% 2%, 2.5% 2%, 2.5% 2%, 2.5% 2%, 2.5% 2%, 2.5% 2%, 2.5% 2%, 6% 6%, 20% 20%, 20% 20%, 20% 20%, 20% 20%, 20% 20%, 20% 20%, 7% 7%, 7% 7%, 7% 7%, 6% 6%, 15% 15%, 3% 3%, 2% 2%, 3% 3%, 6% 6%, 10% 10%, 2% 2%, 1.5% 1.5%, 1% 1%, 1% 1%, 2% 2%, 15% 15%, 10% 10%, 10% 10%, 10% 10%, 3% 3%, 15% 15%, 6% 6%, 6% 6%, 3% 3%, 25% 25%, 25% 25%, 25% 25%;

  top: 0;
  left: 0;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--bg-lines);
  background-size: var(--bg-lines-size);
  background-repeat: no-repeat;
}


.drawing:after {
  top: 0;
  left: 0;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(140deg, #fff0 0 81%, var(--c-lite) 0 100%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}


/**** INSANE PANEL DRAWING - END ****/




/*** PANEL POSITIONS ***/
.drawing.fig-2 {
  top: 68.8%;
  transform: translateZ(0px) rotateY(180deg) rotate(90deg);
}
.drawing.fig-2:after, .drawing.fig-4:after, .drawing.fig-6:after, .drawing.fig-8:after {
  background: conic-gradient(from -21deg, var(--c-lite) 0 18%, #fff0 0 100%) -73% 0%;
  background-size: 70% 70%;
  background-repeat: no-repeat;
}


.drawing.fig-3 {
  top: 68.8%;
  transform: translateZ(0px) rotateY(180deg) rotate(180deg);
  left: 36.6%;
}

.drawing.fig-4 {
  top: 68.8%;
  transform: translateZ(0px) rotateY(180deg) rotate(90deg);
  left: 68.825%;
}


.drawing.fig-5 {
  left: 68.825%;
  transform: translateZ(0px) rotateY(180deg) rotate(270deg);
}

.drawing.fig-6 {
  left: 68.825%;
  top: 4.15%;
  transform: translateZ(0px) rotateY(180deg) rotate(180deg);
}

.drawing.fig-7 {
  left: 36.6%;
  top: 4.15%;
}

.drawing.fig-8 {
  top: 4.15%;
  transform: translateZ(0px) rotateY(180deg) rotate(270deg);
}
















/*** VIEW NUMBERS ***/

input#d-none ~ input[name=doors]:checked ~ input#d-look:checked ~ input#d-number:checked ~ .content .room .side .tunnel {
  transform: translate3d(39.75vmin, 36.75vmin, 26vmin) rotateX(-90deg);
  transform: translate3d(39.75vmin, 39.75vmin, 35vmin) rotateX(-90deg);
}

input#d-none ~ input[name=doors]:checked ~ input#d-look:checked ~ input#d-number:checked ~ .content .room .side .tunnel .side:nth-child(5) {
  background: #fff0;
}





label[for=d-number] {
  left: calc(50% + 14.5vmin);
  background: #00000080;
  color: #fff;
  line-height: 1vmin;

}

label[for=d-number]:before {
  content: "look inside";
  width: 100%;
  position: absolute;
  top: 1.25vmin;
  left: 0;
  line-height: 1.25vmin;
}


input#d-look:checked ~ label[for=d-number],
input#d-number:checked + label[for=d-number]:hover {
  background: #8bc34a;
  background: linear-gradient(45deg, #fff, #c9c9c9, #fff, #999);
  background: linear-gradient( 45deg, #888b, #888b, #fff, #999c, #999c);
  background-size: 200% 200%;
  background-position: 100% 50%;
  transition: all 0.4s ease 0s;
  opacity: 0.75;
}

input#d-look:checked ~ label[for=d-number]:hover {
  opacity: 0.9;
  background-position: 0% 50%;
  transition: all 0.4s ease 0s;
}


input#d-look:checked ~ label[for=d-number]:hover:before,
input#d-look:checked ~ label[for=d-number]:hover:after {
  background: #000a;
}

input#d-look:checked ~ label[for=d-number]:before,
input#d-look:checked ~ label[for=d-number]:after {
  content: "513457";
  background: #0008;
  width: 80%;
  height: 22%;
  left: 10%;
  position: absolute;
  top: 19%;
  transition: all 0.25s ease 0s;
  padding: 1px 0;
}


input#d-look:checked ~ label[for=d-number]:after {
  content: "248359";
  top: 56%;
}


input#d-number:checked + label[for=d-number]:hover:before,
input#d-number:checked + label[for=d-number]:hover:after {
  opacity: 0.5
}














/*** ALL NUMBERS ***/
.front .tunnel .side:nth-child(6):after {
  content: "566 472 737";
}

.left .tunnel .side:nth-child(6):after {
  content: "476 804 539";
}

.right .tunnel .side:nth-child(6):after {
  content: "666 897 545";
}

.upper .tunnel .side:nth-child(6):after {
  content: "517 478 565";
}

.lower .tunnel .side:nth-child(6):after {
  content: "645 327 649";
}














/*** zoom ***/
/*
body:active .content {
transform: scale3d(1.5, 1.5, 1.5);
}
*/















/*** exit tunnel ***/
input#d-front:checked ~ input#d-look ~ .content > .room .front .door {
  transition: 0s ease 0s;
}

input#d-front:checked ~ input#d-look:checked ~ .content > .room .front .door {
  animation-duration: 0s;
  transition: 0s ease 0s;
  transform: translate3d(39.95vmin, 60.95vmin, -4vmin);
}

input#d-front:checked ~ input#d-look:checked ~ .content > .room .front .tunnel .side:nth-child(3):before,
input#d-front:checked ~ input#d-look:checked ~ .content > .room .front .tunnel .side:nth-child(4):before,
input#d-front:checked ~ input#d-look:checked ~ .content > .room .front .tunnel .side:nth-child(5):before,
input#d-front:checked ~ input#d-look:checked ~ .content > .room .front .tunnel .side:nth-child(6):before {
  opacity: 0;
}

input#d-front:checked ~ input#d-look:checked ~ .content > .room .front .tunnel .side:nth-child(4):after {
  background: 
    var(--dig4) 50% 72.2%, var(--dig4) 50% 21.5%, 
    var(--dig3) 50% 28%, var(--dig3) 50% 78.2%, 
    var(--dig2) 50% 59.25%, var(--dig2) 50% 4.91%, 
    var(--dig1) 50% 40.7%, var(--dig1) 50% 94.4%, 
    var(--test) 47% 24.5%, var(--test) 47% 75.5%, var(--test) 47% 103%, var(--test) 47% -3.5%, 
    var(--test) 53% 85.25%, var(--test) 53% 15%, var(--test) 53% 32%, var(--test) 53% 68%, 
    var(--test) 47% 50%, 
    conic-gradient(from 0deg at 0 100%, #585858 0 25%, #0000 0 100%) 0 0, 
    conic-gradient(from 0deg at 0% 100%, #585858 0 25%, #0000 0 100%) 0 100%, 
    linear-gradient(90deg, #FFF0 0 42%, #343434 0 42.75%, #232323 0 43.25%, #343434 0 44%, #232323 0 44.5%, #343434 0 45.25%, #232323 0 45.5%, #343434 0 55%, #232323 0 55.25%, #343434 0 56%, #232323 0% 56.5%, #343434 0 57.25%, #232323 0 57.75%, #343434 0 58.25%, #fff0 0 100%), 
    linear-gradient(180deg, #fff0 0 6%, #888 0 6.5%, #363636 0 11%, #888 0 11.5%, #fff0 0 89.5%, #888 0 90%, #363636 0 94.35%, #888 0 95%, #fff0 0 100%);
  background-size: 6.55% 3%, 6.55% 3%, 6.55% 3%, 6.55% 3%, 6.55% 10%, 6.55% 10%, 6.55% 10%, 6.55% 9.7%, 0.75% 4%, 0.75% 4%, 0.75% 8%, 0.75% 8%, 0.75% 8%, 0.75% 8%, 0.75% 8%, 0.75% 8%, 0.75% 8%, 41.775% 15%, 41.775% 15%, 100% 100%, 100% 100%;
  background-repeat: no-repeat;
}


input#d-front:checked ~ input#d-look:checked ~ .content > .room .front .tunnel .side:nth-child(3):after {
  background: 
    var(--dig4) 50% 72.2%, var(--dig4) 50% 21.5%,   
    var(--dig3) 50% 28%, var(--dig3) 50% 78.2%, 
    var(--dig2) 50% 59.25%, var(--dig2) 50% 4.91%, 
    var(--dig1) 50% 40.7%, var(--dig1) 50% 94.4%, var(--test) 53% 24.5%, var(--test) 53% 75.5%, 
    var(--test) 53% 103%, var(--test) 53% -3.5%, var(--test) 47% 85.25%, var(--test) 47% 15%, 
    var(--test) 47% 32%, var(--test) 47% 68%, var(--test) 53% 50%,  
    conic-gradient(from 0deg at 0% 100%, #585858 0 25%, #0000 0 100%) 100% 0, 
    conic-gradient(from 0deg at 0% 100%, #585858 0 25%, #0000 0 100%) 100% 100%, 
    linear-gradient(90deg, #FFF0 0 42%, #343434 0 42.75%, #232323 0 43.25%, #343434 0 44%, #232323 0 44.5%, #343434 0 45.25%, #232323 0 45.5%, #343434 0 55%, #232323 0 55.25%, #343434 0 56%, #232323 0% 56.5%, #343434 0 57.25%, #232323 0 57.75%, #343434 0 58.25%, #fff0 0 100%), 
    linear-gradient(180deg, #fff0 0 6%, #888 0 6.5%, #363636 0 11%, #888 0 11.5%, #fff0 0 89.5%, #888 0 90%, #363636 0 94.35%, #888 0 95%, #fff0 0 100%);
  background-size: 6.55% 3%, 6.55% 3%, 6.55% 3%, 6.55% 3%, 6.55% 10%, 6.55% 10%, 6.55% 10%, 6.55% 9.7%, 0.75% 4%, 0.75% 4%, 0.75% 8%, 0.75% 8%, 0.75% 8%, 0.75% 8%, 0.75% 8%, 0.75% 8%, 0.75% 8%, 41.775% 15%, 41.775% 15%, 100% 100%, 100% 100%;
  background-repeat: no-repeat;
}















/* ENTER */
input#d-none ~ input[name=doors]:checked ~ input#d-look:checked ~ label[for=d-enter] {
  opacity: 1;
  border: 0.325vmin dashed #ffffffee;
  background: #0008;
  box-shadow: 0 0 0.5vmin 0.15vmin #fff8 inset, 0 0 0.225vmin 0.015vmin #0008;
}

input#d-none ~ input[name=doors]:checked ~ input#d-look:checked ~ input#d-enter:checked + label[for=d-enter]:before {
  content: "\21E3";
  padding-top: 0.75vmin;
}

input#d-none ~ input[name=doors]:checked ~ input#d-look:checked ~ input#d-enter + label[for=d-enter]:before {
  content: "\21E1";
  font-size: 4vmin;
  line-height: 4.125vmin;
  text-shadow: 0px 0px 1px #000, 0px 0px 1px #000;
  color: #fff;
  transition: all 0.5s ease 0s;
}

input#d-none ~ input[name=doors]:checked ~ label[for=d-enter]:hover {
  filter: invert(0) brightness(1.35);
}

input#d-none ~ input[name=doors]:checked ~ input#d-enter + label:hover:before {
  line-height: 2.65vmin !important;
  transition: all 0.5s ease 0s;
}

input#d-none ~ input[name=doors]:checked ~ input#d-enter:checked + label:hover:before {
  padding-top: 2.85vmin !important;
  transition: all 0.5s ease 0s;
}

label[for=d-enter]:hover span:after {
  top: -1.5vmin;
}













/*** INFO TAGS ***/
label[for=d-none]:hover span:before,
label[for=d-number]:hover span:before, 
label[for=d-look]:hover span:before, 
label[for=d-enter]:hover span:before,
label[for=d-options]:hover span:before,
a.reload:hover span:before {
  content: "CLOSE DOOR";
  background: #fff9;
  position: absolute;
  line-height: 1.15vmin;
  padding: 0.5vmin 0.65vmin 0.45vmin;
  top: -4.75vmin;
  color: #000;
  left: -1.75vmin;
  text-align: center;
  font-size: 1vmin;
  width: 7vmin;
  filter: invert(1);
}

label[for=d-none]:hover span:after, 
label[for=d-number]:hover span:after, 
label[for=d-look]:hover span:after, 
label[for=d-enter]:hover span:after,
label[for=d-options]:hover span:after,
a.reload:hover span:after {
  content: "";
  background: #0000;
  position: absolute;
  top: -1.5vmin;
  border: 1vmin solid #0000;
  border-top-color: #fff9;
  left: 1.5vmin;
  filter: invert(1);
}

a.reload:hover span:before {
  content: "RELOAD & TRY AGAIN";
}




label[for=d-none]:hover span:before {
  width: 5vmin;
  left: -1vmin;
}
input#d-none:checked + label[for=d-none]:hover span:before {
  content: "CHOOSE A DOOR";

}




label[for=d-number]:hover span:before {
  content: "LOOK AT THE NUMBERS";
}

input#d-number:checked + label[for=d-number]:hover span:before {
  content: "STOP LOOKING AND GO BACK";
  width: 8vmin;
  left: -2.4vmin;
}



label[for=d-look]:hover span:before {
  content: "LOOK INSIDE THE TUNNEL";
}

input#d-look:checked + label[for=d-look]:hover span:before {
  content: "GET OFF \A THE TUNNEL";
  white-space: pre-wrap;
}



label[for=d-options]:hover span:before {
  content: "SHOW OPTIONS";
  width: 5vmin;
  left: -0.75vmin;
}

input#d-options:checked + label[for=d-options]:hover span:before {
  content: "HIDE OPTIONS";
}





label[for=d-enter]:hover span:before {
  content: "ENTER THE ROOM";
  top: -5vmin;
}

input#d-enter:checked + label[for=d-enter]:hover span:before {
  content: "LEAVE THE ROOM";
}


label[for=d-enter]:hover span:after {
  top: -1.75vmin;
}





























/*** ENTER ***/
label[for=d-enter] {
  left: calc(50% + 20vmin);
  color: #fff;
  background: #00000080;
  line-height: 1vmin;
  padding-top: 0.725vmin;
  /*display: none;*/
}


label[for=d-enter]:before {
  content: "ENTER ROOM";
  position: absolute;
  width: 100%;
  top: 1.25vmin;
  left: 0;
  line-height: 1.25vmin;
}







input#d-look:checked ~ label[for=d-enter] {
  display: block;
}

input#d-number:checked ~ label[for=d-enter] {
  pointer-events: none;
  opacity: 0.5 !important;
}







/*GREEN TRAP*/
input#d-right:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room   {
  transform: translateZ(99vmin) rotateX(0.01deg) rotateY(-90.01deg);
  transition: transform 0.5s ease-in 0s !important;
}


/*RED TRAP*/
input#d-left:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room   {
  transform: translateZ(99vmin) rotateX(0.01deg) rotateY(90.01deg);
  transition: transform 0.5s ease-in 0s !important;
}


/*ORANGE TRAP*/
input#d-upper:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room   {
  transform: translateZ(99vmin) rotateX(-90.01deg) rotateY(-89.99deg);
  transition: transform 0.5s ease-in 0s !important;
  animation: orangeroom 3s ease 1s;
  animation-fill-mode: forwards;
}


/*WHITE TRAP*/
input#d-lower:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room   {
  transform: translateZ(99vmin) rotateX(90.01deg) rotateY(180.01deg);
  transition: transform 0.5s ease-in 0s !important;
  animation: whiteroom 3s ease 1s;
  animation-fill-mode: forwards;
}


/*FRONT TRAP*/
input#d-front:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room   {
  transform: translateZ(30vmin) rotateX(0.01deg) rotateY(180deg);
  transition: transform 0.5s ease-in 0s !important;
}
/*hide door*/
input#d-front:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room .front .door {
  opacity: 0;
}
/*special zoom*/
input#d-front:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room .side:nth-child(1) {
  border-color: #000;
  box-shadow: 0 0 50vmin 50vmin #000e inset, 0 0 50vmin 16vmin #000e inset;
}
input#d-front:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room .side.right,
input#d-front:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room .side.left, 
input#d-front:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room .side.upper,
input#d-front:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room .side.lower, 
input#d-front:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room > .side:nth-child(3), 
input#d-front:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room > .side:nth-child(4), 
input#d-front:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room > .side:nth-child(5), 
input#d-front:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room > .side:nth-child(6) {
  background: #000 !important;
  box-shadow: 0 0 5vmin 5vmin inset;
  border-color: #000;
}
input#d-front:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room .side.right .drawing,
input#d-front:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room .side.right .line,
input#d-front:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room .side.left .drawing,
input#d-front:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room .side.left .line,
input#d-front:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room .side.upper .drawing,
input#d-front:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room .side.upper .line,
input#d-front:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room .side.lower .drawing,
input#d-front:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room .side.lower .line {
  display: none;
}





.trap {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotateY(90deg) translate3d(0, 0, -55vmin);
  left: 0;
  top: 0;
  transition: none;
  opacity: 0;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.green {

}

input#d-right:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room  .green.trap {
  transform: rotateY(90deg) translate3d(0, 0, -1.5vmin)  rotateZ(180deg);
  opacity: 1;
  transition: transform 2s cubic-bezier(0.32, 0.3, 0.46, 0.04) 2s;
}


.red {
  --grid: #d1d1d188;
  --grid2: #343434a8;
  transform: rotateY(90deg) translate3d(0, 0, 65vmin);
  background: 
    repeating-linear-gradient(0deg, #fff0 0 45%, var(--grid) 0 48%, var(--grid2) 0 53%, #fff0 0 56%),
    repeating-linear-gradient(90deg, #fff0 0 45%, var(--grid) 0 48%, var(--grid2) 0 53%, #fff0 0 56%);
  background-repeat: repeat;
  background-size: 2% 2%;
  transition: all 0.4s ease 0s;
}
@keyframes bgs {
  0%, 99% {  background-color: #fff0; }
  99%, 100% {  background-color: #ff3425e6; --grid: red; --grid2: #9900004d; }
}




input#d-left:checked ~ input#d-enter:checked ~ .content > .cube.room  .red.trap {
  transform: rotateY(90deg) translate3d(0, 0, 1.5vmin);
  opacity: 1;
  transition: transform 2s cubic-bezier(0.32, 0.3, 0.46, 0.04) 2s;
  animation: bgs 0.5s ease 4s 1;
  animation-fill-mode: forwards;
}


.orange {
  transform: rotateX(0.01deg) rotateY(0.01deg) rotateZ(180.01deg) translate3d(-0.15vmin, 0, -50vmin);
}


input#d-upper:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room  .orange.trap {
  opacity: 1;
  transition: all 0s linear 2s;
}

input#d-upper:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room .orange.trap:after {
  position: absolute;
  width: 5%;
  height: 5%;
  left: 47.5%;
  top: 46.5%;
  background: #fff0;
  content: "";
  transform: translate3d(0, 0, 50.8vmin);
  z-index: 333;
  animation: go-orange 1s ease 4s 1;
  animation-fill-mode: forwards;
}


@keyframes bgo {
  0%, 99% {  background-color: #fff0; }
  99%, 100% {  background-color: #f31100ba; }
}



@keyframes go-orange {
  0%, 99% {  background-color: #fff0; }
  99%, 100% {  background-color: #ff9800d1; }
}




@keyframes go-green {
  0% { top: 0%; }
  20% { top: -20%; }
  40% { top: 20%; }
  60% { top: -20%; }
  80% { top: 20%; }
  100% { top: 0%; }
}




.green.trap:before, .green.trap:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #fff0 49%, #a4f546 50% , #fff0 51%);
}

.green.trap:after {
  transform: rotate(90deg);
}


input#d-right:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room .green.trap:before,
input#d-right:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room .green.trap:after {
  animation: go-green 3s ease 1s 1 alternate;
  animation-fill-mode: forwards;
}

input#d-right:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room .green.trap:after {
  animation-duration: 2s;
}








/*** ORANGE TRAP ***/
.orange.trap .cylinder {
  left: 49.15%;
  top: 38%;
  transform: translateZ(50vmin); /* !important */
  --depth: 100;
  --width: 0.5;
  --height: 0.5;
}

.orange.trap .cylinder .face {
  filter: brightness(1.5);
}

.orange.trap .cylinder:nth-child(odd) {
  --width: 0.4;
  --height: 0.4;
}

.orange.trap .cylinder:nth-child(odd) .face {
  filter: brightness(1.75);
}

/** checked en variable... **/
input#d-upper:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room .orange.trap .cylinder:nth-child(2) {
  left: 51%;
  top: 61%;
  animation: bar-front 2s ease-out 2.15s;
}

input#d-upper:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room .orange.trap .cylinder:nth-child(3) {
  left: 38.3%;
  top: 50.5%;
  animation: bar-front 2.5s ease-out 2.15s;
}

input#d-upper:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room .orange.trap .cylinder:nth-child(4) {
  left: 61.75%;
  top: 48.75%;
  animation: bar-front 1.75s ease-out 2.15s;
}

input#d-upper:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room .orange.trap .cylinder:nth-child(5) {
  left: 31%;
  top: 40.65%;
  animation: bar-front 1.85s ease-out 2.15s;
}

input#d-upper:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room .orange.trap .cylinder:nth-child(6) {
  left: 26.75%;
  top: 30.65%;
  animation: bar-front 2.25s ease-out 2.15s;
}

input#d-upper:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room .orange.trap .cylinder:nth-child(7) {
  left: 34.75%;
  top: 34.3%;
  animation: bar-front 2.15s ease-out 2.15s;
}

input#d-upper:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room .orange.trap .cylinder:nth-child(8) {
  left: 55.25%;
  top: 30.125%;
  animation: bar-front 2.45s ease-out 2.15s;
}

input#d-upper:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room .orange.trap .cylinder:nth-child(9) {
  left: 67.1%;
  top: 34.25%;
  animation: bar-front 1.9s ease-out 2.15s;
}

input#d-upper:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room .orange.trap .cylinder:nth-child(10) {
  left: 68.8%;
  top: 41.15%;
  animation: bar-front 2.1s ease-out 2.15s;
}

input#d-upper:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room .orange.trap .cylinder:nth-child(11) {
  left: 76.5%;
  top: 60.025%;
  animation: bar-front 2.2s ease-out 2.15s;
}

input#d-upper:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room .orange.trap .cylinder:nth-child(12) {
  left: 65.35%;
  top: 64.75%;
  animation: bar-front 2.25s ease-out 2.15s;
}

input#d-upper:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room .orange.trap .cylinder:nth-child(13) {
  left: 42.85%;
  top: 63.65%;
  animation: bar-front 2s ease-out 2.15s;
}

input#d-upper:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room .orange.trap .cylinder:nth-child(14) {
  left: 30.65%;
  top: 69.15%;
  animation: bar-front 1.9s ease-out 2.15s;
}

input#d-upper:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room .orange.trap .cylinder:nth-child(15) {
  left: 28.1%;
  top: 59.5%;
  animation: bar-front 2.1s ease-out 2.15s;
}

/*** vertical ***/
input#d-upper:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room .orange.trap .cylinder:nth-child(16) {
  left: 55%;
  top: 50%;
  transform: translateZ(20vmin) rotateX(90deg);
  animation: bar-vertical 1.5s ease-out 1s;
}
input#d-upper:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room .orange.trap .cylinder:nth-child(17) {
  left: 40%;
  top: 50%;
  transform: translateZ(15vmin) rotateX(90deg);
  animation: bar-vertical 1.25s ease-out 1s;
}
input#d-upper:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room .orange.trap .cylinder:nth-child(18) {
  left: 35%;
  top: 50%;
  transform: translateZ(5vmin ) rotateX(90deg);
  animation: bar-vertical 1.75s ease-out 1s;
}
input#d-upper:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room .orange.trap .cylinder:nth-child(19) {
  left: 70%;
  top: 50%;
  transform: translateZ(10vmin) rotateX(90deg);
  animation: bar-vertical 1.5s ease-out 1s;
}
input#d-upper:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room .orange.trap .cylinder:nth-child(20) {
  left: 63%;
  top: 50%;
  transform: translateZ(20vmin) rotateX(90deg);
  animation: bar-vertical 1.65s ease-out 1s;
}
/* vertical 2 */
input#d-upper:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room .orange.trap .cylinder:nth-child(21) {
  left: 47%;
  top: 50%;
  transform: translateZ(20vmin) rotateX(90deg);
  animation: bar-vertical2 1.65s ease-out 2s;
}
input#d-upper:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room .orange.trap .cylinder:nth-child(22) {
  left: 59.5%;
  top: 50%;
  transform: translateZ(12vmin) rotateX(90deg);
  animation: bar-vertical2 1.75s ease-out 2s;
}
input#d-upper:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room .orange.trap .cylinder:nth-child(23) {
  left: 27%;
  top: 50%;
  transform: translateZ(2vmin) rotateX(90deg);
  animation: bar-vertical2 1.45s ease-out 2s;
}
input#d-upper:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room .orange.trap .cylinder:nth-child(24) {
  left: 42%;
  top: 50%;
  transform: translateZ(5vmin) rotateX(90deg);
  animation: bar-vertical2 1.4s ease-out 2s;
}
input#d-upper:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room .orange.trap .cylinder:nth-child(25) {
  left: 51%;
  top: 50%;
  transform: translateZ(34vmin) rotateX(90deg);
  animation: bar-vertical2 1.55s ease-out 2s;
}

/*** horizontal ***/
input#d-upper:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room .orange.trap .cylinder:nth-child(26) {
  left: 35%;
  top: 47%;
  transform: translateZ(25vmin) rotateY(90deg);
  animation: bar-horizontal 1.25s ease-out 1.5s;
}
input#d-upper:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room .orange.trap .cylinder:nth-child(27) {
  left: 50%;
  top: 55%;
  transform: translateZ(4vmin) rotateY(90deg);
  animation: bar-horizontal 1.5s ease-out 1.5s;
}
input#d-upper:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room .orange.trap .cylinder:nth-child(28) {
  left: 50%;
  top: 65%;
  transform: translateZ(12vmin) rotateY(90deg);
  animation: bar-horizontal 1s ease-out 1.5s;
}
input#d-upper:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room .orange.trap .cylinder:nth-child(29) {
  left: 50%;
  top: 49.75%;
  transform: translateZ(50vmin) rotateY(90deg);
  animation: bar-horizontal 2.5s ease-out 1.5s;
}
input#d-upper:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room .orange.trap .cylinder:nth-child(30) {
  left: 50%;
  top: 35%;
  transform: translateZ(7vmin) rotateY(90deg);
  animation: bar-horizontal 1.35s ease-out 1.5s;
}
/*** horizontal 2 ***/
input#d-upper:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room .orange.trap .cylinder:nth-child(31) {
  left: 50%;
  top: 43.5%;
  transform: translateZ(9vmin) rotateY(90deg);
  animation: bar-horizontal2 1.75s ease-out 2s;
}
input#d-upper:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room .orange.trap .cylinder:nth-child(32) {
  left: 50%;
  top: 36%;
  transform: translateZ(20vmin) rotateY(90deg);
  animation: bar-horizontal2 1.65s ease-out 2s;
}
input#d-upper:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room .orange.trap .cylinder:nth-child(33) {
  left: 50%;
  top: 45%;
  transform: translateZ(32vmin) rotateY(90deg);
  animation: bar-horizontal2 1.75s ease-out 2s;
}
input#d-upper:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room .orange.trap .cylinder:nth-child(34) {
  left: 50%;
  top: 47%;
  transform: translateZ(3vmin) rotateY(90deg);
  animation: bar-horizontal2 1.45s ease-out 2s;
}
input#d-upper:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room .orange.trap .cylinder:nth-child(35) {
  left: 50%;
  top: 62%;
  transform: translateZ(2vmin) rotateY(90deg);
  animation: bar-horizontal2 1.5s ease-out 2s;
}

input#d-upper:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .cube.room .orange.trap .cylinder:nth-child(36) {
  left: 49.9%;
  top: 49.85%;
  animation: bar-front-end 3s ease-out 2.15s;
}


.orange.trap .cylinder:nth-child(29) .face {
  opacity: 0.5;
}

.orange.trap .cylinder:nth-child(36) .face {
  opacity: 0.6;
}



/** puntas **/
.orange.trap .cylinder .face:nth-child(1),
.orange.trap .cylinder .face:nth-child(2) {
  background: conic-gradient(from 0deg, #333, #ccc);
}

.orange.trap .cylinder:nth-child(36) .face:nth-child(1) {
  opacity: 1;
}




@keyframes bar-front {
  0% { transform: translateZ(-50vmin); }
  100% { transform: translateZ(50vmin); }
}
@keyframes bar-vertical {
  0% { top: -50%; }
  100% { top: inherit; }
}
@keyframes bar-vertical2 {
  0% { top: 150%; }
  100% { top: 50%; }
}
@keyframes bar-horizontal {
  0% { left: -50%; }
  100% { left: inherit; }
}
@keyframes bar-horizontal2 {
  0% { left: 150%; }
  100% { left: 50%; }
}
@keyframes bar-front-end {
  0% { transform: translateZ(-50vmin); }
  100% { transform: translateZ(25vmin); }
}



/* orange faces */
/*
.orange.trap .cylinder .face:nth-of-type(3), 
.orange.trap .cylinder .face:nth-of-type(4),
.orange.trap .cylinder .face:nth-of-type(5), 
.orange.trap .cylinder .face:nth-of-type(6) {
background: blue;
}
.orange.trap .cylinder .face:nth-of-type(7), 
.orange.trap .cylinder .face:nth-of-type(8),
.orange.trap .cylinder .face:nth-of-type(9), 
.orange.trap .cylinder .face:nth-of-type(10) {
background: green;
}
*/










/* disable labels*/

.disable {
  background: repeating-linear-gradient(45deg, #0006 0 2px, #fff4 0 6px);
  position: absolute;
  width: 5vmin;
  height: 5vmin;
  cursor: not-allowed;
  z-index: 1;
  display: none;
  bottom: 6vmin;
}

#h-enter {
  left: calc(50% + 20vmin);
}
#h-number {
  left: calc(50% + 14.5vmin);
}
#h-look {
  left: calc(50% + 9vmin);
}
#h-right {
  left: calc(50% + 3.5vmin);
}
#h-front {
  left: calc(50% - 2vmin);
}
#h-left {
  left: calc(50% - 7.5vmin);
}
#h-none {
  left: calc(50% - 13vmin);
}
#h-upper {
  bottom: 11.5vmin;
  left: calc(50% - 2vmin);
}
#h-lower {
  bottom: 0.5vmin;
  left: calc(50% - 2vmin);
}
#h-options {
  left: calc(50% - 18.5vmin);
}



input#d-enter:checked ~ #h-number, input#d-enter:checked ~ #h-look, input#d-enter:checked ~ #h-right, input#d-enter:checked ~ #h-front, input#d-enter:checked ~ #h-left, input#d-enter:checked ~ #h-upper, input#d-enter:checked ~ #h-lower, input#d-enter:checked ~ #h-none, input#d-number:checked ~ #h-enter, input#d-number:checked ~ #h-look, input#d-number:checked ~ #h-right, input#d-number:checked ~ #h-front, input#d-number:checked ~ #h-left, input#d-number:checked ~ #h-upper, input#d-number:checked ~ #h-lower, input#d-number:checked ~ #h-none, input#d-look:checked ~ #h-none, input#d-look:checked ~ #h-options, input#d-none ~ input[name=doors]:checked ~ input#d-look:checked ~ input#d-enter:checked ~ #h-number, input#d-none ~ input[name=doors]:checked ~ input#d-look:checked ~ input#d-number:checked ~ #h-enter {
  display: block;
}




/*** HIDE GRID ***/

input#d-none ~ input[name=doors]:checked ~ input#d-look:checked ~ #h-number,
input#d-none ~ input[name=doors]:checked ~ input#d-look:checked ~ #h-enter,
input#d-none ~ input[name=doors]:checked ~ input#d-look:checked ~ input#d-enter:checked ~ #h-enter {
  display: none;
}















/*** DEAD ***/
@keyframes dead {
  0%, 100% { visibility: visible;  }
}
@keyframes capar {
  0%, 100% { pointer-events: none;  }
}

input#d-enter:checked ~ #h-enter {
  display: block !important;
  visibility: hidden;
  animation: dead 1s linear 4s;
  animation-fill-mode: forwards;
}

input#d-enter:checked ~ label[for=d-enter] {
  animation: capar 1s linear 4s;
  animation-fill-mode: forwards;
}








/*** RELOAD ***/

input#d-enter:checked ~ a.reload {
  animation: dead 1s linear 4s;
  animation-fill-mode: forwards;
}
input#d-front:checked ~ input#d-enter:checked ~ a.reload,
input#d-lower:checked ~ input#d-enter:checked ~ a.reload,
input#d-front:checked ~ input#d-enter:checked ~ #h-enter,
input#d-lower:checked ~ input#d-enter:checked ~ #h-enter ,
input#d-front:checked ~ input#d-enter:checked ~ label[for=d-enter],
input#d-lower:checked ~ input#d-enter:checked ~ label[for=d-enter] {
  animation: none;
}

a.reload {
  position: absolute;
  background: #0008;
  width: 5vmin;
  height: 5vmin;
  bottom: 6vmin;
  left: calc(50% - 24vmin);
  visibility: hidden;
}

a.reload:before {
  content: "";
  width: 2.5vmin;
  height: 2.5vmin;
  position: absolute;
  top: 0.75vmin;
  left: 0.75vmin;
  border: 0.5vmin solid #fff;
  border-radius: 100%;
  border-right-color: #fff0;
  transition: all 0.4s ease 0s;
  border-left-color: #fff0;
}


a.reload:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: conic-gradient(from 45deg at 0% 100%, #fff 0 12.5%, #fff0 0 100%) 15% 30%, conic-gradient(from -135deg at 100% 0%, #fff 0 12.5%, #fff0 0 100%) 40% 70%;
  background-size: 1.2vmin 1.2vmin, 1.1vmin 1.1vmin;
  background-repeat: no-repeat;
  background-position: 70% 20%, 25% 76%;
  transition: all 0.4s ease 0s;
}

a.reload:hover:before, a.reload:hover:after {
  transform: rotate(180deg);
  transition: all 0.4s ease 0s;
}


input#d-enter:checked ~ a.reload:before,
input#d-enter:checked ~ a.reload:after {
  animation: reload 2s linear 6s 1;
}







/** TRAPIS FRONT DOOR GEAR **/
input#d-front:checked ~ input#d-look:checked ~ .content .cube .front .tunnel .side:nth-child(3) span,
input#d-front:checked ~ input#d-look:checked ~ .content .cube .front .tunnel .side:nth-child(4) span {
  position: absolute;
  left: 100%;
  top: 0%;
  height: 100%;
  width: 10%;
  background: linear-gradient(-90deg, #101010 0 22%, #fff0 0 100%), linear-gradient(-15deg, #fff0 0 19.5%, #343434 0 20%, #fff0 0 38.25%, #343434 0 38.5%, #fff0 0 57.25%, #343434 0 57.75%, #fff0 0 76.5%, #343434 0 77%, #fff0 0 95.6%, #343434 0 96%, #fff0 0 100%), #101010;
  border: 1px solid #000;
  clip-path: polygon(80% 0%, 0% 5%, 0% 15%, 80% 19.5%, 80% 20.5%, 0% 25%, 0% 35%, 80% 39.5%, 80% 40.5%, 0% 45%, 0% 55%, 80% 59.5%, 80% 60.5%, 0% 65%, 0% 75%, 80% 79.5%, 80% 80.5%, 0% 85%, 0% 95%, 80% 100%, 100% 100%, 100% 0%);
  border-left-color: #343434;
  border-top-color: #fff0;
  border-bottom-color: #fff0;
  transform: translate3d(-1vmin, 0, -1px) rotateY(180deg);
}

input#d-front:checked ~ input#d-look:checked ~ .content .cube .front .tunnel .side:nth-child(4) span {
  transform: translate3d(-2vmin, 0, -2px) rotateY(0DEG);
  left: 0%;
}









input#d-front:checked ~ input#d-look:checked ~ .content .cube .front .tunnel .side:nth-child(5) span,
input#d-front:checked ~ input#d-look:checked ~ .content .cube .front .tunnel .side:nth-child(6) span {
  position: absolute;
  left: 100%;
  top: 0%;
  height: 100%;
  width: 10%;
  background: linear-gradient(-90deg, #101010 0 22%, #fff0 0 100%), linear-gradient(-15deg, #fff0 0 19.5%, #343434 0 20%, #fff0 0 38.25%, #343434 0 38.5%, #fff0 0 57.25%, #343434 0 57.75%, #fff0 0 76.5%, #343434 0 77%, #fff0 0 95.6%, #343434 0 96%, #fff0 0 100%), #101010;
  border: 1px solid #000;
  clip-path: polygon(80% 0%, 0% 5%, 0% 15%, 80% 19.5%, 80% 20.5%, 0% 25%, 0% 35%, 80% 39.5%, 80% 40.5%, 0% 45%, 0% 55%, 80% 59.5%, 80% 60.5%, 0% 65%, 0% 75%, 80% 79.5%, 80% 80.5%, 0% 85%, 0% 95%, 80% 100%, 100% 100%, 100% 0%);
  border-left-color: #343434;
  border-top-color: #fff0;
  border-bottom-color: #fff0;
  transform: translate3d(-1vmin, 0, -1px) rotateY(180deg);

  background: 
    linear-gradient(0deg, #101010 0 22%, #fff0 0 100%),
    linear-gradient(70deg,
      #fff0 0 14.75%, #343434 0 15%,
      #fff0 0 34.25%, #343434 0 34.5%,
      #fff0 0 53.25%, #343434 0 53.75%,
      #fff0 0 72.6%, #343434 0 73%,
      #fff0 0 91.6%, #343434 0 92%,
      #fff0 0 100%),
    #101010;
  border: 1px solid #000;
  border-top-color:  #343434;
  clip-path: polygon(0% 75%, 5% 75%, 9% 0%, 11% 0%, 15% 75%, 25% 75%, 29% 0%, 31% 0%, 35% 75%, 45% 75%, 49% 0%, 51% 0%, 55% 75%, 65% 75%, 69% 0%, 71% 0%, 75% 75%, 85% 75%, 89% 0%, 91% 0%, 95% 75%, 100% 75%, 100% 100%, 0% 100%);
  transform: translate3d(0vmin, 4.5vmin, 0.1vmin) rotateX(180deg);
  width: 100%;
  content: "";
  position: absolute;
  height: 10%;
  left: 0%;
  top: 82%;
}


input#d-front:checked ~ input#d-look:checked ~ .content .cube .front .tunnel .side:nth-child(6) span {
  transform: translate3d(0vmin, 4.35vmin, -0.1vmin) rotateX(180deg);
}


/*front door void*/
input#d-front:checked ~input#d-enter + label[for=d-enter]:hover span:before {
  content: "LOOK OUTSIDE";
  content: "TAKE A LOOK OUTSIDE";
}
input#d-front:checked ~input#d-enter:checked + label[for=d-enter]:hover span:before {
  content: "THERE IS A VOID UNTIL THE EXIT...";
  content: "CAN'T REACH THE EXIT...";
  width: 8.5vmin;
  left: -2.75vmin;
}














@keyframes whiteroom {
  0%, 50% { transform: translateZ(99vmin) rotateX(90.01deg) rotateY(180.01deg); }
  50%, 100% { transform: translateZ(99vmin) rotateX(180.01deg) rotateY(180.01deg); }
}

@keyframes orangeroom {
  0%, 50% { transform: translateZ(99vmin) rotateX(-90.01deg) rotateY(-180.01deg); }
  50%, 100% { transform: translateZ(99vmin) rotateX(-180.01deg) rotateY(-180.01deg); }
}



















/*** OPTIONS ***/
input#d-options + label {
  left: calc(50% - 2vmin);
  background: linear-gradient( 45deg, #888b, #888b, #fff, #999c, #999c);
  background-size: 200% 200%;
  background-position: 100% 50%;
  transition: all 0.4s ease 0s;
  animation: start 3.5s ease 0.5s;
}

input#d-options + label:hover {
  opacity: 0.9;
  background-position: 0% 50%;
  transition: all 0.4s ease 0s;
}

input#d-options:checked + label {
  left: calc(50% - 18.5vmin);
  transition: left 0.25s ease 0s;
  opacity: 0.65;
}
input#d-options:checked + label:hover {
  opacity: 0.85;
}

input#d-options + label ~ label, 
input#d-options + label ~ .disable {
  transform: translateY(20vmin);
  transition: all 0.5s ease 0s;
}
input#d-options:checked + label ~ label ,
input#d-options:checked + label ~ .disable {
  transform: translateY(0vmin);
  transition: all 0.5s ease 0s;
}




input#d-options + label:before {
  position: absolute;
  width: 3.5vmin;
  height: 3.5vmin;
  top: 0.6vmin;
  left: 0.6vmin;
  background: conic-gradient(
    from 10deg at 50% 50%, 
    #000 0 7.14%, #0000 0 14.28%,
    #000 0 21.42%, #0000 0 28.57%,
    #000 0 35.71%, #0000 0 42.85%, 
    #000 0 50%, #0000 0 57.14%, 
    #000 0 64.28%, #0000 0 71.42%, 
    #000 0 78.57%, #0000 0 85.71%, 
    #000 0 92.85%, #0000 0 100%
  );
  border-radius: 100%;
  content: "";
  filter:drop-shadow();
  filter: drop-shadow(0px 0px 1px black);
}


input#d-options + label:after {
  position: absolute;
  width: 2.75vmin;
  height: 2.75vmin;
  top: 0.92vmin;
  left: 0.92vmin;
  background: radial-gradient(circle at 50% 50%, #ddd 0 15%, #000 20% 70%, #fff0 75% 100%);
  border-radius: 100%;
  content: "";
}

input#d-options + label:hover:before {
  transition: all 0.5s ease 0s;
  transform: rotate(102deg);
}





@keyframes gameover {
  0% { opacity: 0; }
  100% { opacity: 1;}
}







/* MERDE */
input#d-upper:checked ~ input#d-enter:checked ~ .content:after,
input#d-left:checked ~ input#d-enter:checked ~ .content:after,
input#d-right:checked ~ input#d-enter:checked ~ .content:after {
  content: "MERDE";
  transform: translate3d(1.5vmin, -6.015vmin, 15vmin);
  font-size: 11.8vmin;
  color: #d37e00cc;
  font-weight: bold;
  opacity: 0;
  position: absolute; 
  animation: gameover 0s ease 4.1s;
  animation-fill-mode: forwards;
}


input#d-left:checked ~ input#d-enter:checked ~ .content:after {
  color: #cf000085;
}

input#d-right:checked ~ input#d-enter:checked ~ .content:after {
  color: #63b306cf;
}


input#d-upper:checked ~ input#d-enter:checked ~ .content:before,
input#d-left:checked ~ input#d-enter:checked ~ .content:before,
input#d-right:checked ~ input#d-enter:checked ~ .content:before {
  content: "you have been pierced by several pointed spears...";
  transform: translate3d(0.5vmin, 8.015vmin, 15vmin);
  font-size: 3.4vmin;
  text-transform: uppercase;
  color: #d37e00cc;
  font-weight: bold;
  position: absolute;
  opacity: 0;
  z-index: 1;
  max-width: 40vmin;
  text-align: center;
  animation: gameover 0s ease 4.1s;
  animation-fill-mode: forwards;
}

input#d-left:checked ~ input#d-enter:checked ~ .content:before {
  content: "you have been \A cut in squares with \A a sharp metal grill...";
  color: #cf000085;
  max-width: 45vmin;
  white-space: pre-wrap;
}

input#d-right:checked ~ input#d-enter:checked ~ .content:before {
  content: "you have been butchered in four pieces with lasers...";
  color: #63b306cf;
}





.room > .side:nth-of-type(1):after {
  content: "";
  width: 20vmin;
  height: 20vmin;
  position: absolute;
  left: calc(50% - 10vmin);
  top: calc(50% - 10vmin);
  border: 3vmin solid #fff0;
  box-sizing: border-box;
  opacity: 0;
}

input#d-front:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .room > .side:nth-of-type(1):before {
  opacity: 1;
  content: "\0043 \0052 \0045 \0041 \0054 \0045 \0044  \0042 \0059";
  transform: rotateY(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 1.2vmin;
  color: #607d8b99;
  text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 3px #fff;
}


input#d-front:checked ~ input#d-look:checked ~ input#d-enter:checked ~ .content > .room > .side:nth-of-type(1):after {
  opacity: 1;
  content: "\2022   \0043 \0055 \0042 \0045   \2022 \A \004A \004F \0053 \0045 \0054 \0058 \0055 ";
  transform: rotateY(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 2vmin;
  line-height: 6vmin;
  color: #0000003b;
  white-space: pre-wrap;
  text-shadow:  0 0 4px #38acff80;
}


.side.front .cube.tunnel:before, .side.front .cube.tunnel:after {
  transform: rotateY(-89.5deg) rotateZ(-12deg) translate(-2.3vmin, -3.05vmin);
  position: absolute;
  color: #fff2;
  transform-origin: right center;
  width: 100%;
  bottom: 2vmin;
  font-size: 0.35vmin;
  text-align: center;
  white-space: pre-wrap;
  content: "\004A \004F \0053 \0045 \0054 \0058 \0055 \A \0057 \0041 \0053  \0048 \0045 \0052 \0045";
  text-shadow: 0 0px 1px #fff2, 0 0 3px #fff6;
}

.side.front .cube.tunnel:after {
  transform: rotateY(89deg) rotateZ(-20deg) translate(3.5vmin, -1.05vmin);
  color: #fff2;
  transform-origin: left center;
  bottom: -3.75vmin;
  font-size: 0.4vmin;
  text-align: center;
  content: "\004A \004F \0053 \0045 \0054 \0058 \0055 \A \0057 \0041 \0053 \0048 \0045 \0052 \0045";
  text-shadow: 0 0px 1px #fff2, 0 0 3px #fff6;
  content: "            \0065 =\006D \0063 \00B2 \A \0068 \00B2 =\0061 \00B2 +\0062 \00B2 \A \2231 (\006E )=\006E \00B2 +\006E +\0034 \0031 \A      \221B \222E \2248 \2230";
  line-height: 0.5vmin;
}










a.by {
  text-decoration: none;
  position: absolute;
  right: 1vmin;
  bottom: 1vmin;
  font-size: 12px;
  color: #fff8;
  text-shadow: 0px -1px 1px #0008;
  text-align: center;
  z-index: 333333;
  padding: 0.5vmin;
  max-width: 70px;
  background: linear-gradient(90deg, #0008 50%, #fff 50%);
  background-position: left center;
  background-size: 200% 100%;
  border-radius: 2px;
  transition: all 0.5s ease 0s;
}

a.by:hover {
  color: #f60;
  text-shadow: 0px -1px 1px #0004;
  background-position: right center;
  transition: all 0.5s ease 0s;
}

a.by:before {
  content: "CREATED BY";
  font-size: 8px;
  color: #fff8;
  text-shadow: 0px -1px 1px #0008;
  text-align: center;
  width: 100%;
  float: left;
  margin-bottom: 2px;
  transition: all 0.5s ease 0s;
}

a.by:after {
  content: "";
  position: absolute;
  width: 40px;
  height: 40px;
  background: url(https://assets.codepen.io/256997/internal/avatars/users/default.png?width=40);
  top: -0.35vmin;
  right: -10vmin;
  border-radius: 2px;
  transition: right 0.5s ease 0s;
  transition: all 0.5s ease 0s;
}

a.by:hover:after {
  right: 8.5vmin;
  transition: right 0.5s ease 0s;
}

a.by:hover:before {
  color: #444;
  transition: all 0.5s ease 0s;
}








/***FINAL MOVE***/
/*
@keyframes moving {
  0% { transform: scale(1) translate3d(0, 0, 0); }
  25% { transform: scale(1.005) translate3d(-0.25vmin, 0.25vmin, 0); }
  50% { transform: scale(1.01) translate3d(0, 0, 0); }
  75% { transform: scale(1.005) translate3d(0.25vmin, -0.25vmin, 0); }
  100% { transform: scale(1) translate3d(0, 0, 0); }
}

.content {  animation: moving 0.15s ease 6s 25 alternate; }*/









/*** RELOAD ***/
@keyframes reload {
  0%  { transform: rotate(0deg); }
  33%,
  66%  { transform: rotate(180deg); }  
  100% { transform: rotate(360deg); }
}



/*** START ***/

@keyframes start {
  0%, 50%, 100%  { opacity: 0.5; background-position: 100% 50%; transform: scale(1); }
  25%, 75%  { opacity: 0.99; background-position: 0% 50%; transform: scale(1.25); filter: invert(1);}
}


/*

Copyright (c) 2023 by Josetxu  (https://codepen.io/josetxu/pen/PodPWaK)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

*/