Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Powered by Algolia
About Packages

Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML 

              
                <div>
  <input type="radio" id="ilift1" title="lift1" class="liftmove ilower" name="liftup" />Lift 1
  <input type="radio" id="ilift2" title="lift2" class="liftmove iupper" name="liftup" />Lift 2
  <input type="radio" id="ilift3" title="lift3" class="liftmove ilower" name="liftup" />Lift 3
  <input type="radio" id="ilift4" title="lift4" class="liftmove ilower" name="liftup" />Lift 4
  <input type="radio" id="ilift5" title="lift5" class="liftmove iupper" name="liftup" />Lift 5
  <input type="radio" id="ilift6" title="lift6" class="liftmove ilower" name="liftup" />Lift 6
  <input type="radio" id="ilift7" title="lift7" class="liftmove ilower" name="liftup" />Lift 7

  <input type="radio" id="iliftup" title="liftup" class="liftmove ilower d-none" name="liftup" checked />

  <br />

  <input type="checkbox" id="top-view" />Top view
  <input type="checkbox" id="bottom-floor" />Bottom floor

  <input type="radio" name="gfx" id="gfx1" class="d-none" />
  <input type="radio" name="gfx" id="gfx2" checked class="d-none" />
  <input type="radio" name="num" id="numon" checked class="d-none" />
  <input type="radio" name="num" id="numoff" class="d-none" />

  <input type="radio" id="win" name="x" class="d-none" />

  <br />

  <input type="radio" id="z-1" name="room" title="z-1" />Z-1
  <input type="radio" id="z-2" name="room" title="z-2" checked />Z-2
  <input type="radio" id="z-3" name="room" title="z-3" />Z-3
  <input type="radio" id="z-4" name="room" title="z-4" />Z-4
  <input type="radio" id="z-5" name="room" title="z-5" />Z-5
  <input type="radio" id="z-6" name="room" title="z-6" />Z-6

  <br />

  <input type="radio" id="x-1" name="x" title="x-1" />X-1
  <input type="radio" id="x-2" name="x" title="x-2" />X-2
  <input type="radio" id="x-3" name="x" title="x-3" checked />X-3
  <input type="radio" id="x-4" name="x" title="x-4" />X-4
  <input type="radio" id="x-5" name="x" title="x-5" />X-5
  <input type="radio" id="x-6" name="x" title="x-6" />X-6
  <input type="radio" id="x-7" name="x" title="x-7" />X-7

  <input type="radio" id="original" checked name="rotate" class="d-none" />

  <br />

  <input type="radio" id="left1" name="rotate" class="x-rotation" />L-1
  <input type="radio" id="left2" name="rotate" class="z-rotation" />L-2
  <input type="radio" id="left3" name="rotate" class="x-rotation" />L-3
  <input type="radio" id="left4" name="rotate" class="z-rotation" />L-4

  <br />

  <input type="radio" id="right1" name="rotate" class="x-rotation" />R-1
  <input type="radio" id="right2" name="rotate" class="z-rotation" />R-2
  <input type="radio" id="right3" name="rotate" class="x-rotation" />R-3
  <input type="radio" id="right4" name="rotate" class="z-rotation" />R-4

  <content>
    <w>

      <x>

        <y>

          <z>

            <darkness>
              <u></u> <u></u> <u></u> <u></u> <u></u>
            </darkness>
            <darkness>
              <u></u> <u></u> <u></u> <u></u> <u></u><u></u>
            </darkness>

            <room>1</room>
            <room>2</room>

            <room class="lift lower">

              <lift id="lift1">
                <label for="ilift1"></label>
                <floor></floor>
                <floor></floor>
              </lift>
            </room>

            <room class="lift upper">

              <lift id="lift2">

                <label for="ilift2"></label>
                <floor></floor>
                <floor></floor>
              </lift>
            </room>
            <room>5</room>
            <room>6</room>
            <room>7</room>
            <room>8</room>
            <room>9</room>
            <room>10</room>
            <room>11</room>
            <room>12</room>

            <room class="lift lower">

              <lift id="lift3">
                <label for="ilift3"></label>
                <floor></floor>
                <floor></floor>
              </lift>
            </room>
            <room>14</room>
            <room>15</room>
            <room>16</room>
            <room>17</room>

            <room class="lift lower">

              <lift id="lift4">

                <label for="ilift4"></label>
                <floor></floor>
                <floor></floor>
              </lift>
            </room>
            <room>19</room>
            <room>20</room>
            <room>21</room>
            <room>22</room>
            <room>23</room>
            <room>24</room>
            <room>25</room>
            <room>26</room>

            <room class="lift upper">

              <lift id="lift5">

                <label for="ilift5"></label>
                <floor></floor>
                <floor></floor>
              </lift>
            </room>
            <room>28</room>
            <room>29</room>
            <room>30</room>
            <room>31</room>

            <room class="lift lower">

              <lift id="lift6">

                <label for="ilift6"></label>

                <floor></floor>
                <floor></floor>
              </lift>
            </room>

            <room>33</room>

            <room class="lift lower">

              <lift id="lift7">

                <label for="ilift7"></label>
                <floor></floor>
                <floor></floor>
              </lift>
            </room>
            <room>35</room>
            <room>36</room>
            <room>37</room>
            <room>38</room>
            <room>39</room>
            <room>40</room>
            <room>41</room>
            <room>42</room>
          </z>

          <z>

            <room>1</room>
            <room>2</room>
            <room class="lift"></room>
            <room class="lift"></room>
            <room>5</room>
            <room>6</room>
            <room>7</room>
            <room>8</room>
            <room>9</room>
            <room>10</room>
            <room>11</room>
            <room>12</room>
            <room class="lift"></room>
            <room>14</room>
            <room>15</room>
            <room>16</room>
            <room>17</room>
            <room class="lift"></room>
            <room>19</room>
            <room>20</room>
            <room>21</room>
            <room>22</room>
            <room>23</room>
            <room>24</room>
            <room>25</room>
            <room>26</room>
            <room class="lift"></room>
            <room>28</room>
            <room>29</room>
            <room>30</room>
            <room>31</room>
            <room class="lift"></room>
            <room>33</room>
            <room class="lift"></room>
            <room>35</room>
            <room>36</room>
            <room>37</room>
            <room>38</room>
            <room>39</room>
            <room>40</room>
            <room>41</room>
            <room>42</room>
          </z>
        </y>
      </x>
    </w>

    <win>
      <u><u></u></u>
      <u><u></u></u>
      <u><u></u></u>
      <u><u></u></u>
      <u><u></u></u>
      <u><u></u></u>
      <u><u></u></u>
      <u><u></u></u>
      <u><u></u></u>
      <u><u></u></u>
      <u><u></u></u>
      <u><u></u></u>
    </win>
  </content>

  <wintext>
    <div class="badge">
      <div></div>
    </div>
    <h1>Well Done!</h1>
    <h3>You have solved the maze :)</h3>
    <h4>Today is a good day.</h4>
    <div class="button">
      <label id="wintest" for="x-2">Return?</label>
    </div>
  </wintext>

  <buttons>

    <!--x-->
    <label class="upb bx dead" for="x-0"></label>
    <label class="upb bx" for="x-1"></label>
    <label class="upb bx" for="x-2"></label>
    <label class="upb bx" for="x-3"></label>
    <label class="upb bx" for="x-4"></label>
    <label class="upb bx" for="x-5"></label>
    <label class="upb bx" for="x-6"></label>
    <label class="upb bx" for="x-7"></label>
    <label class="upb bx dead" for="x-8"></label>

    <label class="upb bx" for="win"></label>

    <!--z-->
    <label class="upb bz dead" for="z-0"></label>
    <label class="upb bz" for="z-1"></label>
    <label class="upb bz" for="z-2"></label>
    <label class="upb bz" for="z-3"></label>
    <label class="upb bz" for="z-4"></label>
    <label class="upb bz" for="z-5"></label>
    <label class="upb bz" for="z-6"></label>
    <label class="upb bz dead" for="z-7"></label>

    <label class="leftb lb1" for="left1"></label>
    <label class="leftb lb2" for="left2"></label>
    <label class="leftb lb3" for="left3"></label>
    <label class="leftb lb4" for="left4"></label>

    <label class="leftb lb5" for="right1"></label>
    <label class="leftb lb6" for="right2"></label>

    <!--z-->
    <label class="downb bz dead" for="z-0"></label>
    <label class="downb bz" for="z-1"></label>
    <label class="downb bz" for="z-2"></label>
    <label class="downb bz" for="z-3"></label>
    <label class="downb bz" for="z-4"></label>
    <label class="downb bz" for="z-5"></label>
    <label class="downb bz" for="z-6"></label>
    <label class="downb bz dead" for="z-7"></label>

    <!--x-->
    <label class="downb bx dead" for="x-0"></label>
    <label class="downb bx" for="x-1"></label>
    <label class="downb bx" for="x-2"></label>
    <label class="downb bx" for="x-3"></label>
    <label class="downb bx" for="x-4"></label>
    <label class="downb bx" for="x-5"></label>
    <label class="downb bx" for="x-6"></label>
    <label class="downb bx" for="x-7"></label>
    <label class="downb bx dead" for="x-8"></label>

    <label class="rightb rb1" for="right1"></label>
    <label class="rightb rb2" for="right2"></label>
    <label class="rightb rb3" for="right3"></label>
    <label class="rightb rb4" for="right4"></label>

    <label class="rightb rb5" for="left1"></label>
    <label class="rightb rb6" for="left2"></label>
  </buttons>

  <graphics>
    <label for="gfx2">Graphics: Low</label>
    <label for="gfx1">Graphics: High</label>
  </graphics>
  <numbers>
    <label for="numon">Help: On</label>
    <label for="numoff">Help: Off</label>
  </numbers>

  <a href="https://tinydesign.co.uk/" title="Ben Evans Portfolio">
    <sig><u></u></sig>
  </a>
</div>
!

CSS 

              
                $blk: #1a0606;
