body {
    margin: 0;
    height: 100vh;
    background: linear-gradient(#9cf, #ffffff);
    perspective: 100vh;
    overflow-x: hidden;
    overflow-y: hidden;
  }

 
  
  @keyframes rotateDrawing {
    0% {
      transform: translate(-50%, -50%) translateZ(-20vmin) rotateY(0deg);
      
    }
    100% {
      transform: translate(-50%, -50%) translateZ(-20vmin) rotateY(-360deg);
    }
  }
  
  .canvas {
    animation: rotateDrawing 15s linear infinite;
    width: 70vmin;
    height: 75vmin;
    background: #f002;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translate3d(0vmin, 0, -40vmin) rotate3d(0, 1, 0, 100deg);
    transform-style: preserve-3d;
  }
  
  .canvas:active {
    animation-play-state: running;
  }
  
  .canvas:hover {
    animation-play-state: paused;
}



  .cube {
    --h: 0deg;
    --s: 50%;
    --l: 50%;
    --t: 0;
    background: hsl(var(--h), var(--s), var(--l));
    position: absolute;
    transform: translateZ(calc(var(--t) * -1));
    transform-style: preserve-3d;
  }
  
  .cube::before,
  .cube::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: var(--d);
    height: 100%;
    background: hsl(var(--h), var(--s), calc(var(--l) * 0.8));
    transform: rotateY(-90deg);
    transform-origin: 0 50%;
  }
  
  .cube::after {
    left: auto;
    right: 0;
    transform-origin: 100% 50%;
    transform: rotateY(90deg);
  }
  
  .cube > div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: hsl(var(--h), var(--s), var(--l));
    transform: translate3d(0, 0, var(--d));
    transform-style: preserve-3d;
  }
  
  .cube > div::before,
  .cube > div::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: hsl(var(--h), var(--s), calc(var(--l) * 1.15));
    width: 100%;
    height: var(--d);
    transform: rotateX(-90deg);
    transform-origin: 50% 0;
  }
  
  .cube > div::after {
    top: auto;
    bottom: 0;
    transform: rotateX(90deg);
    transform-origin: 50% 100%;
    background: hsl(var(--h), var(--s), calc(var(--l) * 0.6));
  }
  
  /* drawing */
  .canvas div {
    position: absolute;
    transform-style: preserve-3d;
  }
  
  .step {
    --s: 10%;
    --l: 80%;
    --d: 15vmin;
    --t: 2vmin;
    width: 29vmin;
    height: 4vmin;
    bottom: 0;
    right: 3vmin;
  }
  
  .step > div::before {
    background:
      linear-gradient(hsl(var(--h), var(--s), calc(var(--l) * 1.15)) calc(99% - 2vmin), #444 0, #000 99%, hsl(var(--h), var(--s), calc(var(--l) * 1.15)) 0)
  }
  
  .door {
    width: 25vmin;
    height: 50vmin;
    bottom: 4vmin;
    right: 5vmin;
  }
  
  .door .cube {
    --h: 20deg;
    --s: 40%;
    --l: 40%;
    --d: 4vmin;
    --t: 2vmin;
  }
  
  .frame-top {
    width: 100%;
    height: 2vmin;
  }
  
  .frame-side {
    width: 2vmin;
    height: 100%;
  }
  
  .frame-side + .frame-side {
    right: 0;
  }
  
  .door .door-board {
    --d: 2vmin;
    --t: 2vmin;
    top: 2vmin;
    left: 2vmin;
    width: calc(100% - 4vmin);
    height: calc(100% - 2vmin);
    transform: translateZ(calc(-0.5 * var(--t))) rotateY(60deg) ;
    transform-origin: 0% 50%;
    background: 
      linear-gradient(#777 0 0) 50% 34% / 20% 1%,
      repeating-linear-gradient(#ddd 0 7%, #0000 0 15%) 50% 38% / 30% 6%,
      linear-gradient(#fff 0 0) 50% 36% / 40% 10%,
      
      linear-gradient(#744f3b 2vmin, #0000 0 calc(100% - 2vmin), #744f3b 0),
      linear-gradient(to right, #744f3b 2vmin, #0000 0 calc(100% - 2vmin), #744f3b 0),
      linear-gradient(#cdf3 0 0)
      ;
    background-repeat: no-repeat;
  }
  
  .door .door-board > div {
    background: 
      linear-gradient(#744f3b 2vmin, #0000 0 calc(100% - 2vmin), #744f3b 0),
      linear-gradient(to right, #744f3b 2vmin, #0000 0 calc(100% - 2vmin), #744f3b 0),
      linear-gradient(#cdf3 0 0)
      ;
  }
  
  .door .door-board::after {
    background:
      #643f2b radial-gradient(gray 70%, #0000 0) no-repeat 50% 53% / 1vmin 1vmin;
  }
  
  .door-board span.cube {
    --h: 0;
    --s: 0%;
    --l: 80%;
    --d: 0.5vmin;
    --t: -3vmin;
    display: block;
    position: absolute;
  }
  
  .door-board span.cube.handle {
    top: 50%;
    right: 0.25vmin;
    width: 25%;
    height: 5%;
  }
  
  .door-board span.cube.handle > div {
    background:
      #eee radial-gradient(gray 70%, #0000 0) no-repeat 80% 53% / 1vmin 1vmin;
  }
  
  .door-board span.cube.neck {
    --d: 1.5vmin;
    --t: -1.75vmin;
    top: 50%;
    right: 0.25vmin;
    width: 5%;
    height: 5%;
  }
  
  .window {
    width: 30vmin;
    height: 45vmin;
    top: 20%;
    left: 3vmin;
    transform-style: preserve-3d;
    background:
      linear-gradient(45deg, #0000 70%, #fff2 0 75%, #0000 0 78%, #fff2 0 80%, #0000 0)
      ;
    background-color: #cdf3;
    
  }
  
  .window div {
    --d: 3vmin;
    --t: 1.5vmin;
    transform-style: preserve-3d;
  }
  
  .frame-top + .frame-top {
    bottom: 0;
  }
  
  .wall {
    width: 100%;
    height: 100%;
  }
  
  .wall .cube {
    --s: 10%;
    --l: 80%;
    --d: 4vmin;
    --t: 2vmin;
  }
  
  .wall .cube:nth-child(1) { width: 5%; height: 100%; }
  .wall .cube:nth-child(2) { left: 33vmin; width: 7vmin; height: 100%; }
  .wall .cube:nth-child(3) { width: 50%; right: 0; bottom: 54vmin; height: 20%; }
  .wall .cube:nth-child(4) { width: 100%; height: 20%; }
  .wall .cube:nth-child(5) { width: 50%; bottom: 0; height: 20%; }
  .wall .cube:nth-child(6) { right: 0; width: 5vmin; height: 100%; }
  .wall .cube:nth-child(7) { 
    --d: 82vmin;
    --t: 80vmin;
    left: -2.5vmin;
    width: 4vmin; 
    height: 100%; 
  }
  
  .wall .cube:nth-child(7) .poster-1 {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 2.5vmin;
    font-family: Georgia, sans-serif;
    box-sizing: border-box;
    width: 23vmin;
    height: 18vmin;
    left: 0;
    position: absolute;
    transform: rotateY(90deg) translate3d(-19.5vmin, 20vmin, -12vmin) rotateZ(6deg) scaleX(-1);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 77%, 5% 75%, 0% 74%);
  }
  
  .poster-1 img {
    display: flex;
        margin-top: auto;
    margin-bottom: auto;
    height: 100%;
    width: 100%;
  }
  
  .wall .cube:nth-child(7) .poster-2 {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 2.5vmin;
    font-family: Georgia, sans-serif;
    box-sizing: border-box;
    width: 40vmin;
    height: 30vmin;
    left: 0;
    position: absolute;
    transform: rotateY(90deg) translate3d(-45vmin, 25vmin, -15.9vmin)  scaleX(-1);
  }
  
  .poster-2 img {
    display: flex;
    margin-top: auto;
    margin-bottom: auto;
    height: 100%;
    width: 100%;
}
.wall .cube:nth-child(7) .poster-2 > span {
  transform: scale(-1, 1);
}
  .wall .cube:nth-child(7) .poster-3 {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 2.5vmin;
    font-family: Georgia, sans-serif;
    box-sizing: border-box;
    width: 28vmin;
    height: 5vmin;
    left: 0;
    background-color: #d8d8c5;
    position: absolute;
    transform: rotateY(90deg) translate3d(-20vmin, 10vmin, -9.9vmin) rotateZ(4deg) scaleX(-1);
  }
  

.poster-3 img {
    margin-top: auto;
    margin-bottom: auto;
    height: 100%;
    width: 100%;
}
.wall .cube:nth-child(7) .poster-3 > span {
    transform: scale(-1, 1);
  }

.wall .cube:nth-child(7) .poster-4 {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 2.5vmin;
    font-family: Georgia, sans-serif;
    box-sizing: border-box;
    width: 28vmin;
    height: 20vmin;
    left: 0;
  
    position: absolute;
    transform: rotateY(90deg) translate3d(-60vmin, 10vmin, -9.9vmin) rotateZ(-4deg) scaleX(-1);
  }
  

  .poster-4 img {
    margin-top: auto;
    margin-bottom: auto;
    height: 100%;
    width: 100%;
}
.wall .cube:nth-child(7) .poster-4 > span {
    transform: scale(-1, 1);
  }
  

  .wall .cube:nth-child(7) .poster-5 {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 2.5vmin;
    font-family: Georgia, sans-serif;
    box-sizing: border-box;
    width: 10vmin;
    height: 11vmin;
    left: 0;
    background-color: transparent;
    position: absolute;
    transform: rotateY(180deg) translate3d(-8vmin, 2vmin, -77vmin) rotateZ(0deg) scaleX(-1);
  }

  .poster-5 img {
    margin-top: auto;
    margin-bottom: auto;
    height: 100%;
    width: 100%;
}
.wall .cube:nth-child(7) .poster-5 > span {
    transform: scale(-1, 1);
  }

  .wall .cube:nth-child(7) .no-posters {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 3.35vmin;
    font-family: Arial, sans-serif;
    box-sizing: border-box;
    width: 20vmin;
    height: 30vmin;
    left: 0;
    background: radial-gradient(circle, #0000 25%, #d00 0 30%, #0000 0),
      linear-gradient(-45deg, #0000 45%, #d00 0 55%, #0000 0) no-repeat 50% 50% / 7vmin 7vmin;
    background-color: #ccc;
    position: absolute;
    transform: rotateY(90deg) translate3d(-40vmin, 20vmin, -10.1vmin) scaleX(-1);
    clip-path: polygon(0% 0%, 33% 0%, 35% 5%, 38% 0%, 100% 0%, 100% 30%, 90% 32%, 97% 35%, 92% 37%, 100% 37.5%, 100% 100%, 5% 100%, 0% 99%);
  }
  
 
  .wall .cube:nth-child(7) .poster-9{ 
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 2.5vmin;
    font-family: Georgia, sans-serif;
    box-sizing: border-box;
    width: 2.3vmin;
    height: 3vmin;
    left: 0;
  
    position: absolute;
    transform:  rotateY(90deg) rotateZ(0deg) translate3d(-70vmin, 55vmin, 32vmin)  scaleX(-1);
  
  }

  .poster-9 img {
    margin-top: auto;
    margin-bottom: auto;
    height: 100%;
    width: 100%;
  }
  
  .wall .cube:nth-child(7) .poster-9 > span {
    transform: scale(-1, 1);
  }


  .wall .cube:nth-child(7) .poster-10{ 
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 2.5vmin;
    font-family: Georgia, sans-serif;
    box-sizing: border-box;
    width: 2.3vmin;
    height: 3vmin;
    left: 0;
  
    position: absolute;
    transform:  rotateY(90deg) rotateZ(0deg) translate3d(-75vmin, 55vmin, 32vmin)  scaleX(-1);
  
  }

  .poster-10 img {
    margin-top: auto;
    margin-bottom: auto;
    height: 100%;
    width: 100%;
  }
  
  .wall .cube:nth-child(7) .poster-10 > span {
    transform: scale(-1, 1);
  }


  .wall .cube:nth-child(7) .poster-11{ 
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 2.5vmin;
    font-family: Georgia, sans-serif;
    box-sizing: border-box;
    width: 2.3vmin;
    height: 3vmin;
    left: 0;
  
    position: absolute;
    transform:  rotateY(90deg) rotateZ(0deg) translate3d(-65vmin, 55vmin, 32vmin)  scaleX(-1);
  
  }

  .poster-11 img {
    margin-top: auto;
    margin-bottom: auto;
    height: 100%;
    width: 100%;
  }
  
  .wall .cube:nth-child(7) .poster-11 > span {
    transform: scale(-1, 1);
  }


  .wall .cube:nth-child(7) .poster-12{ 
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 2.5vmin;
    font-family: Georgia, sans-serif;
    box-sizing: border-box;
    width: 2.3vmin;
    height: 3vmin;
    left: 0;
  
    position: absolute;
    transform:  rotateY(90deg) rotateZ(0deg) translate3d(-60vmin, 55vmin, 32vmin)  scaleX(-1);
  
  }

  .poster-12 img {
    margin-top: auto;
    margin-bottom: auto;
    height: 100%;
    width: 100%;
  }
  
  .wall .cube:nth-child(7) .poster-12 > span {
    transform: scale(-1, 1);
  }
  .wall .cube:nth-child(7) .poster {
    --color: #f69;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    text-align: center;
    font-size: 3.35vmin;
    font-family: Georgia, Garamond, serif;
    box-sizing: border-box;
    padding-bottom: 2vmin;
    width: 20vmin;
    height: 30vmin;
    left: 0;
    background: 
      radial-gradient(circle, #333 15%, #0000 0) no-repeat 40% 25% / 20% 20%,
      radial-gradient(circle, #333 15%, #0000 0) no-repeat 60% 25% / 20% 20%,
      
      radial-gradient(farthest-side at 50% 0%, #333 0 50%, #0000 0) no-repeat 50% 36% / 20% 7%,
      
      radial-gradient(circle at 50% 84%, var(--color) 26%, #0000 0) no-repeat 50% -100% / 70% 70%,
      radial-gradient(circle at 50% 50%, var(--color) 35%, #0000 0) no-repeat 50% 40% / 20% 20%,
      radial-gradient(circle at 50% 50%, var(--color) 30%, #0000 0) no-repeat 63% 38% / 20% 20%,
      radial-gradient(circle at 50% 50%, var(--color) 35%, #0000 0) no-repeat 32% 37% / 20% 20%,
      radial-gradient(circle at 50% 50%, var(--color) 24%, #0000 0) no-repeat 40% 40% / 20% 20%,
      radial-gradient(circle at 50% 50%, var(--color) 35%, #0000 0) no-repeat 70% 37% / 20% 20%,
      
      radial-gradient(circle at 50% 84%, #f69 26%, #0000 0) no-repeat 50% -100% / 70% 70%,
      conic-gradient(at 50% 100%, #eb8 20deg, #0000 0 340deg, #eb8 0) no-repeat 50% 50% / 7vmin 50%;
    background-color: #ddd;
    position: absolute;
    transform: rotateY(90deg) translate3d(-20vmin, 20vmin, -6.01vmin);
  }
  
  .wall .paint {
    --color: hsl(var(--h), var(--s), var(--l));
    --color: #d2c8c7;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateZ(-2vmin);
    transform: translateZ(-2.1vmin);
    background: red;
    background:
      linear-gradient(to right, #0000 50%, var(--color) 0) 0 0 / 100% 20vmin,
      linear-gradient(to right, var(--color) 4vmin, #0000 0 33vmin, var(--color) 0 40vmin, #0000 0 65vmin, var(--color) 0),
      linear-gradient(var(--color) 20%, #0000 0)
      ;
    background-repeat: no-repeat;
  }
  
  .paint + .paint {
    transform: translateZ(2.1vmin);
  }
  
  .clock {
    width: 10vmin;
    height: 10vmin;
    transform: translate3d(48vmin, 6vmin, -2.15vmin);
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.25vmin #444;
    
    background-color: white;
    transform-style: preserve-3d;
  }
  
  .clock::before,
  .clock::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 0 1.25vmin #444;
    transform: translateZ(-0.2vmin);
    background:
      linear-gradient(black 0 0) 50% calc(50% - 0.75vmin) / 0.75vmin 3vmin,
      linear-gradient(45deg, #0000 0 45%, black 0 55%, #0000 0) 40% calc(50% - 0.75vmin) / 3vmin 3vmin
    ;
    background-repeat: no-repeat;
  }
  
  .clock::after {
    transform: translateZ(-0.4vmin);
  }
  
  .clock > div {
    background: #444;
    width:0.5vmin;
    height: 50%;
    right: 2vmin;
    transform: rotateY(90deg) rotateX(45deg);
  }
  
  .clock > div::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    transform: rotateX(90deg) translate3d(0vmin, -2vmin, -1vmin) ;
    transform-origin: 50% 100%;
    top: 0;
    left: 0;
    background: #444;
  }
  
  .clock > div::after {
    content: "";
    display: block;
    width: 100%;
    height: 70%;
    position: absolute;
    transform: rotateX(-45deg) translateZ(-2vmin);
    top: 100%;
    left: 0;
    background: #444;
  }


  


  .floor {
    --d: 80vmin;
    --t: 80vmin;
    --s: 10%;
    --l: 80%;
    width: 100%;
    height: 4vmin;
    bottom: 0;
    left: 0;
  }
  
  .floor > div::before {
    background:
      
      linear-gradient(#0000 2vmin, #0000 0),
      repeating-linear-gradient(45deg, #0000 0 6%, #0001 0 6.25%),
      repeating-linear-gradient(-45deg, #0000 0 6%, #0001 0 6.25%),
      linear-gradient(#0000 2vmin, #fca 0)
  }
  
  .shade {
    left: -1%;
    width: 100%;
    height: 45%;
    background: #c2110b;
    transform: rotateX(55deg);
    transform-origin: 50% 0;
    background-image:image(C:\Users\Kienan Smith\Desktop\html_css\images\reddy_logo_no_outline.jpeg) ;
  }
  
  .shade img {
    margin-top: 20px;
    margin-bottom: auto;
    height: 85%;
    width: 100%;
    
  }
  .shade::before {
    content: "";
    display:block;
    position: absolute;
    width: 100%;
    height: 15%;
    top: 100%;
    left: 0;
    transform: rotateX(-55deg);
    transform-origin: 50% 0;
    background:
      radial-gradient(50% 120% at 25% 0, #c2110b 50%, #0000 0) 0 0 / 12.5% 100%,
      radial-gradient(50% 120% at 75% 0, #c2110b 50%, #0000 0) 0 0 / 12.5% 100%
  }
  
  .shade::after {
    content: "";
    display:block;
    position: absolute;
    width: 100%;
    height: 3%;
    top: 100%;
    left: 0;
    transform: rotateX(-25deg) translate(0, -50%);
    transform-origin: 50% 0;
    background: 
      linear-gradient(#0003, #0000, #0002),
      repeating-linear-gradient(to right, #c2110b 0 6.25%, #c2110b 0 12.5%);
  }
  
  .bar {
    width: 1vmin;
    height: 90%;
    bottom: 0;
    background: #222;
    transform: rotateX(55deg);
    transform-origin: 50% 100%;
  }
  
  .bar + .bar {
    right: 0;
  }
  
  .bar::before,
  .bar::after {
    content: "";
    display: block;
    position: absolute;
    top: -1%;
    left: 0;
    width: 100%;
    height: 100%;
    background: #222;
    transform: rotateY(60deg);
  }
  
  .bar::after {
    transform: rotateY(120deg);
  }
  
  
  .table {
    width: 25vmin;
    height: 25vmin;
    abackground: #f003;
    transform: translate3d(40vmin, 30vmin, -50vmin) rotateX(90deg);
    transform-origin: bottom center;
    transform-style: preserve-3d;
  }
  
  .table .board,
  .table .board::before,
  .table .board::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #eee;
    border-radius: 50%;
    transform-style: preserve-3d;
  }
  
  .table .board::before {
    transform: translateZ(-0.15vmin);
    background: #ddd;
  }
  
  .table .board::after {
    transform: translateZ(-0.3vmin);
  }
  
  .table .board + .board {
    transform: translateZ(-0.45vmin);
    background: #ddd;
  }
  
  .table .board + .board  + .board {
    transform: translateZ(-0.9vmin);
  }
  
  
  .table .board-depth {
    width: 1.2vmin;
    height: 100%;
    background: #ddd;
    left: 50%;
    top: 0;
    transform-origin: 0% 50%;
    transform: rotateY(90deg);
  }
  
  .table .board-depth::before,
  .table .board-depth::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background: #ddd;
    transform: rotateX(60deg)
  }
  
  .table .board-depth::after {
    transform: rotateX(-60deg)
  }
  
  .table .pole {
    --h: 0deg;
    --s: 0%;
    --d: 1vmin;
    height: 16vmin;
    width: 1vmin;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: rotateX(-90deg) translate(-50%, 0%);
    transform-origin: top center;
  }

  
  
  .table .shadow {
    width: 100%;
    height: 100%;
    background: #0002;
    border-radius: 50%;
    filter: blur(2vmin);
    transform: translateZ(-16vmin);
  }
  
  .table .base {
    width: 50%;
    height: 50%;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, -16vmin);
    background: #666;
    border-radius: 50%;
  }
  
  .table .base::before, 
  .table .base::after {
    content: ""; 
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background: #777;
    transform: translateZ(0.15vmin);
    border-radius: 50%;
  }
  
  .table .base::after {
    background: #575757;
    transform: translateZ(0.3vmin);
  }
  
  
  .chair {
    width: 9vmin;
    height: 9vmin;
    transform: translate3d(55vmin, 62vmin, -69vmin) rotateX(90deg) rotate(50deg);
    transform-origin: bottom center;
    transform-style: preserve-3d;
  }
  
  .chair .shadow {
    width: 120%;
    height: 120%;
    top: -10%;
    left: -10%;
    background: #0002;
    filter: blur(2vmin);
  }
  
  .chair .leg {
    --h: 30deg;
    --s: 70%;
    --l: 63%;
    --d: 1vmin;
    top: -1vmin;
    width: 1vmin;
    height: 9vmin;
    transform: rotateX(-90deg);
    transform-origin: 50% 100%;
  }
  
  .chair .leg-2 {
    right: 0%;
  }
  
  .chair .leg-3 {
    right: 0;
    top: auto;
    bottom: 100.75%;
    height: 20vmin;
  }
  
  .chair .leg-4 {
    left: 0;
    top: auto;
    bottom: 100.75%;
    height: 20vmin;
  }
  
  .chair .seat {
    --d: 1vmin;
    --t: -8vmin;
    width: 100%;
    height: 100%;
  }
  
  .chair .back {
    --h: 30deg;
    --s: 70%;
    --l: 63%;
    --d: 0.5vmin;
    bottom: 99%;
    width: 100%;
    height: 1vmin;
    transform: rotateX(-90deg) translateY(-16vmin);
    transform-origin: 50% 100%;
  }
  
  .chair .back + .back {
    transform: rotateX(-90deg) translateY(-18.5vmin);
  }
  
  .desk {
    --s: 0%;
    --l: 75%;
    --d: 45vmin;
    --t: 50vmin;
    left: -2.5vmin;
    width: 15vmin; 
    height: 13vmin;
    transform: translate3d(20vmin, 59vmin, -48vmin);
    box-shadow: inset 0 4vmin 4vmin -2vmin #0002;
  }
  
  .desk::before {
    box-shadow: inset 0 4vmin 4vmin -2vmin #0003;
    background:
      radial-gradient(at 55% 50%, #0003 1vmin, #0000 0),
      radial-gradient(at 40% 50%, #0003 1vmin, #0000 0),
      linear-gradient(to right, #0000 21vmin, #0003 0 22vmin, #0000 0)
      ;
    background-repeat: no-repeat;
    background-color: #999;
  }
  
  .counter-top {
    --s: 0%;
    --l: 100%;
    --d: 25vmin;
    --t: 50vmin;
    left: -2.5vmin;
    width: 17vmin; 
    height: 2vmin;
    transform: translate3d(19vmin, 57vmin, -49vmin);
  }
  
  .display-top {
    --s: 0%;
    --l: 100%;
    --d: 21vmin;
    --t: 50vmin;
    left: -2.5vmin;
    width: 17vmin; 
    height: 2vmin;
    transform: translate3d(19vmin, 57vmin, -24vmin);
  }
  
  .display-top > div::before {
    background: #0000;
  }
  
  .display-top > div::after {
    background: 
     
      
    background-repeat: no-repeat;
  }
  

  
  .display::before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    transform: translateZ(21vmin);
    background:
      linear-gradient(to right, #f8f8f8 1vmin, #0000 0),
      linear-gradient(75deg, #cdf5 75%, #ddd 0 78%, #0000 0)
      ;
  }
  
  .display::after {
    content: "";
    display: block;
    position: absolute;
    height: 100%;
    width: 21vmin;
    transform: rotateY(90deg) rotateX(15deg) translate3d(-21vmin, 4.5vmin, 14vmin);
    transform-origin: 0% 50%;
    background: linear-gradient(#ccc 1vmin, #0000 0 calc(100% - 1vmin), #ccc 0),
      linear-gradient(to right, #ccc 1vmin, #0000 0 calc(100% - 1vmin), #ccc 0),
      linear-gradient(#cdf4 0 0)
  }
  
 
  
  /***/
  
  
  


  body
  {
    margin: 0;
    padding: 0;
    
    
    color: #000000;
    font-family: "Avenir Next", "Avenir", sans-serif;
  }
  
  #menuToggle
  {
    display: block;
    position: relative;
    top: 50px;
    left: 50px;
    
    z-index: 1;
    
    -webkit-user-select: none;
    user-select: none;
  }
  
  #menuToggle a
  {
    text-decoration: none;
    color: #232323;
    
    transition: color 0.3s ease;
  }
  
  #menuToggle a:hover
  {
    color: tomato;
  }
  
  
  #menuToggle input
  {
    display: block;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;
    
    cursor: pointer;
    
    opacity: 0; /* hide this */
    z-index: 2; /* and place it over the hamburger */
    
    -webkit-touch-callout: none;
  }
  
  
  #menuToggle span
  {
    display: block;
    width: 33px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;
    
    background: #000000;
    border-radius: 3px;
    
    z-index: 1;
    
    transform-origin: 4px 0px;
    
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                opacity 0.55s ease;
  }
  
  #menuToggle span:first-child
  {
    transform-origin: 0% 0%;
  }
  
  #menuToggle span:nth-last-child(2)
  {
    transform-origin: 0% 100%;
  }
  
  
  #menuToggle input:checked ~ span
  {
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
    background: #232323;
  }
  
  
  #menuToggle input:checked ~ span:nth-last-child(3)
  {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
  }
  
 
  #menuToggle input:checked ~ span:nth-last-child(2)
  {
    transform: rotate(-45deg) translate(0, -1px);
  }
  
  
  #menu
  {
    position: absolute;
    width: 300px;
    margin: -100px 0 0 -50px;
    padding: 50px;
    padding-top: 125px;
    
    background: #ededed;
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    
    transform-origin: 0% 0%;
    transform: translate(-100%, 0);
    
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  }
  
  #menu li
  {
    padding: 10px 0;
    font-size: 22px;
  }
  
 
  #menuToggle input:checked ~ ul
  {
    transform: none;
  }

.video{
    display:none;
}

  @media screen and (max-width: 767px) {
  
    .video {
      width:auto;
      height: 100vh;
      display:inline-flex;
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 0;
      transform: translate(-50%, -50%);
      opacity: 1;

    }
   
    

    .canvas {
      display:none;
      transform: translateZ(0px);
      transform: translate(-50%, -50%) translate3d(0vmin, 0, -40vmin) rotate3d(0, 1, 0, 00deg);
      -webkit-transform: translate(-50%, -50%) translate3d(0vmin, 0, -40vmin) rotate3d(0, 1, 0, 00deg);
    }
   
    .table .base::before, 
  .table .base::after {
    transform: translateZ(0vmin);
  }

  .shade::before {

    -webkit-transform:translate3d(0,0,0);
    

}

.shade::after {
  -webkit-transform:translate3d(0,0,0);
    
}

  }