#lecube{
	width:250px;
	height:220px;
	margin: 0; /* this overrides the default margin - which is crucial if your background isn't white/blank/undefined */
	box-sizing: border-box; /* ensures that the border is within the container's limits rather than outside */
	/* the hex code for dark gray, the equivalent of rgb(48,48,48) or hsl(0deg 0% calc( 100% / 16 *3)), and a shorthard for #333333 )*/
	display: flex; /* you could alternately use grid */
	flex-direction: row; /* items are arranged horizontally - i.e. sitting next to each other */
	justify-content: center; /* groups the objects together at the center horizontally */
	align-items: center; /* centers every object vertically */
	min-height: 100px; /* we need the viewport (the browser window) to be 100vh (100 viewport height units) so that there is enough space to suspend the object in */
  font-size: .5vh; /* sets a fontsize dependent on the height of the viewport */
	position: relative;
	top: 1px;
	margin-right: auto;
	margin-left: auto;
}
.wrapp {
  display: grid; /* to center the PLAY button */
}

.scene {
  height: 40em; /* sets the width to be 100 units of the font size, thus ensuring responsive scaling that mimics percentages */
  aspect-ratio: 1; /* makes sure the height matches the width of the container, making it a square*/
  perspective: 250em; /* sets the distance of the perspective */
  position: relative; /* makes the position of the container independent of any other neighboring container - placed wherever you want rather than relative to its neighbors, and free to overlap */
 /*   filter: drop-shadow(0 0 3em lime);adds a green glow to the white lines */
}

.scene * {
  position: absolute; /*see absove*/
  inset: 0; /* gives the containers nested in the .scene tag a margin of 0, thus making them fill it 100% in width and height; this is shorthand for top, right, bottom, left */
}

.cube {
  animation: spin 10s linear infinite; /* applies an infinite animation loop of the cube slowly spinning around */
}

.wall {
	border: 1px solid black; /* each wall has a white border - which is contained within the wall's width (this is what box-sizing: border-box does) */
	
}

.front2 {
  transform: translateZ(20em); /* pushes the wall out forward from the center, as if closer to the viewer*/
}
.back {
  transform: translateZ(-20em); /* pushes the wall back, farther from the viewer*/
}
.back2 {
	transform: translateZ(-20em); /* pushes the wall back, farther from the viewer*/

}.back2 img{
float:right; left:82px; top:0px; /* turns the wall clockwise, to its left (your right), then pushes it forward (again: its forward, not yours) */
}
.left {
	
	transform: rotateY(90deg) translateZ(20em); /* turns the wall clockwise, to its left (your right), then pushes it forward (again: its forward, not yours) */

}
.left2 { 
  transform: rotateY(90deg) translateZ(20em); /* turns the wall clockwise, to its left (your right), then pushes it forward (again: its forward, not yours) */
}
.left img{
 left:20px; top:20px; /* turns the wall clockwise, to its left (your right), then pushes it forward (again: its forward, not yours) */
}

.right {	background-repeat: no-repeat;background-image: url(../door.png);
  transform: rotateY(-90deg) translateZ(20em); /* turns the wall counterclockwise, to its right (your left), then pushes it forward (again: its forward, not yours) */
}

.top {
  transform: rotateX(90deg) translateZ(20em); /* turns the wall clockwise, towards the ceiling, then pushes it forward (again: its forward, not yours) */
}

.bottom {
  transform: rotateX(-90deg) translateZ(20em); /* turns the wall counterclockwise, towards the floor, then pushes it forward (again: its forward, not yours) */
}

@keyframes spin { /* the cube makes a full 360 degree turn */
  100% {
    rotate: y 360deg;
  }
}


/* OPTIONAL READING

This section details the appearance and the functioning of the play/pause toggler. It is not a part of the cube - but still a fun thing to learn if you're up for it.

*/

input {
  display: none; /* hides the input, we'll have a label for it instead that is nicer than a tick-box */
}

.playBtn { /* that's the label */
  position: absolute;
  width: 40em;
  aspect-ratio: 1;
  z-index: 1; /* places the label on a layer above the cube - as otherwise it'd be inside the 3D solid, and you wouldn't be able to interact with it */
  display: grid; /* this label will have nested content, and we want it centered */
  place-self: center; /* since its parent's display: grid, this object can center itself; very useful! - and flex can't do that */
  place-items: center; /* the object's own display is grid - because it doesn't automatically inherit display from its parent, and we want to center its children, too. */
  transition: all .5s ease-in-out; /* when you interact with the button - hover, check/uncheck the input - it will change appearance. This makes it switch between each look smoothly rather than instantly */
 /*  filter: drop-shadow(0 0 3em lime); adds a green glow to the white lines */
}

.playBtn::before {
}
.playBtn::after { 
 }

.playBtn:hover { /* when you mouse over the label... */
  scale: 1.25; /* ...it gets a little bit larger */
}

.playBtn:hover::before,
.playBtn:hover::after  {
  filter: drop-shadow(0 0 3em lime); /* ...and it starts glowing brighter */
}


#play:checked ~ .playBtn { /* when you hit the PLAY button */
 scale: 1.55;/*   rotate: -90deg;...it turns to its side */
}

#play:checked ~ .playBtn::before,
#play:checked ~ .playBtn::after  {
  transform: none;
  inset: 35% 0;
  border-color: #fff;
  border-width: 3em;
  translate: 0 calc(-80%*var(--dir)); /* ...and turns into a pause button */
  transform-origin: 50% 50%;
}

.tranStyle { /* the navbar for perspective mode GUI */
  margin-top: 0;
  margin-left: 40em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}



.yesNo {
  position: relative;
  width: 30em;
  aspect-ratio: 1;
  margin: 3em;
  padding: 3em;
  border: 7px solid #fff;
  box-shadow: 0 0 3em 2px lime, inset 0 0 3em 2px lime; /* similar to border, and since it's inset, it expands inwards rather than outwards; though right now it's invisible */
  transition: box-shadow .6s, scale .3s ease-in-out;
  display: flex;
  align-items: center;
}

.yesNo::before, .yesNo::after {
  content: '';
  position: absolute;
  width: 5em;
  border-radius: 2.5em;
  background-color: lime;
  box-shadow: 0 0 1em 1em #088;
  left: calc(45% + 40%*var(--dir));
  height: 140%;
  transform: skewX(calc(-16deg*var(--dir)));
  transform-origin: 50% 0;
  transition: all .5s ease-in-out;
}

.yesNo::before {
  --dir: 1;
}

.yesNo::after {
  --dir: -1;
  mix-blend-mode: hard-light;
}

#keep3D:checked ~ .wrapp .scene * {
  transform-style: preserve-3d; /* makes sure that each container nested inside the .scene tag treats its nested content as a 3D object rather than a 2D projection */
}

#keep3D:not(:checked) ~ .tranStyle .yesNo::before,
#keep3D:not(:checked) ~ .tranStyle .yesNo::after {
  transform: skewX(calc(-30deg*var(--dir)));
  background-color: #f20;
  box-shadow: 0 0 3em 1em #f04;
}