$none: rgba(#fff,0);
$key: #BDBBAF;
$white: lighten($key,20);
$floor: #D73A4D;
$red: $floor;
$body: #4B4640;
$kk: rgba($key,.5);
$blk2: lighten($blk,5);

:root {
    --white: #e6e0e0;
    --floor: #D73A4D;
}

:root:has(#gfx1:checked) {
    --white: #574444;
    --floor: #69262e;

    div:before, darkness {
        display: none;
    }
}

html {
    font-size: clamp(6px, 1vh, 22px);
    background: $blk;
}

@media (orientation: portrait) {
    html {
        font-size: .8vh;
    }
}

body {
    margin: 0;
    text-align: center;
    color: $none;
    font-size: 2rem;
    height: 100vh;
    font-family: Arial, Helvetica, sans-serif;

    & > div {
        overflow: hidden;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;

        &:before {
            content: '';
            top: 0;
            left: 0;
            position: absolute;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 2;
        }

        @media (min-width: 480px) {
            &:before {
                background: radial-gradient($none, rgba($blk,.7));
                box-shadow: inset 0 1rem 3rem $blk,inset 0 -1rem 3rem $blk,inset 0 0 5rem $blk;
                transform: translate3d(0,0,0);
            }
        }
    }

    content *, content *:before, content *:after {
        box-sizing: border-box;
        position: absolute;
        content: '';
        left: 0;
        top: 0;
        transform-style: preserve-3d;
    }
}

content, room {
    width: 100rem;
    height: 100rem;
}

content {
    margin: auto;
    position: absolute;
    perspective: 100rem;
    display: block;
    inset: 0;
    left: -100rem;
    right: -100rem;

    @media (max-width: 480px) {
        transform: scale(.8);
    }
}

input {
    position: relative;
    z-index: 1;
    margin-top: 1rem;
    display: none;
}

#top-view:checked {
    ~ content > w {
        transform: translate3d(50rem,200rem,-600rem) rotateX(-90deg) !important;
    }
}

#bottom-floor:checked {
    ~ content > w > x > y > z:nth-of-type(1) room {
        display: none;
    }
}

w, x, y, z {
    width: 100%;
    height: 100%;
}

w {
    transform-origin: 50rem -50rem 0;
    transition: all 1s ease-in-out;
    animation: enter 1s ease-in-out backwards;
    transform: translate3d(0,100rem,0);

    @keyframes enter {
        0% {
            transform: translate3d(50rem,300rem,-800rem) rotateX(-90deg);
        }
    }
}

y {
    transform-origin: -50rem 0;
}

x {
    transform-origin: 50rem 0 50rem;
}

z {
    transform-origin: 0 0;
}

$starscolour: #fff,lighten($red,20 );

@function stars ($a, $b) {
    $value: '#{random(100)}vw #{random(90)}vh '+ $b + ' ' + '#{nth($starscolour, random(length($starscolour)))}';

    @for $i from 2 through $a {
        $value: '#{$value} , #{random(100)}vw #{random(90)}vh '+ $b + ' ' + '#{nth($starscolour, random(length($starscolour)))}';
    }

    @return unquote($value);
}

$stars: stars(50, .1rem);

w {
    &:before, &:after {
        transform: translate3d(-500vw,-600vh, -1000rem) scale(10);
        content: '';
        width: .3rem;
        height: .3rem;
        background: #fff;
        box-shadow: $stars;
        right: 0;
        margin: auto;
    }
}

graphics, numbers {
    bottom: 1rem;
    left: 1rem;
    position: absolute;
    z-index: 2;

    label {
        padding: .5rem 1rem;
        background: $blk;
        color: $white;
        border-radius: 1rem;
        cursor: pointer;
        font-size: 1.5rem;
    }
}

#gfx2:checked ~ graphics > [for="gfx2"],
#gfx1:checked ~ graphics > [for="gfx1"],
#numon:checked ~ numbers > [for="numon"],
#numoff:checked ~ numbers > [for="numoff"] {
    display: none;
}

numbers {
    bottom: 1rem;
    left: 14rem;
    position: absolute;
    z-index: 2;
}

:root:has(#numoff:checked) {
    body, room {
        color: #fff;
    }

    input {
        display: inline;
    }
}

.d-none {
    display: none !important;
}
//@import "css-sig";
sig {
    &, * {
        height: 9.25em;
        overflow: hidden;
        border-radius: .5em;
    }

    position: absolute;
    right: 1rem;
    top: 1rem;
    font-size: .5rem;
    color: $white;
    width: 10em;
    transform: skewX(10deg) scaleY(.45) rotate(2deg);
    mix-blend-mode: difference;

    &:before, *:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 5em;
        height: 5em;
        background: currentColor;
        transform: translate3d(-2.5em,0,0) rotate(-45deg);
        box-shadow: -3em 3em 0 0 currentColor;
        border-radius: .5em 2em .5em 2em;
    }

    * {
        width: 5em;
        transform: translate3d(3.75em,0,0) scaleY(.95);
        display: block !important;

        &:before {
            transform: translate3d(-3em,-2em,0) rotate(-45deg);
            box-shadow: -3em 3em 0 0 currentColor, -6em 6em 0 0 currentColor;
            border-radius: .5em;
        }
    }
}
//@import "maze";
room {
    transform: translate3d(0,0,0) rotateX(90deg);
    transform-origin: 0 0 0;
    color: $none;
    font-size: 30rem;
    background: var(--floor);

    &:before, &:after {
        width: 100%;
        height: 100%;
        background: var(--white);
        transform-origin: 0 0 0;
    }

    &:before {
        transform: translate3d(0,0,100rem) rotateY(90deg);
    }

    &:after {
        transform: translate3d(100rem,0,0) rotateY(-90deg);
    }
}

z:nth-of-type(1) room {
    &:nth-of-type(36), //
    &:nth-of-type(37), //
    &:nth-of-type(39), //
    &:nth-of-type(40), //
    &:nth-of-type(41), //
    &:nth-of-type(42), //
    &:nth-of-type(35), //
    &:nth-of-type(28) {
        &:after {
            filter: brightness(.5);
        }
    }

    &:nth-of-type(14), //
    &:nth-of-type(6), //
    &:nth-of-type(38), //
    &:nth-of-type(5), //
    &:nth-of-type(12), //
    &:nth-of-type(26), //
    &:nth-of-type(33) {
        &:before {
            filter: brightness(.5);
        }
    }

    &:nth-of-type(22), //
    &:nth-of-type(8), //
    &:nth-of-type(38), //
    &:nth-of-type(7), //
    &:nth-of-type(21), //
    &:nth-of-type(18), //
    &:nth-of-type(17) {
        &:after {
            filter: brightness(.75);
        }
    }

    &:nth-of-type(31), //
    &:nth-of-type(14), //
    &:nth-of-type(36), //
    &:nth-of-type(22), //
    &:nth-of-type(8), //
    &:nth-of-type(16), //
    &:nth-of-type(21), //
    &:nth-of-type(35), //
    &:nth-of-type(42), //
    &:nth-of-type(28), //
    &:nth-of-type(4) {
        &:before {
            filter: brightness(.75);
        }
    }

    &:nth-of-type(1) {
        transform: translate3d(-300rem, 0, -400rem) rotateX(90deg) rotateZ(90deg);
    }

    &:nth-of-type(2) {
        transform: translate3d(-200rem, 0, -400rem) rotateX(90deg) rotateZ(90deg);
    }

    &:nth-of-type(3) {
        transform: translate3d(-100rem, 0, -400rem) rotateX(90deg) rotateZ(90deg);
    }

    &:nth-of-type(4) {
        transform: translate3d(-100rem, 0, -400rem) rotateX(90deg);

        &:after {
            transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
        }
    }

    &:nth-of-type(5) {
        transform: translate3d(0,0,-400rem) rotateX(90deg);

        &:after {
            transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
        }
    }

    &:nth-of-type(6) {
        transform: translate3d(100rem,0,-300rem) rotateX(90deg) rotateZ(-90deg);
    }

    &:nth-of-type(7) {
        transform: translate3d(200rem,0,-400rem) rotateX(90deg);

        &:before {
            transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
        }
    }

    &:nth-of-type(8) {
        transform: translate3d(-300rem, 0, -200rem) rotateX(90deg) rotateZ(180deg);

        &:before {
            transform: translate3d(100rem, -100rem, 100rem) rotateY(90deg) rotateX(0deg);
        }
    }

    &:nth-of-type(9) {
        transform: translate3d(-300rem, 0, -300rem) rotateX(90deg);

        &:before, &:after {
            display: none;
        }
    }

    &:nth-of-type(10) {
        transform: translate3d(-200rem, 0, -300rem) rotateX(90deg);

        &:before, &:after {
            display: none;
        }
    }

    &:nth-of-type(11) {
        transform: translate3d(-100rem, 0, -300rem) rotateX(90deg);

        &:before, &:after {
            display: none;
        }
    }

    &:nth-of-type(12) {
        transform: translate3d(0,0,-300rem) rotateX(90deg);
    }

    &:nth-of-type(13) {
        transform: translate3d(100rem, 0, -300rem) rotateX(90deg);

        &:before, &:after {
            display: none;
        }
    }

    &:nth-of-type(14) {
        transform: translate3d(300rem, 0, -300rem) rotateX(90deg) rotateZ(90deg);

        &:before {
            transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
        }
    }

    &:nth-of-type(15) {
        transform: translate3d(-400rem, 0, -200rem) rotateX(90deg);

        &:before, &:after {
            display: none;
        }
    }

    &:nth-of-type(16) {
        transform: translate3d(-200rem, 0, -100rem) rotateX(90deg) rotateZ(-180deg);

        &:before {
            transform: translate3d(0, 100rem, 100rem) rotateY(90deg) rotateX(90deg);
        }
    }

    &:nth-of-type(17) {
        transform: translate3d(-200rem,0,-100rem) rotateX(90deg) rotateZ(-90deg);
    }

    &:nth-of-type(18) {
        transform: translate3d(0,0,-100rem) rotateX(90deg) rotateZ(-180deg);

        &:after {
            transform: translate3d(0,100rem,0) rotateY(-90deg) rotateX(-90deg);
        }

        &:before {
            transform: translate3d(100rem,0,100rem) rotateY(90deg) rotateX(-90deg);
        }
    }

    &:nth-of-type(19) {
        transform: translate3d(0,0,-200rem) rotateX(90deg);

        &:before {
            display: none;
        }
    }

    &:nth-of-type(20) {
        transform: translate3d(100rem,0,-200rem) rotateX(90deg);

        &:before, &:after {
            display: none;
        }
    }

    &:nth-of-type(21) {
        transform: translate3d(200rem, 0, -200rem) rotateX(90deg);

        &:after {
            transform: translate3d(-100rem,100rem,0) rotateY(-90deg) rotateX(-90deg);
        }

        &:before {
            transform: translate3d(100rem,0,100rem) rotateY(90deg);
        }
    }

    &:nth-of-type(22) {
        transform: translate3d(-300rem, 0, 0) rotateX(90deg) rotateZ(180deg);

        &:before {
            transform: translate3d(100rem, -100rem, 100rem) rotateY(90deg) rotateX(0deg);
        }
    }

    &:nth-of-type(23) {
        transform: translate3d(-200rem, 0, 0) rotateX(90deg) rotateZ(-180deg);

        &:before {
            display: none;
        }
    }

    &:nth-of-type(24) {
        transform: translate3d(-200rem, 0, -100rem) rotateX(90deg);

        &:before, &:after {
            display: none;
        }
    }

    &:nth-of-type(25) {
        transform: translate3d(-100rem, 0, -100rem) rotateX(90deg);

        &:before, &:after {
            display: none;
        }
    }

    &:nth-of-type(26) {
        transform: translate3d(0,0,-100rem) rotateX(90deg);
    }

    &:nth-of-type(27) {
        transform: translate3d(100rem,0,-100rem) rotateX(90deg);

        &:before, &:after {
            display: none;
        }
    }

    &:nth-of-type(28) {
        transform: translate3d(300rem, 0, 0rem) rotateX(90deg) rotateZ(180deg);
    }

    &:nth-of-type(29) {
        transform: translate3d(-400rem,0,0) rotateX(90deg);

        &:before, &:after {
            display: none;
        }
    }

    &:nth-of-type(30) {
        transform: translate3d(-200rem, 0, 100rem) rotateX(90deg) rotateZ(-180deg);

        &:before {
            display: none;
        }
    }

    &:nth-of-type(31) {
        transform: translate3d(-200rem, 0, 0rem) rotateX(90deg) rotateZ(0deg);

        &:after {
            transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
        }
    }

    &:nth-of-type(32) {
        transform: translate3d(0,0,0) rotateX(90deg) rotateZ(90deg);

        &:before, &:after {
            display: none;
        }
    }

    &:nth-of-type(34) {
        transform: translate3d(100rem,0,0) rotateX(90deg);

        &:before, &:after {
            display: none;
        }
    }

    &:nth-of-type(35) {
        transform: translate3d(300rem, 0, 100rem) rotateX(90deg) rotateZ(180deg);
    }

    &:nth-of-type(36) {
        transform: translate3d(-300rem, 0, 100rem) rotateX(90deg) rotateZ(90deg);

        &:before {
            transform: translate3d(0, 100rem, 100rem) rotateY(90deg) rotateX(90deg);
        }
    }

    &:nth-of-type(37) {
        transform: translate3d(-200rem, 0, 100rem) rotateX(90deg) rotateZ(90deg);

        &:before {
            display: none;
        }
    }

    &:nth-of-type(38) {
        transform: translate3d(-200rem, 0, 200rem) rotateX(90deg) rotateZ(-90deg);

        &:after {
            transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
        }
    }

    &:nth-of-type(39) {
        transform: translate3d(0,0,100rem) rotateX(90deg) rotateZ(90deg);
    }

    &:nth-of-type(40) {
        transform: translate3d(100rem,0,200rem) rotateX(90deg) rotateZ(180deg);

        &:after {
            transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
        }
    }

    &:nth-of-type(41) {
        transform: translate3d(200rem, 0, 200rem) rotateX(90deg) rotateZ(180deg);

        &:after {
            transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
        }

        &:before {
            display: none;
        }
    }

    &:nth-of-type(42) {
        transform: translate3d(300rem, 0, 200rem) rotateX(90deg) rotateZ(180deg);

        &:after {
            transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
        }
    }
}

