@supports (background: paint(something)) {
   @property --originOffsetX {
      initial-value: 0;
      inherits: false;
      syntax: '<length>';
   }

   @property --originOffsetY {
      initial-value: 0;
      inherits: false;
      syntax: '<length>';
   }

   @property --originOffsetZ {
      initial-value: 0;
      inherits: false;
      syntax: '<length>';
   }

   @property --rotation {
      initial-value: 0deg;
      inherits: false;
      syntax: '<angle>';
   }

   @property --sceneZPos {
      initial-value: 0;
      inherits: false;
      syntax: '<length>';
   }

   @keyframes sceneRotateLeft {
      to {
        --rotation: -9999deg;
      }
   }
   
   @keyframes sceneRotateRight {
      to { 
        --rotation: 9999deg;
     }
   }
   
   @keyframes sceneMoveForward {
      to {
          --sceneZPos: 1000em; 
      }
   }
   
   @keyframes sceneMoveBack {
      to { 
         --sceneZPos: -1000em;
       }
   }

   .scene {
      transform: translateZ(var(--sceneZPos)) rotateY(var(--rotation));
   }
}

@supports not (background: paint(something)) {
   @keyframes sceneRotateLeft {
      to {
          transform: rotateY(-9999deg);
      }
   }
   
   @keyframes sceneRotateRight {
      to { 
        transform: rotateY(9999deg);
     }
   }
   
   @keyframes sceneMoveForward {
      to { 
         transform: translateZ(1000em);
      }
   }
   
   @keyframes sceneMoveBack {
      to { 
         transform: translateZ(-1000em);
       }
   }
}

body {
    background-color: #000;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
    perspective: 10em;
    perspective-origin: 50% calc(50% - 2em);
    font-family: 'Roboto', sans-serif;    
    overflow: hidden;
 }

.scene {
   --originOffsetX: 30em;
   --originOffsetY: 10em;
   --originOffsetZ: var(--sceneZPos);
   background-color: #fff;
    position: relative;
    transform-style: preserve-3d;
    animation: 
       sceneRotateLeft var(--turnSpeed) infinite linear, 
       sceneRotateRight var(--turnSpeed) infinite linear,
       sceneMoveForward var(--speed) infinite linear,
       sceneMoveBack var(--speed) infinite linear;
    animation-play-state: paused, paused, paused, paused;
    transform-origin: 50% 50% 0;
    transition: 4s transform;
 }

 .moveForward, .turnLeft, .stop, .turnRight, .moveBack {
   display: none;
 }
 
 :target.turnLeft ~ .scene, #turnLeft:focus ~ .scene {
    animation-play-state: running, paused, paused, paused;
 }
 
 :target.turnRight ~ .scene, #turnRight:focus ~ .scene {
    animation-play-state: paused, running, paused, paused;
 }
 
 :target.moveBack ~ .scene, #moveBack:focus ~ .scene {
    animation-play-state: paused, paused, paused, running;
 }
 
 :target.moveForward ~ .scene, #moveForward:focus ~ .scene {
    animation-play-state: paused, paused, running, paused;
 }
 
 :target.moveBack ~ embed {
    display: block;
 }

 :target.moveForward ~ embed {
    display: block;
 }

 :target.turnLeft ~ embed {
    display: none;
 }
 
 :target.turnRight ~ embed {
    display: none;
 }

 #controls {
    position: fixed;                 
    z-index: 10000000;
    width: 5em;
    bottom: 2em;
    margin-left:-2.5em;
    left:50%;
    font-size: 5vmin;
 }


 /*Safari only hack*/
 @supports (-webkit-backdrop-filter: blur(1px)) {
    #controls {
       top: 40%;
    }
 }

 .flex-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    justify-content: center;
 }

 .col {
    width: 32%;
    text-align: center;
 }
 
 #controls a:link, #controls a:visited {
    text-decoration: none;
    color:#fff;
    text-shadow: 2px 2px #000;
 }

 .controlsHelp {         
    bottom: 1em;
    right: 0;
    position: fixed;
    width: 10em;
    height: 6em;
    background-image: 
       url('/images/controls.png');
    background-size: 10em, 16em;
    background-repeat: no-repeat;
    z-index: 10000000;
    transform-style: preserve-3d;
 }

 #moveForward, #turnLeft, #stop, #turnRight, #moveBack {
   position: absolute;
   left: -5000em;
   top:-5000em;
   pointer-events: none;
}

#controls a:hover    {
   color:rgb(208, 255, 0);
}

@media (max-width: 900px) {
   .controlsHelp {
      display:none;
   }
}