z:nth-of-type(2) room {
    transform: translate3d(0,100rem,0) rotateX(90deg);

    &:nth-of-type(36), //
    &:nth-of-type(37), //
    &:nth-of-type(39), //
    &:nth-of-type(40), //
    &:nth-of-type(41), //
    &:nth-of-type(42), //
    &:nth-of-type(38), //
    &:nth-of-type(2), //
    &:nth-of-type(3) {
        &:after {
            filter: brightness(.5);
        }
    }

    &:nth-of-type(14), //
    &:nth-of-type(6), //
    &:nth-of-type(38), //
    &:nth-of-type(5), //
    &:nth-of-type(12), //
    &:nth-of-type(26), //
    &:nth-of-type(33), //
    &:nth-of-type(11), //
    &:nth-of-type(16), //
    &:nth-of-type(24), //
    &:nth-of-type(25), //
    &:nth-of-type(27) {
        &:before {
            filter: brightness(.5);
        }
    }

    &:nth-of-type(1), //
    &:nth-of-type(4), //
    &:nth-of-type(10), //
    &:nth-of-type(14), //
    &:nth-of-type(22), //
    &:nth-of-type(8), //
    &:nth-of-type(7), //
    &:nth-of-type(21), //
    &:nth-of-type(17), //
    &:nth-of-type(27) {
        &:after {
            filter: brightness(.75);
        }
    }

    &:nth-of-type(15), //
    &:nth-of-type(14), //
    &:nth-of-type(36), //
    &:nth-of-type(22), //
    &:nth-of-type(21), //
    &:nth-of-type(35), //
    &:nth-of-type(42), //
    &:nth-of-type(28), //
    &:nth-of-type(37), //
    &:nth-of-type(38), //
    &:nth-of-type(39) {
        &:before {
            filter: brightness(.75);
        }
    }

    &:nth-of-type(1) {
        transform: translate3d(-300rem, 100rem, -400rem) rotateX(90deg) rotateZ(90deg);

        &:after {
            transform: translate3d(100rem,100rem,0) rotateY(-90deg) rotateX(90deg);
        }
    }

    &:nth-of-type(2) {
        transform: translate3d(-200rem, 100rem, -400rem) rotateX(90deg) rotateZ(90deg);
    }

    &:nth-of-type(3) {
        transform: translate3d(-100rem, 100rem, -400rem) rotateX(90deg) rotateZ(90deg);
    }

    &:nth-of-type(4) {
        transform: translate3d(0, 100rem, -400rem) rotateX(90deg) rotateZ(90deg);

        &:after {
            transform: translate3d(0,100rem,0) rotateY(-90deg) rotateX(-90deg);
        }
    }

    &:nth-of-type(5) {
        transform: translate3d(0,100rem,-300rem) rotateX(90deg) rotateZ(-90deg);
    }

    &:nth-of-type(6) {
        transform: translate3d(100rem,100rem,-300rem) rotateX(90deg) rotateZ(-90deg);
    }

    &:nth-of-type(7) {
        transform: translate3d(200rem,100rem,-400rem) rotateX(90deg);

        &:before {
            transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
        }
    }

    &:nth-of-type(8) {
        transform: translate3d(-300rem, 100rem, -200rem) rotateX(90deg) rotateZ(180deg);

        &:before {
            transform: translate3d(0, 0, 100rem) rotateY(90deg) rotateX(90deg);
        }
    }

    &:nth-of-type(9) {
        transform: translate3d(-300rem, 100rem, -300rem) rotateX(90deg);

        &:before, &:after {
            display: none;
        }
    }

    &:nth-of-type(10) {
        transform: translate3d(-200rem, 100rem, -300rem) rotateX(90deg);

        &:before, &:after {
            display: none;
        }
    }

    &:nth-of-type(11) {
        transform: translate3d(0, 100rem, -300rem) rotateX(90deg) rotateZ(90deg);

        &:after {
            transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
        }
    }

    &:nth-of-type(12) {
        transform: translate3d(100rem,100rem,-300rem) rotateX(90deg) rotateZ(90deg);

        &:after {
            display: none;
        }
    }

    &:nth-of-type(13) {
        transform: translate3d(200rem, 100rem, -300rem) rotateX(90deg) rotateZ(90deg);

        &:before {
            transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
        }
    }

    &:nth-of-type(14) {
        transform: translate3d(200rem, 100rem, -300rem) rotateX(90deg);
    }

    &:nth-of-type(15) {
        transform: translate3d(-400rem, 100rem, -200rem) rotateX(90deg);

        &:after {
            display: none;
        }
    }

    &:nth-of-type(16) {
        transform: translate3d(-300rem, 100rem, -100rem) rotateX(90deg) rotateZ(-90deg);
    }

    &:nth-of-type(17) {
        transform: translate3d(-200rem,100rem,-100rem) rotateX(90deg) rotateZ(-90deg);

        &:after {
            transform: translate3d(0, 100rem, 100rem) rotateY(90deg) rotateX(90deg);
        }
    }

    &:nth-of-type(18) {
        transform: translate3d(-100rem,100rem,-100rem) rotateX(90deg) rotateZ(-90deg);

        &:after {
            transform: translate3d(0, 100rem, 100rem) rotateY(90deg) rotateX(90deg);
        }
    }

    &:nth-of-type(19) {
        transform: translate3d(100rem,100rem,-200rem) rotateX(90deg) rotateZ(90deg);

        &:before {
            display: none;
        }
    }

    &:nth-of-type(20) {
        transform: translate3d(200rem,100rem,-200rem) rotateX(90deg) rotateZ(90deg);
    }

    &:nth-of-type(21) {
        transform: translate3d(200rem, 100rem, -200rem) rotateX(90deg);

        &:before {
            display: none;
        }
    }

    &:nth-of-type(22) {
        transform: translate3d(-300rem, 100rem, 0) rotateX(90deg) rotateZ(180deg);

        &:before {
            transform: translate3d(100rem, -100rem, 100rem) rotateY(90deg) rotateX(0deg);
        }
    }

    &:nth-of-type(23) {
        transform: translate3d(-200rem, 100rem, 0) rotateX(90deg) rotateZ(-180deg);

        &:before {
            display: none;
        }
    }

    &:nth-of-type(24) {
        transform: translate3d(-100rem, 100rem, -100rem) rotateX(90deg) rotateZ(90deg);
    }

    &:nth-of-type(25) {
        transform: translate3d(0, 100rem, -100rem) rotateX(90deg) rotateZ(90deg);
    }

    &:nth-of-type(26) {
        transform: translate3d(100rem,100rem,-100rem) rotateX(90deg) rotateZ(90deg);

        &:after {
            display: none;
        }
    }

    &:nth-of-type(27) {
        transform: translate3d(200rem,100rem,-100rem) rotateX(90deg) rotateZ(90deg);
    }

    &:nth-of-type(28) {
        transform: translate3d(300rem, 100rem, 0rem) rotateX(90deg) rotateZ(180deg);
    }

    &:nth-of-type(29) {
        transform: translate3d(-400rem,100rem,0) rotateX(90deg);

        &:before, &:after {
            display: none;
        }
    }

    &:nth-of-type(30) {
        transform: translate3d(-200rem, 100rem, 100rem) rotateX(90deg) rotateZ(-180deg);

        &:before {
            display: none;
        }
    }

    &:nth-of-type(31) {
        transform: translate3d(-100rem, 100rem, 0rem) rotateX(90deg) rotateZ(90deg);
    }

    &:nth-of-type(32) {
        transform: translate3d(-100rem,100rem,0) rotateX(90deg);

        &:before, &:after {
            display: none;
        }
    }

    &:nth-of-type(34) {
        transform: translate3d(100rem,100rem,0) rotateX(90deg);

        &:before, &:after {
            display: none;
        }
    }

    &:nth-of-type(35) {
        transform: translate3d(300rem, 100rem, 100rem) rotateX(90deg) rotateZ(180deg);
    }

    &:nth-of-type(36) {
        transform: translate3d(-300rem, 100rem, 100rem) rotateX(90deg) rotateZ(90deg);

        &:before {
            transform: translate3d(0, 100rem, 100rem) rotateY(90deg) rotateX(90deg);
        }
    }

    &:nth-of-type(37) {
        transform: translate3d(-200rem, 100rem, 100rem) rotateX(90deg) rotateZ(90deg);
    }

    &:nth-of-type(38) {
        transform: translate3d(-100rem, 100rem, 100rem) rotateX(90deg) rotateZ(90deg);
    }

    &:nth-of-type(39) {
        transform: translate3d(0,100rem,100rem) rotateX(90deg) rotateZ(90deg);
    }

    &:nth-of-type(40) {
        transform: translate3d(100rem,100rem,200rem) rotateX(90deg) rotateZ(180deg);

        &:after {
            transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
        }
    }

    &:nth-of-type(41) {
        transform: translate3d(200rem, 100rem, 200rem) rotateX(90deg) rotateZ(180deg);

        &:after {
            transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
        }

        &:before {
            display: none;
        }
    }

    &:nth-of-type(42) {
        transform: translate3d(300rem, 100rem, 200rem) rotateX(90deg) rotateZ(180deg);

        &:after {
            transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
        }
    }
}
//@import "buttons";
buttons {
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translate3d(0,0,0);
    width: 40rem;
    height: 30rem;
    z-index: 2;

    label {
        font-size: 3rem;
        border-radius: 1rem;
        padding: 1em;
        color: $white;
        cursor: pointer;
        font-weight: bold;
        width: 3em;
        height: 3em;
        transition: all .15s ease-in-out;
        position: absolute;
        box-sizing: border-box;
        background: $body;
        border: .2rem solid $blk;

        &.leftb {
            bottom: 1rem;
            right: 21rem;
        }

        &.rightb {
            bottom: 1rem;
            right: 1rem;
        }

        &.upb {
            bottom: 11rem;
            right: 11rem;
        }

        &.downb {
            bottom: 1rem;
            right: 11rem;
        }

        &:before, &:after {
            content: '';
            width: 100%;
            height: 100%;
            position: absolute;
            border-radius: 1rem;
            left: 0;
            right: 0;
            top: 0;
        }

        &:after {
            content: '\2191';
            font-size: 4rem;
        }

        &.leftb:after {
            content: '\2190';
        }

        &.rightb:after {
            content: '\2192';
        }

        &.downb:after {
            content: '\2193';
        }

        &:hover, &:focus, &:active {
            transform: translate3d(0,.5rem,-10rem) scale(.98);
            color: $blk;
        }
    }
}

@supports not (-webkit-touch-callout: none) {
    #gfx2:checked ~ {
        @media (min-width: 480px) {
            buttons {
                label {
                    text-shadow: 0 0 .2rem currentColor, 0 0 .2rem currentColor, 0 0 .2rem currentColor, 0 0 .2rem currentColor;
                    border: none;
                    color: $body;

                    &:before {
                        transform: translate3d(0, 0, -.6rem);
                        background: linear-gradient($kk, rgba($body,.5)), //
                        linear-gradient(90deg, lighten($kk,10), rgba($body,.5)), //
                        conic-gradient(from 20deg, currentColor, $kk, currentColor, currentColor, currentColor, $kk, currentColor,currentColor,currentColor, $kk, currentColor,currentColor,currentColor, $kk, currentColor, currentColor,currentColor), $key;
                        box-shadow: .5rem .5rem 1rem $blk;
                    }

                    &:after {
                        transform: translate3d( 0, -.5rem, -.3rem) scale(.75);
                        background: radial-gradient( rgba($body,.5), $key), $key;
                        box-shadow: inset 0 0 .5rem lighten($kk,10), 0 0 .5rem lighten($kk,10);
                    }
                }
            }
        }
    }
}

.dead {
    filter: brightness(.8);
}
//@import "movement";
x, y, z, room {
    transition: all 1s ease-in-out;
}

.upb, .downb, .rightb, .leftb, .dead {
    display: none;
}

#original:checked {
    ~ buttons > {
        .rb1, .lb1 {
            display: block;
        }
    }
}

// <- left

#left1:checked {
    ~ content > w > x {
        transform: rotateY(-90deg);
    }

    ~ buttons > {
        .rb4, .lb2 {
            display: block;
        }
    }
}

// <- backwards

#left2:checked {
    ~ content > w > x {
        transform: rotateY(-180deg);
    }

    ~ buttons > {
        .rb5, .lb3 {
            display: block;
        }
    }
}
// <-- right

#left3:checked {
    ~ content > w > x {
        transform: rotateY(-270deg);
    }

    ~ buttons > {
        .rb6, .lb4 {
            display: block;
        }
    }
}
// <- start

#left4:checked {
    ~ content > w > x {
        animation: killrotate 1s ease-in-out;

        @keyframes killrotate {
            0% {
                transform: rotateY(-270deg);
            }

            99% {
                transform: rotateY(-360deg);
            }

            100% {
                transform: rotateY(0deg);
            }
        }
    }

    ~ buttons > {
        .rb1, .lb1 {
            display: block;
        }
    }
}

// -> right
#right1:checked {
    ~ content > w > x {
        transform: rotateY(90deg);
    }

    ~ buttons > {
        .rb2, .lb4 {
            display: block;
        }
    }
}
// -> backwards

#right2:checked {
    ~ content > w > x {
        transform: rotateY(180deg);
    }

    ~ buttons > {
        .rb3, .lb5 {
            display: block;
        }
    }
}
// -> left

#right3:checked {
    ~ content > w > x {
        transform: rotateY(270deg);
    }

    ~ buttons > {
        .rb4, .lb6 {
            display: block;
        }
    }
}

// -> start

#right4:checked {
    ~ content > w > x {
        animation: killrotate2 1s ease-in-out;

        @keyframes killrotate2 {
            0% {
                transform: rotateY(270deg);
            }

            99% {
                transform: rotateY(360deg);
            }

            100% {
                transform: rotateY(0deg);
            }
        }
    }

    ~ buttons > {
        .rb1, .lb1 {
            display: block;
        }
    }
}
// swap them
#left2:checked, #left3:checked, #right1:checked, #right2:checked {
    ~ buttons > {
        .upb {
            bottom: 1rem;

            &:after {
                content: '\2193';
            }
        }

        .downb {
            bottom: 11rem;

            &:after {
                content: '\2191';
            }
        }
    }
}

// z loop

@for $i from 0 through 7 {
    #z-#{$i}:checked {
        ~ content > w > x > y > z {
            transform: translate3d(0,0,(($i - 2 ) * 100rem));
        }

        ~ buttons > {
            .upb[for="z-#{$i + 1}"], .downb[for="z-#{$i - 1}"] {
                display: block;
            }
        }
    }
}

// x loop

@for $i from 0 through 9 {
    #x-#{$i}:checked {
        ~ content > w > x > y {
            transform: translate3d((($i - 3) * 100rem),0,0);
        }

        ~ buttons > {
            .upb[for="x-#{$i + 1}"], .downb[for="x-#{$i - 1}"] {
                display: block;
            }
        }
    }
}

#left2, #left4, #original, #right2, #right4 {
    &:checked ~ buttons > {
        .bx {
            display: none !important;
        }
    }
}

#left1, #left3, #right1, #right3 {
    &:checked ~ buttons > {
        .bz {
            display: none !important;
        }
    }
}
//@import "movement-blockers";
body:has(.ilower:checked) {
    #z-2:checked ~ #x-3:checked ~ .x-rotation:checked,
    #z-3:checked ~ #x-3:checked ~ .x-rotation:checked,
    #z-5:checked ~ #x-3:checked ~ .x-rotation:checked,
    #z-2:checked ~ #x-6:checked ~ .x-rotation:checked,
    #z-2:checked ~ #x-2:checked ~ .x-rotation:checked,
    #z-3:checked ~ #x-2:checked ~ .x-rotation:checked,
    #z-6:checked ~ #x-4:checked ~ .x-rotation:checked {
        ~ buttons > {
            .upb, .downb {
                display: none;
            }

            .upb[for="x-8"], .downb[for="x-8"] {
                display: block;
            }
        }
    }
    //just down blocked x
    #z-4:checked ~ #x-3:checked ~ .x-rotation:checked,
    #z-1:checked ~ #x-3:checked ~ .x-rotation:checked,
    #z-2:checked ~ #x-4:checked ~ .x-rotation:checked,
    #z-3:checked ~ #x-4:checked ~ .x-rotation:checked,
    #z-1:checked ~ #x-6:checked ~ .x-rotation:checked,
    #z-2:checked ~ #x-7:checked ~ .x-rotation:checked,
    #z-3:checked ~ #x-7:checked ~ .x-rotation:checked,
    #z-4:checked ~ #x-7:checked ~ .x-rotation:checked,
    #z-5:checked ~ #x-4:checked ~ .x-rotation:checked,
    #z-6:checked ~ #x-1:checked ~ .x-rotation:checked {
        ~ buttons > {
            .downb {
                display: none;
            }

            .downb[for="x-8"] {
                display: block;
            }
        }
    }
    // just up blocked x
    #z-6:checked ~ #x-3:checked ~ .x-rotation:checked,
    #z-1:checked ~ #x-2:checked ~ .x-rotation:checked,
    #z-1:checked ~ #x-5:checked ~ .x-rotation:checked,
    #z-2:checked ~ #x-5:checked ~ .x-rotation:checked,
    #z-3:checked ~ #x-6:checked ~ .x-rotation:checked,
    #z-4:checked ~ #x-6:checked ~ .x-rotation:checked,
    #z-5:checked ~ #x-2:checked ~ .x-rotation:checked,
    #z-4:checked ~ #x-2:checked ~ .x-rotation:checked {
        ~ buttons > {
            .upb {
                display: none;
            }

            .upb[for="x-8"] {
                display: block;
            }
        }
    }
    // walls z
    // walls z
    // walls z
    //up and down blocked z
    #z-1:checked ~ #x-4:checked ~ .z-rotation:checked,
    #z-3:checked ~ #x-5:checked ~ .z-rotation:checked,
    #z-4:checked ~ #x-4:checked ~ .z-rotation:checked,
    #z-4:checked ~ #x-5:checked ~ .z-rotation:checked,
    #z-5:checked ~ #x-6:checked ~ .z-rotation:checked,
    #z-5:checked ~ #x-5:checked ~ .z-rotation:checked,
    #z-6:checked ~ #x-2:checked ~ .z-rotation:checked {
        ~ buttons > {
            .upb, .downb {
                display: none;
            }

            .upb[for="z-7"], .downb[for="z-7"] {
                display: block;
            }
        }
    }
    //up blocked z
    #z-2:checked ~ #x-5:checked ~ .z-rotation:checked,
    #z-3:checked ~ #x-4:checked ~ .z-rotation:checked,
    #z-3:checked ~ #x-2:checked ~ .z-rotation:checked,
    #z-4:checked ~ #x-6:checked ~ .z-rotation:checked,
    #z-5:checked ~ #x-7:checked ~ .z-rotation:checked,
    #z-5:checked ~ #x-2:checked ~ .z-rotation:checked {
        ~ buttons > {
            .upb {
                display: none;
            }

            .upb[for="z-7"] {
                display: block;
            }
        }
    }
    //down blocked z
    #z-2:checked ~ #x-4:checked ~ .z-rotation:checked,
    #z-5:checked ~ #x-4:checked ~ .z-rotation:checked,
    #z-5:checked ~ #x-1:checked ~ .z-rotation:checked,
    #z-4:checked ~ #x-2:checked ~ .z-rotation:checked {
        ~ buttons > {
            .downb {
                display: none;
            }

            .downb[for="z-7"] {
                display: block;
            }
        }
    }
}

body:has(.iupper:checked) {
    /* background: blue;*/
    /// walls x
    /// walls x
    /// walls x
    // up and down blocked x
    // z5 x4 needs fixing

    #z-5:checked ~ #x-1:checked ~ .x-rotation:checked,
    #z-3:checked ~ #x-1:checked ~ .x-rotation:checked,
    #z-2:checked ~ #x-1:checked ~ .x-rotation:checked,
    #z-2:checked ~ #x-2:checked ~ .x-rotation:checked,
    #z-4:checked ~ #x-4:checked ~ .x-rotation:checked,
    #z-2:checked ~ #x-3:checked ~ .x-rotation:checked {
        ~ buttons > {
            .upb, .downb {
                display: none;
            }

            .upb[for="x-8"], .downb[for="x-8"] {
                display: block;
            }
        }
    }
    //just down blocked x
    #z-1:checked ~ #x-3:checked ~ .x-rotation:checked,
    #z-2:checked ~ #x-4:checked ~ .x-rotation:checked,
    #z-2:checked ~ #x-7:checked ~ .x-rotation:checked,
    #z-3:checked ~ #x-7:checked ~ .x-rotation:checked,
    #z-6:checked ~ #x-5:checked ~ .x-rotation:checked,
    #z-3:checked ~ #x-2:checked ~ .x-rotation:checked,
    #z-5:checked ~ #x-2:checked ~ .x-rotation:checked,
    #z-5:checked ~ #x-4:checked ~ .x-rotation:checked,
    #z-4:checked ~ #x-5:checked ~ .x-rotation:checked,
    #z-6:checked ~ #x-1:checked ~ .x-rotation:checked {
        ~ buttons > {
            .downb {
                display: none;
            }

            .downb[for="x-8"] {
                display: block;
            }
        }
    }
    // just up blocked x
    #z-5:checked ~ #x-3:checked ~ .x-rotation:checked,
    #z-4:checked ~ #x-3:checked ~ .x-rotation:checked,
    #z-4:checked ~ #x-7:checked ~ .x-rotation:checked,
    #z-1:checked ~ #x-2:checked ~ .x-rotation:checked,
    #z-3:checked ~ #x-6:checked ~ .x-rotation:checked,
    #z-6:checked ~ #x-4:checked ~ .x-rotation:checked,
    #z-6:checked ~ #x-7:checked ~ .x-rotation:checked,
    #z-2:checked ~ #x-6:checked ~ .x-rotation:checked {
        ~ buttons > {
            .upb {
                display: none;
            }

            .upb[for="x-8"] {
                display: block;
            }
        }
    }
    // walls z
    // walls z
    // walls z
    //up and down blocked z
    #z-1:checked ~ #x-4:checked ~ .z-rotation:checked,
    #z-1:checked ~ #x-5:checked ~ .z-rotation:checked,
    #z-2:checked ~ #x-4:checked ~ .z-rotation:checked,
    #z-3:checked ~ #x-2:checked ~ .z-rotation:checked,
    #z-3:checked ~ #x-5:checked ~ .z-rotation:checked,
    #z-5:checked ~ #x-6:checked ~ .z-rotation:checked,
    #z-2:checked ~ #x-5:checked ~ .z-rotation:checked,
    #z-5:checked ~ #x-2:checked ~ .z-rotation:checked,
    #z-1:checked ~ #x-6:checked ~ .z-rotation:checked,
    #z-4:checked ~ #x-2:checked ~ .z-rotation:checked,
    #z-6:checked ~ #x-6:checked ~ .z-rotation:checked,
    #z-6:checked ~ #x-5:checked ~ .z-rotation:checked,
    #z-6:checked ~ #x-2:checked ~ .z-rotation:checked,
    #z-4:checked ~ #x-6:checked ~ .z-rotation:checked,
    #z-6:checked ~ #x-3:checked ~ .z-rotation:checked,
    #z-6:checked ~ #x-4:checked ~ .z-rotation:checked,
    #z-3:checked ~ #x-4:checked ~ .z-rotation:checked {
        ~ buttons > {
            .upb, .downb {
                display: none;
            }

            .upb[for="z-7"], .downb[for="z-7"] {
                display: block;
            }
        }
    }
    //up blocked z
    #z-3:checked ~ #x-3:checked ~ .z-rotation:checked,
    #z-2:checked ~ #x-2:checked ~ .z-rotation:checked,
    #z-3:checked ~ #x-6:checked ~ .z-rotation:checked,
    #z-4:checked ~ #x-7:checked ~ .z-rotation:checked,
    #z-5:checked ~ #x-3:checked ~ .z-rotation:checked,
    #z-5:checked ~ #x-5:checked ~ .z-rotation:checked,
    #z-6:checked ~ #x-7:checked ~ .z-rotation:checked,
    #z-5:checked ~ #x-4:checked ~ .z-rotation:checked {
        ~ buttons > {
            .upb {
                display: none;
            }

            .upb[for="z-7"] {
                display: block;
            }
        }
    }
    //down blocked z

    #z-2:checked ~ #x-6:checked ~ .z-rotation:checked,
    #z-4:checked ~ #x-3:checked ~ .z-rotation:checked,
    #z-4:checked ~ #x-5:checked ~ .z-rotation:checked,
    #z-4:checked ~ #x-4:checked ~ .z-rotation:checked,
    #z-5:checked ~ #x-7:checked ~ .z-rotation:checked {
        ~ buttons > {
            .downb {
                display: none;
            }

            .downb[for="z-7"] {
                display: block;
            }
        }
    }
}

#ilift7:checked ~ #z-2:checked ~ #x-2:checked ~ .z-rotation:checked {
    ~ buttons > {
        .upb {
            display: none;
        }

        .upb[for="z-7"] {
            display: block;
        }
    }
}
//@import "lifts";
.lift {
    background: none;

    *, *:before, *:after {
        transform-origin: 0 0 0;
    }

    lift, floor {
        width: 100%;
        height: 100%;
    }

    lift {
        transform: translate3d(0,0,0);
        transition: all 1s ease-in-out;

        &:before {
            width: 100%;
            height: 100%;
            background: var(--white);
            transform-origin: 0 0 0;
            transform: translate3d(0,0,100rem) rotateY(90deg) rotateX(90deg);
            filter: brightness(.75);
        }
    }

    &.lower lift {
        transform: translate3d(0,0,-100rem);
    }

    label {
        background: darken($red,20);
        height: 5rem;
        width: 5rem;
        cursor: pointer;
        transform: translate3d(47.5rem,1.25rem, 25rem) rotateX(90deg);
        border-radius: 50%;
        transition: all 1s ease-in-out;
        pointer-events: none;

        &:before, &:after {
            height: 5rem;
            width: 5rem;
            transform: translate3d(0, 0, .25rem);
            border-radius: 50%;
            background: darken($red,10);
        }

        &:after {
            transform: translate3d(0, 0, .5rem);
        }

        &:hover, &:focus {
            transform: translate3d(47.5rem,.9rem, 25rem) rotateX(90deg);
        }
    }

    @keyframes light {
        90% {
            background: lighten($red,10);
            box-shadow: inset 0 0 3rem $red, 0 0 5rem $red, 0 0 2rem $red;
        }

        100% {
            background: lighten($red,10);
            box-shadow: inset 0 0 1rem $blk,inset 0 0 3rem $red, 0 0 2rem $red;
        }
    }

    floor {
        background: var(--floor);

        &:before, &:after {
            width: 10rem;
            transform: translate3d( 45rem, .5rem, 0) rotateX(90deg);
            background: $body;
            height: 33rem;
            border-radius: 0 0 5rem 5rem;
        }

        &:before {
            transform: translate3d( 45rem, .1rem, 0) rotateX(90deg);
            background: $blk;
        }

        &:nth-of-type(1) {
            border-radius: 1rem;
            background: darken($body,10);
        }

        &:nth-of-type(2) {
            transform: translate3d(0,0,100rem);

            &:before, &:after {
                display: none;
            }
        }
    }
}

body:has(#gfx2:checked) {
    @media (min-width: 480px) {
        .lift {
            label {
                box-shadow: inset 0 0 1rem $blk;

                &:hover, &:focus {
                    box-shadow: inset 0 0 3rem $blk;
                }
            }
        }

        floor {
            &:nth-of-type(1) {
                box-shadow: inset 0 0 0 2rem $body, inset -1rem -1rem 0 3rem darken($floor,10), inset 1rem 1rem 0 3rem lighten($floor,10);
                background: repeating-linear-gradient(to right, $body, $body 1rem, $none 1rem, $none 2.6rem);
            }
        }
    }
}
//upper level

#ilift5:checked ~ content > w {
    transform: translate3d(0,-10rem,0);

    > x > y > z > room > #lift5 {
        transform: translate3d(0,0,-100rem);
    }
}

#ilift2:checked ~ content > w {
    transform: translate3d(0,-10rem,0);

    > x > y > z > room > #lift2 {
        transform: translate3d(0,0,-100rem);
    }
}
//lower level

#ilift1:checked ~ content > w {
    transform: translate3d(0,100rem,0);

    > x > y > z > room > #lift1 {
        transform: translate3d(0,0,0);
    }
}

#ilift3:checked ~ content > w {
    transform: translate3d(0,100rem,0);

    > x > y > z > room > #lift3 {
        transform: translate3d(0,0,0);
    }
}

#ilift4:checked ~ content > w {
    transform: translate3d(0,100rem,0);

    > x > y > z > room > #lift4 {
        transform: translate3d(0,0,0);
    }
}

#ilift6:checked ~ content > w {
    transform: translate3d(0,100rem,0);

    > x > y > z > room > #lift6 {
        transform: translate3d(0,0,0);
    }
}

#ilift7:checked ~ content > w {
    transform: translate3d(0,100rem,0);

    > x > y > z > room > #lift7 {
        transform: translate3d(0,0,0);
    }
}

#z-6:checked ~ #x-5:checked ~ content > w > x > y > z > room:nth-of-type(3) > lift >,
#z-6:checked ~ #x-4:checked ~ content > w > x > y > z > room:nth-of-type(4) > lift >,
#z-5:checked ~ #x-2:checked ~ content > w > x > y > z > room:nth-of-type(13) > lift >,
#z-4:checked ~ #x-4:checked ~ content > w > x > y > z > room:nth-of-type(18) > lift >,
#z-3:checked ~ #x-3:checked ~ content > w > x > y > z > room:nth-of-type(26) > lift >,
#z-3:checked ~ #x-2:checked ~ content > w > x > y > z > room:nth-of-type(27) > lift >,
#z-2:checked ~ #x-4:checked ~ content > w > x > y > z > room:nth-of-type(32) > lift >,
#z-2:checked ~ #x-2:checked ~ content > w > x > y > z > room:nth-of-type(34) > lift > {
    label {
        pointer-events: all;
        animation: light 1s cubic-bezier(0.5, 0, 1, 0.5) forwards;
    }
}

.iupper:checked ~ #z-3:checked ~ #x-2:checked ~ content > w > x > y > z > room:nth-of-type(27) > lift >,
.iupper:checked ~ #z-6:checked ~ #x-4:checked ~ content > w > x > y > z > room:nth-of-type(4) > lift >,
.ilower:checked ~ #z-2:checked ~ #x-4:checked ~ content > w > x > y > z > room:nth-of-type(32) > lift >,
.ilower:checked ~ #z-6:checked ~ #x-5:checked ~ content > w > x > y > z > room:nth-of-type(3) > lift >,
.ilower:checked ~ #z-5:checked ~ #x-2:checked ~ content > w > x > y > z > room:nth-of-type(13) > lift >,
.ilower:checked ~ #z-4:checked ~ #x-4:checked ~ content > w > x > y > z > room:nth-of-type(18) > lift >,
.ilower:checked ~ #z-3:checked ~ #x-3:checked ~ content > w > x > y > z > room:nth-of-type(26) > lift >,
.ilower:checked ~ #z-2:checked ~ #x-2:checked ~ content > w > x > y > z > room:nth-of-type(34) > lift > {
    label {
        animation: light2 1s ease-in-out forwards;
    }
}

@keyframes light2 {
    0%, 80% {
        background: lighten($red,10);
        box-shadow: inset 0 0 3rem $red, 0 0 5rem $red, 0 0 2rem $red;
    }

    100% {
        background: darken($red,20);
        box-shadow: inset 0 0 1rem $blk;
        pointer-events: none;
    }
}
//@import "win";
wintext {
    transform: scale(0);
    position: absolute;
    top: 10rem;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    max-width: 80rem;
    font-size: 4rem;
    text-align: center;
    line-height: 1.5em;
    background: $white;
    color: $blk;
    padding: 1rem;
    border-radius: 2rem;
    border: 1rem solid $red;
    box-shadow: inset 0 0 0 .25rem $blk,inset 0 .25rem .5rem $blk;
    background: repeating-radial-gradient(circle at 50% 30%, darken($white,1), darken($white,1) 1rem, $white 1rem, $white 2rem);

    h4 {
        margin-top: -1rem;
    }

    h1, h3, h4 {
        font-weight: normal;
    }

    label {
        display: inline-block;
        font-size: 3rem;
        border-radius: 1rem;
        padding: 1em 2rem;
        color: $body;
        cursor: pointer;
        font-weight: bold;
        transition: all .15s ease-in-out;
        position: relative;
        margin-bottom: .5rem;

        &:before, &:after {
            content: '';
            width: 100%;
            height: 100%;
            position: absolute;
            border-radius: 1rem;
            left: 0;
            right: 0;
            top: 0;
            transition: all .15s ease-in-out;
        }

        &:before {
            background: linear-gradient($kk, rgba($body,.5)), //
            linear-gradient(90deg, lighten($kk,20), rgba($body,.5)), //
            conic-gradient(from 20deg, currentColor, $kk, currentColor, currentColor, currentColor, $kk, currentColor,currentColor,currentColor, $kk, currentColor,currentColor,currentColor, $kk, currentColor, currentColor,currentColor), $key;
            transform: translate3d(0, 0, -.2rem);
            box-shadow: 0 .5rem .5rem .5rem rgba($blk,.3);
        }

        &:after {
            background: radial-gradient( rgba($body,.5), $key), $key;
            transform: translate3d( 0, -.5rem, -.1rem) scale(.75);
            box-shadow: inset 0 0 .5rem lighten($kk,30), 0 0 .5rem lighten($kk,20);
            font-size: 4rem;
            content: 'Return ā†µ';
        }

        &:hover, &:focus {
            transform: translate3d(0,.5rem,-10rem) scale(.98);
            color: $blk;

            &:before {
                box-shadow: 0 .1rem .5rem .25rem rgba($blk,.8);
            }
        }
    }

    .badge {
        padding: 1rem;
        border-radius: 50%;
        width: 11rem;
        height: 11rem;
        margin: 2rem auto;
        box-shadow: 0 .5rem .5rem .5rem rgba($blk,.3), inset 0 0 0 5rem $blk;
        transform: scale(.9);
        position: relative;
        border: dashed .5rem $blk;
        background: $red;

        &:before, &:after, div:before, div:after {
            content: '';
            position: absolute;
        }

        &:before {
            height: 1rem;
            border: 3rem solid $none;
            top: 10rem;
            border-left: 3rem solid $blk;
            border-right: 3rem solid $blk;
            left: 3.5rem;
        }

        & > div {
            width: 9rem;
            height: 9rem;
            background: $red;
            border-radius: 1rem;
            margin: auto;
            position: relative;
            border: 1rem solid $red;
            box-shadow: inset 0 0 0 1rem $white;
            transform: rotate(45deg);

            &:before, &:after {
                width: 4rem;
                height: 2rem;
            }

            &:before {
                border-bottom: 1rem solid $white;
                border-right: 1rem solid $white;
                left: 2rem;
                top: 4rem;
            }

            &:after {
                border-top: 1rem solid $white;
                border-left: 1rem solid $white;
                left: 4rem;
                top: 2rem;
                box-shadow: 0 -1rem 0 $red, -1rem 0 0 $red, -2rem 0 0 $white;
            }
        }
    }

    .button {
        background: radial-gradient( farthest-corner at bottom, rgba($blk,.5), rgba($red,.1));
        filter: brightness(1.5);
        padding: 1rem;
        box-shadow: 0 -1rem 2rem $white;
    }
}

// do stuff

#z-6:checked ~ #x-7:checked ~ .x-rotation:checked,
{
    ~ buttons > {
        .upb[for="x-8"] {
            display: none;
        }

        .upb[for="win"] {
            display: block;
        }
    }
}

#win:checked {
    ~ buttons > {
        .leftb, .rightb {
            display: none;
        }
    }

    ~ content {
        > w > x > y {
            transform: translate3d(500rem,0,0);
        }

        > win {
            display: block;
        }
    }

    ~ wintext {
        animation: wintext 7s forwards cubic-bezier(0, 0, 1, 0.5);
    }
}

@keyframes wintext {
    80% {
        transform: scale(0);
    }

    99% {
        transform: scale(1.5) rotate(710deg);
    }

    100% {
        transform: scale(1) rotate(720deg);
    }
}

//stars

@function stars ($a, $b, $c) {
    $value: '#{random(100) - 50}vmin #{random(100) - 50}vmin '+ $b + ' ' + $c;

    @for $i from 2 through $a {
        $value: '#{$value} , #{random(100) - 50}vmin #{random(100) - 50}vmin '+ $b + ' ' + $c;
    }

    @return unquote($value);
}

@function stars2 ($a, $b, $c) {
    $value: '#{random(110) - 55}vmin #{random(110) - 55}vmin '+ $b + ' ' + $c;

    @for $i from 2 through $a {
        $value: '#{$value} , #{random(110) - 55}vmin #{random(110) - 55}vmin '+ $b + ' ' + $c;
    }

    @return unquote($value);
}

$stars1: stars(5, 0, $white);
$stars2: stars2(7, 0, $red);
$stars3: stars(10, 0, $white);

@-webkit-keyframes stars {
    50% {
        opacity: 1;
    }

    100% {
        transform: translate3d(0vmin,0vmin,1000rem) scale(5);
        opacity: 0;
    }
}

win {
    display: none;

    & > u {
        width: 1rem;
        height: 1rem;
        position: absolute;
        top: -10vmin;
        left: 0;
        box-shadow: $stars1;
        animation: stars 10s -10s infinite linear;
        transform: translate3d(0vmin,0vmin,-1000rem) scale(5);
        opacity: 0;
    }

    & > u:nth-of-type(2) {
        animation: stars 9s infinite linear -1s;
        box-shadow: $stars2;
    }

    & > u:nth-of-type(3) {
        animation: stars 8s infinite linear -2s;
        box-shadow: $stars3;
    }

    & > u:nth-of-type(4) {
        animation: stars 7s infinite linear -3s;
        box-shadow: $stars1;
    }

    & > u:nth-of-type(5) {
        animation: stars 6s infinite linear -4s;
        box-shadow: $stars2;
    }

    & > u:nth-of-type(6) {
        animation: stars 5s infinite linear -5s;
        box-shadow: $stars3;
    }

    & > u:nth-of-type(7) {
        animation: stars 4s infinite linear -6s;
        box-shadow: $stars1;
    }

    & > u:nth-of-type(8) {
        animation: stars 3s infinite linear -7s;
        box-shadow: $stars3;
    }

    & > u:nth-of-type(9) {
        animation: stars 2s infinite linear -8s;
        box-shadow: $stars2;
    }

    & > u:nth-of-type(10) {
        animation: stars 1s infinite linear -9s;
        box-shadow: $stars1;
    }
}
//@import "darkness2";
darkness {
    width: 700rem;
    height: 300rem;
    transform: translate3d(-400rem,-160rem, 201rem);
    pointer-events: none;

    u {
        width: 700rem;
        height: 300rem;
        background: rgba($blk2,.075);
        transform: translate3d(0,0,-100rem) rotateX(-5deg);

        &:before {
            width: 700rem;
            height: 300rem;
            background: rgba($blk2,.075);
            transform: translate3d(0,0,-30rem);
        }
    }

    u:nth-of-type(2) {
        transform: translate3d(0,0,-200rem) rotateX(-5deg);
    }

    u:nth-of-type(3) {
        transform: translate3d(0,0,-300rem) rotateX(-5deg);
    }

    u:nth-of-type(4) {
        transform: translate3d(0,0,-400rem) rotateX(-5deg);
    }

    u:nth-of-type(5) {
        transform: translate3d(0,0,-500rem) rotateX(-5deg);
    }

    u:nth-of-type(6) {
        transform: translate3d(0,0,-600rem) rotateX(-5deg);
    }

    &:nth-of-type(2) {
        transform: translate3d(-45rem,-100rem,-100rem) rotateY(90deg);
    }
}
//@import "ios";
@supports (-webkit-touch-callout: none) {
    wall, content, room {
        width: 10rem;
        height: 10rem;
    }

    content {
        perspective: 100rem;
        transform: scale(.8);
    }

    w {
        transform-origin: 5rem -5rem 0;
        transform: translate3d(0,10rem,100rem);
    }

    y {
        transform-origin: -5rem 0;
    }

    x {
        transform-origin: 5rem 0 -5rem;
    }

    x, y, z, room {
        transition: none;
    }

    room {
        font-size: 3rem;

        &:before {
            transform: translate3d(0,0,10rem) rotateY(90deg) scaleY(1.009);
        }

        &:after {
            transform: translate3d(10rem,0,0) rotateY(-90deg) scaleY(1.009);
        }
    }

    z:nth-of-type(1) room {
        &:nth-of-type(1) {
            transform: translate3d(-30rem, 0, -40rem) rotateX(90deg) rotateZ(90deg);
        }

        &:nth-of-type(2) {
            transform: translate3d(-20rem, 0, -40rem) rotateX(90deg) rotateZ(90deg);
        }

        &:nth-of-type(3) {
            transform: translate3d(-10rem, 0, -40rem) rotateX(90deg) rotateZ(90deg);
        }

        &:nth-of-type(4) {
            transform: translate3d(-10rem, 0, -40rem) rotateX(90deg);

            &:after {
                transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
            }
        }

        &:nth-of-type(5) {
            transform: translate3d(0,0,-40rem) rotateX(90deg);

            &:after {
                transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
            }
        }

        &:nth-of-type(6) {
            transform: translate3d(10rem,0,-30rem) rotateX(90deg) rotateZ(-90deg);
        }

        &:nth-of-type(7) {
            transform: translate3d(20rem,0,-40rem) rotateX(90deg);

            &:before {
                transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
            }
        }

        &:nth-of-type(8) {
            transform: translate3d(-30rem, 0, -20rem) rotateX(90deg) rotateZ(180deg);

            &:before {
                transform: translate3d(10rem, -10rem, 10rem) rotateY(90deg) rotateX(0deg);
            }
        }

        &:nth-of-type(9) {
            transform: translate3d(-30rem, 0, -30rem) rotateX(90deg);
        }

        &:nth-of-type(10) {
            transform: translate3d(-20rem, 0, -30rem) rotateX(90deg);
        }

        &:nth-of-type(11) {
            transform: translate3d(-10rem, 0, -30rem) rotateX(90deg);
        }

        &:nth-of-type(12) {
            transform: translate3d(0,0,-30rem) rotateX(90deg);
        }

        &:nth-of-type(13) {
            transform: translate3d(10rem, 0, -30rem) rotateX(90deg);
        }

        &:nth-of-type(14) {
            transform: translate3d(30rem, 0, -30rem) rotateX(90deg) rotateZ(90deg);

            &:before {
                transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
            }
        }

        &:nth-of-type(15) {
            transform: translate3d(-40rem, 0, -20rem) rotateX(90deg);
        }

        &:nth-of-type(16) {
            transform: translate3d(-20rem, 0, -10rem) rotateX(90deg) rotateZ(-180deg);

            &:before {
                transform: translate3d(0, 10rem, 10rem) rotateY(90deg) rotateX(90deg);
            }
        }

        &:nth-of-type(17) {
            transform: translate3d(-20rem,0,-10rem) rotateX(90deg) rotateZ(-90deg);
        }

        &:nth-of-type(18) {
            transform: translate3d(0,0,-10rem) rotateX(90deg) rotateZ(-180deg);

            &:after {
                transform: translate3d(0,10rem,0) rotateY(-90deg) rotateX(-90deg);
            }

            &:before {
                transform: translate3d(10rem,0,10rem) rotateY(90deg) rotateX(-90deg);
            }
        }

        &:nth-of-type(19) {
            transform: translate3d(0,0,-20rem) rotateX(90deg);
        }

        &:nth-of-type(20) {
            transform: translate3d(10rem,0,-20rem) rotateX(90deg);
        }

        &:nth-of-type(21) {
            transform: translate3d(20rem, 0, -20rem) rotateX(90deg);

            &:after {
                transform: translate3d(-10rem,10rem,0) rotateY(-90deg) rotateX(-90deg);
            }

            &:before {
                transform: translate3d(10rem,0,10rem) rotateY(90deg);
            }
        }

        &:nth-of-type(22) {
            transform: translate3d(-30rem, 0, 0) rotateX(90deg) rotateZ(180deg);

            &:before {
                transform: translate3d(10rem, -10rem, 10rem) rotateY(90deg) rotateX(0deg);
            }
        }

        &:nth-of-type(23) {
            transform: translate3d(-20rem, 0, 0) rotateX(90deg) rotateZ(-180deg);
        }

        &:nth-of-type(24) {
            transform: translate3d(-20rem, 0, -10rem) rotateX(90deg);
        }

        &:nth-of-type(25) {
            transform: translate3d(-10rem, 0, -10rem) rotateX(90deg);
        }

        &:nth-of-type(26) {
            transform: translate3d(0,0,-10rem) rotateX(90deg);
        }

        &:nth-of-type(27) {
            transform: translate3d(10rem,0,-10rem) rotateX(90deg);
        }

        &:nth-of-type(28) {
            transform: translate3d(30rem, 0, 0rem) rotateX(90deg) rotateZ(180deg);
        }

        &:nth-of-type(29) {
            transform: translate3d(-40rem,0,0) rotateX(90deg);
        }

        &:nth-of-type(30) {
            transform: translate3d(-20rem, 0, 10rem) rotateX(90deg) rotateZ(-180deg);
        }

        &:nth-of-type(31) {
            transform: translate3d(-20rem, 0, 0rem) rotateX(90deg) rotateZ(0deg);

            &:after {
                transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
            }
        }

        &:nth-of-type(32) {
            transform: translate3d(0,0,0) rotateX(90deg) rotateZ(90deg);
        }

        &:nth-of-type(34) {
            transform: translate3d(10rem,0,0) rotateX(90deg);
        }

        &:nth-of-type(35) {
            transform: translate3d(30rem, 0, 10rem) rotateX(90deg) rotateZ(180deg);
        }

        &:nth-of-type(36) {
            transform: translate3d(-30rem, 0, 10rem) rotateX(90deg) rotateZ(90deg);

            &:before {
                transform: translate3d(0, 10rem, 10rem) rotateY(90deg) rotateX(90deg);
            }
        }

        &:nth-of-type(37) {
            transform: translate3d(-20rem, 0, 10rem) rotateX(90deg) rotateZ(90deg);
        }

        &:nth-of-type(38) {
            transform: translate3d(-20rem, 0, 20rem) rotateX(90deg) rotateZ(-90deg);

            &:after {
                transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
            }
        }

        &:nth-of-type(39) {
            transform: translate3d(0,0,10rem) rotateX(90deg) rotateZ(90deg);
        }

        &:nth-of-type(40) {
            transform: translate3d(10rem,0,20rem) rotateX(90deg) rotateZ(180deg);

            &:after {
                transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
            }
        }

        &:nth-of-type(41) {
            transform: translate3d(20rem, 0, 20rem) rotateX(90deg) rotateZ(180deg);

            &:after {
                transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
            }
        }

        &:nth-of-type(42) {
            transform: translate3d(30rem, 0, 20rem) rotateX(90deg) rotateZ(180deg);

            &:after {
                transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
            }
        }
    }

    z:nth-of-type(2) room {
        transform: translate3d(0,10rem,0) rotateX(90deg);

        &:nth-of-type(1) {
            transform: translate3d(-30rem, 10rem, -40rem) rotateX(90deg) rotateZ(90deg);

            &:after {
                transform: translate3d(10rem,10rem,0) rotateY(-90deg) rotateX(90deg);
            }
        }

        &:nth-of-type(2) {
            transform: translate3d(-20rem, 10rem, -40rem) rotateX(90deg) rotateZ(90deg);
        }

        &:nth-of-type(3) {
            transform: translate3d(-10rem, 10rem, -40rem) rotateX(90deg) rotateZ(90deg);
        }

        &:nth-of-type(4) {
            transform: translate3d(0, 10rem, -40rem) rotateX(90deg) rotateZ(90deg);

            &:after {
                transform: translate3d(0,10rem,0) rotateY(-90deg) rotateX(-90deg);
            }
        }

        &:nth-of-type(5) {
            transform: translate3d(0,10rem,-30rem) rotateX(90deg) rotateZ(-90deg);
        }

        &:nth-of-type(6) {
            transform: translate3d(10rem,10rem,-30rem) rotateX(90deg) rotateZ(-90deg);
        }

        &:nth-of-type(7) {
            transform: translate3d(20rem,10rem,-40rem) rotateX(90deg);

            &:before {
                transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
            }
        }

        &:nth-of-type(8) {
            transform: translate3d(-30rem, 10rem, -20rem) rotateX(90deg) rotateZ(180deg);

            &:before {
                transform: translate3d(0, 0, 10rem) rotateY(90deg) rotateX(90deg);
            }
        }

        &:nth-of-type(9) {
            transform: translate3d(-30rem, 10rem, -30rem) rotateX(90deg);
        }

        &:nth-of-type(10) {
            transform: translate3d(-20rem, 10rem, -30rem) rotateX(90deg);
        }

        &:nth-of-type(11) {
            transform: translate3d(0, 10rem, -30rem) rotateX(90deg) rotateZ(90deg);

            &:after {
                transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
            }
        }

        &:nth-of-type(12) {
            transform: translate3d(10rem,10rem,-30rem) rotateX(90deg) rotateZ(90deg);
        }

        &:nth-of-type(13) {
            transform: translate3d(20rem, 10rem, -30rem) rotateX(90deg) rotateZ(90deg);

            &:before {
                transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
            }
        }

        &:nth-of-type(14) {
            transform: translate3d(20rem, 10rem, -30rem) rotateX(90deg);
        }

        &:nth-of-type(15) {
            transform: translate3d(-40rem, 10rem, -20rem) rotateX(90deg);
        }

        &:nth-of-type(16) {
            transform: translate3d(-30rem, 10rem, -10rem) rotateX(90deg) rotateZ(-90deg);
        }

        &:nth-of-type(17) {
            transform: translate3d(-20rem,10rem,-10rem) rotateX(90deg) rotateZ(-90deg);

            &:after {
                transform: translate3d(0, 10rem, 10rem) rotateY(90deg) rotateX(90deg);
            }
        }

        &:nth-of-type(18) {
            transform: translate3d(-10rem,10rem,-10rem) rotateX(90deg) rotateZ(-90deg);

            &:after {
                transform: translate3d(0, 10rem, 10rem) rotateY(90deg) rotateX(90deg);
            }
        }

        &:nth-of-type(19) {
            transform: translate3d(10rem,10rem,-20rem) rotateX(90deg) rotateZ(90deg);
        }

        &:nth-of-type(20) {
            transform: translate3d(20rem,10rem,-20rem) rotateX(90deg) rotateZ(90deg);
        }

        &:nth-of-type(21) {
            transform: translate3d(20rem, 10rem, -20rem) rotateX(90deg);
        }

        &:nth-of-type(22) {
            transform: translate3d(-30rem, 10rem, 0) rotateX(90deg) rotateZ(180deg);

            &:before {
                transform: translate3d(10rem, -10rem, 10rem) rotateY(90deg) rotateX(0deg);
            }
        }

        &:nth-of-type(23) {
            transform: translate3d(-20rem, 10rem, 0) rotateX(90deg) rotateZ(-180deg);
        }

        &:nth-of-type(24) {
            transform: translate3d(-10rem, 10rem, -10rem) rotateX(90deg) rotateZ(90deg);
        }

        &:nth-of-type(25) {
            transform: translate3d(0, 10rem, -10rem) rotateX(90deg) rotateZ(90deg);
        }

        &:nth-of-type(26) {
            transform: translate3d(10rem,10rem,-10rem) rotateX(90deg) rotateZ(90deg);
        }

        &:nth-of-type(27) {
            transform: translate3d(20rem,10rem,-10rem) rotateX(90deg) rotateZ(90deg);
        }

        &:nth-of-type(28) {
            transform: translate3d(30rem, 10rem, 0rem) rotateX(90deg) rotateZ(180deg);
        }

        &:nth-of-type(29) {
            transform: translate3d(-40rem,10rem,0) rotateX(90deg);
        }

        &:nth-of-type(30) {
            transform: translate3d(-20rem, 10rem, 10rem) rotateX(90deg) rotateZ(-180deg);
        }

        &:nth-of-type(31) {
            transform: translate3d(-10rem, 10rem, 0rem) rotateX(90deg) rotateZ(90deg);
        }

        &:nth-of-type(32) {
            transform: translate3d(-10rem,10rem,0) rotateX(90deg);
        }

        &:nth-of-type(34) {
            transform: translate3d(10rem,10rem,0) rotateX(90deg);
        }

        &:nth-of-type(35) {
            transform: translate3d(30rem, 10rem, 10rem) rotateX(90deg) rotateZ(180deg);
        }

        &:nth-of-type(36) {
            transform: translate3d(-30rem, 10rem, 10rem) rotateX(90deg) rotateZ(90deg);

            &:before {
                transform: translate3d(0, 10rem, 10rem) rotateY(90deg) rotateX(90deg);
            }
        }

        &:nth-of-type(37) {
            transform: translate3d(-20rem, 10rem, 10rem) rotateX(90deg) rotateZ(90deg);
        }

        &:nth-of-type(38) {
            transform: translate3d(-10rem, 10rem, 10rem) rotateX(90deg) rotateZ(90deg);
        }

        &:nth-of-type(39) {
            transform: translate3d(0,10rem,10rem) rotateX(90deg) rotateZ(90deg);
        }

        &:nth-of-type(40) {
            transform: translate3d(10rem,10rem,20rem) rotateX(90deg) rotateZ(180deg);

            &:after {
                transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
            }
        }

        &:nth-of-type(41) {
            transform: translate3d(20rem, 10rem, 20rem) rotateX(90deg) rotateZ(180deg);

            &:after {
                transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
            }
        }

        &:nth-of-type(42) {
            transform: translate3d(30rem, 10rem, 20rem) rotateX(90deg) rotateZ(180deg);

            &:after {
                transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
            }
        }
    }

    .lift {
        lift {
            &:before {
                transform: translate3d(0,0,10rem) rotateY(90deg) rotateX(90deg);
            }
        }

        &.lower lift {
            transform: translate3d(0,0,-10rem);
        }

        label {
            height: .5rem;
            width: .5rem;
            transform: translate3d(4.725rem,.125rem, 2.5rem) rotateX(90deg);

            &:before, &:after {
                height: .5rem;
                width: .5rem;
                transform: translate3d(0, 0, .025rem);
            }

            &:after {
                transform: translate3d(0, 0, .05rem);
            }

            &:hover, &:focus {
                transform: translate3d(4.75rem,.09rem, 2.5rem) rotateX(90deg);
            }
        }

        @keyframes light {
            90% {
                box-shadow: inset 0 0 .3rem $red, 0 0 .5rem $red, 0 0 .2rem $red;
            }

            100% {
                box-shadow: inset 0 0 .1rem $blk,inset 0 0 .3rem $red, 0 0 .2rem $red;
            }
        }

        floor {
            &:before, &:after {
                width: 1rem;
                transform: translate3d( 4.5rem, .05rem, 0) rotateX(90deg);
                height: 3.3rem;
                border-radius: 0 0 .5rem .5rem;
            }

            &:before {
                transform: translate3d( 4.5rem, .01rem, 0) rotateX(90deg);
            }

            &:nth-of-type(1) {
                border-radius: .1rem;
            }

            &:nth-of-type(2) {
                transform: translate3d(0,0,10rem);
            }
        }
    }

    body:has(#gfx2:checked) {
        @media (min-width: 480px) {
            .lift {
                label {
                    box-shadow: inset 0 0 .1rem $blk;

                    &:hover, &:focus {
                        box-shadow: inset 0 0 .3rem $blk;
                    }
                }
            }

            floor {
                &:nth-of-type(1) {
                    box-shadow: inset 0 0 0 .2rem $body, inset -.1rem -.1rem 0 .3rem darken($floor,10), inset .1rem .1rem 0 .3rem lighten($floor,10);
                    background: lighten($body,10);
                }
            }
        }
    }
    //upper level

    #ilift5:checked ~ content > w {
        transform: translate3d(0,-1rem,100rem);

        > x > y > z > room > #lift5 {
            transform: translate3d(0,0,-10rem);
        }
    }

    #ilift2:checked ~ content > w {
        transform: translate3d(0,-10rem,100rem);

        > x > y > z > room > #lift2 {
            transform: translate3d(0,0,-10rem);
        }
    }
    //lower level

    #ilift1:checked ~ content > w {
        transform: translate3d(0,10rem,100rem);
    }

    #ilift3:checked ~ content > w {
        transform: translate3d(0,10rem,100rem);
    }

    #ilift4:checked ~ content > w {
        transform: translate3d(0,10rem,100rem);
    }

    #ilift6:checked ~ content > w {
        transform: translate3d(0,10rem,100rem);
    }

    #ilift7:checked ~ content > w {
        transform: translate3d(0,10rem,100rem);
    }
    // z loop

    @for $i from 0 through 7 {
        #z-#{$i}:checked {
            ~ content > w > x > y > z {
                transform: translate3d(0,0,(($i - 3 ) * 10rem));
            }
        }
    }
    // x loop

    @for $i from 0 through 9 {
        #x-#{$i}:checked {
            ~ content > w > x > y {
                transform: translate3d((($i - 3) * 10rem),0,0);
            }
        }
    }

    #top-view:checked {
        ~ content > w {
            transform: translate3d(5rem,20rem,-60rem) rotateX(-90deg) !important;
        }
    }

    darkness {
        width: 70rem;
        height: 30rem;
        transform: translate3d(-40rem,-16rem, 20.1rem);

        u {
            width: 70rem;
            height: 30rem;
            transform: translate3d(0,0,-10rem) rotateX(-5deg);

            &:before {
                width: 70rem;
                height: 30rem;
                transform: translate3d(0,0,-3rem);
            }
        }

        u:nth-of-type(2) {
            transform: translate3d(0,0,-20rem) rotateX(-5deg);
        }

        u:nth-of-type(3) {
            transform: translate3d(0,0,-30rem) rotateX(-5deg);
        }

        u:nth-of-type(4) {
            transform: translate3d(0,0,-40rem) rotateX(-5deg);
        }

        u:nth-of-type(5) {
            transform: translate3d(0,0,-50rem) rotateX(-5deg);
        }

        u:nth-of-type(6) {
            transform: translate3d(0,0,-60rem) rotateX(-5deg);
        }

        &:nth-of-type(2) {
            transform: translate3d(-4.5rem,-10rem,-10rem) rotateY(90deg);
        }
    }
}
!

JS 

              
                // šŸŒŽ 100% Natural ingredients!
// šŸš³ No images 
// šŸ“µ No JavaScript 
// šŸ‘Øā€šŸ’» CSS - And a sprinkling of HTML

// šŸ’„ CHROME ONLY!! 

// šŸ”— linktr.ee/ivorjetski for more

// The making of: 
// šŸ“ŗ https://youtu.be/Z0VHM4KcMFQ

// Sorry Safari people
// šŸ’€ I've tried but it's just not going to happen :(
!
999px

Console