@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

@font-face {
	font-family: "Atarian System";
	src: url("https://cdn.josetxu.com/fonts/SfAtarianSystem.ttf") format("truetype");
}

/*** CAMERA START ***/

html {
	cursor: grab;
}

html:active {
	cursor: grabbing;
}

:root {
	--unit: 1vmin;
	--zoom: 100;
	--available-screen-min: 665;
	--px: calc(var(--zoom) * (var(--unit) / var(--available-screen-min)));
	--auto-rotate-duration: 10s;
	--auto-rotate-timing-func: ease;
	--auto-rotate-direction: forwards;
}

[data-camera] {
	--scene-size: 500;
	--scale: 90;
	--perspective: 1500;
	--cameraZ: 0;
	--cameraY: 0;
	--translateX: 0;
	--translateY: 0;
	--translateZ: 0;
	--auto-rotate-timing-func: linear;
	--auto-rotate-duration: 10s;
	--auto-rotate-direction: forwards;
	position: absolute;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	--fmt-s: calc(var(--scale, 100) / 100);
	transform: scale(var(--fmt-s));
	display: grid;
	place-items: center;
	overflow: visible;
	transition: transform ease 500ms;
	will-change: transform;
}

[data-scene] {
	position: relative;
	left: 0;
	top: 0;
	max-width: 50vmin;
	min-height: 80vmin;
	width: calc(var(--scene-size) * var(--px));
	height: calc(var(--scene-size) * var(--px));
	transform: perspective(calc(var(--perspective, 1000) * 1px)) rotateX(calc(var(--cameraY, 0) * 1deg)) rotateY(calc(var(--cameraZ, 0) * -1deg)) translate3d(calc(var(--translateX, 0) * var(--px)), calc(var(--translateY, 0) * var(--px) * -1), calc(var(--translateZ, 0) * var(--px) * -1));
	--max-rotation: calc((360 + var(--cameraZ)) * 1deg);
	transform-origin: 50% 50%;
}

[data-camera][data-dragging] {
	transition: none;
}

@-webkit-keyframes rotateCamera {
	to {
		transform: perspective(calc(var(--perspective, 1000) * 1px)) rotateX(calc(var(--cameraY, 0) * 1deg)) rotateY(var(--max-rotation)) translate3d(calc(var(--translateX, 0) * var(--px)), calc(var(--translateY, 0) * var(--px) * -1), calc(var(--translateZ, 0) * var(--px) * -1));
	}
}

@keyframes rotateCamera {
	to {
		transform: perspective(calc(var(--perspective, 1000) * 1px)) rotateX(calc(var(--cameraY, 0) * 1deg)) rotateY(var(--max-rotation)) translate3d(calc(var(--translateX, 0) * var(--px)), calc(var(--translateY, 0) * var(--px) * -1), calc(var(--translateZ, 0) * var(--px) * -1));
	}
}

[data-camera][data-autorotate] > [data-scene] {
	-webkit-animation: rotateCamera var(--auto-rotate-timing-func) var(--auto-rotate-duration) var(--auto-rotate-direction) infinite;
	animation: rotateCamera var(--auto-rotate-timing-func) var(--auto-rotate-duration) var(--auto-rotate-direction) infinite;
}

/*** CAMERA END ***/












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

body {
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	perspective: 200vmin;
	font-family: 'Press Start 2P', Arial, Helvetica, serif;
	font-size: 1.2vmin;
	color: #fff;
	background: radial-gradient(circle at 50% 0%, #ffc107, purple);
	background: radial-gradient(circle at 50% -50%, #b0e5ff, #001620);
}

.content {
	width: 50vmin;
	height: 80vmin;
	transition: all 1s ease 0s;
	/*transform: rotateY(15deg) rotatex(-5deg) scale3d(2.5, 2.5, 2.5);*/
	transform: rotateY(0deg) rotateX(-2deg) scale3d(1, 1, 1) translate(0vmin, 0vmin);
	animation: start 4s ease 0s 1;
}

@keyframes start {
	0% { transform: rotateY(0deg) rotateX(2deg) scale3d(1, 1, 1) translate(0vmin, 0vmin); }
	33% { transform: rotateY(-30deg) rotateX(-2deg) scale3d(1, 1, 1) translate(0vmin, 0vmin); }
	66% { transform: rotateY(30deg) rotateX(2deg) scale3d(1, 1, 1) translate(0vmin, 0vmin); }
	100% { transform: rotateY(0deg) rotateX(-2deg) scale3d(1, 1, 1) translate(0vmin, 0vmin); }
}

.content.game-mode {
	transform: rotateY(0deg) rotatex(-6deg) scale3d(2.25, 2.25, 2.25) translate(0vmin, 8vmin);
	transition: all 1s ease 0s;
}


/*** CUBOID START ***/

.cuboid {
	--height: 1;
	--width: 46;
	--depth: 48;
	--hue: 222;
	--sat: 50%;
	--lum: 50%;
	height: calc(var(--height) * 1vmin);
	width: calc(var(--width) * 1vmin);
	position: absolute;
	transform: translate3d(2vmin, 0vmin, 0vmin);
}

.cuboid .side {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 100%;
	width: 100%;
	border-radius: 2px;
	background-color: #000;

	border: 1px solid #fff2;
}

.cuboid .side:nth-of-type(1) {
	transform: translate3d(-50%, -50%, calc(var(--depth) * 0.5vmin));
	background-color: #121212;
}
.cuboid .side:nth-of-type(2) {
	transform: translate3d(-50%, -50%, calc(var(--depth) * -0.5vmin))
		rotateY(180deg);
	background-color: #111;
}
.cuboid .side:nth-of-type(3) {
	width: calc(var(--depth) * 1vmin);
	transform: translate(-50%, -50%) rotateY(90deg)
		translate3d(0, 0, calc(var(--width) * 0.5vmin));
	background-color: #444;
}
.cuboid .side:nth-of-type(4) {
	width: calc(var(--depth) * 1vmin);
	transform: translate(-50%, -50%) rotateY(-90deg)
		translate3d(0, 0, calc(var(--width) * 0.5vmin));
	background-color: #222;
}
.cuboid .side:nth-of-type(5) {
	height: calc(var(--depth) * 1vmin);
	transform: translate(-50%, -50%) rotateX(90deg)
		translate3d(0, 0, calc(var(--height) * 0.5vmin));
	background-color: #333;
}
.cuboid .side:nth-of-type(6) {
	height: calc(var(--depth) * 1vmin);
	transform: translate(-50%, -50%) rotateX(-90deg)
		translate3d(0, 0, calc(var(--height) * 0.5vmin));
	background-color: #010101;
}


/* CUBOIDS */

.cuboid.bot {
	transform: translate3d(2vmin, 80vmin, 0vmin);
}

.cuboid.top-bot {
	transform: translate3d(2vmin, 9vmin, 0vmin) rotateX(2deg);
}	
.cuboid.top-front {
	--height: 7.5;
	--depth: 1;
	transform: translate3d(2vmin, 0.9vmin, 21.9vmin);
}	
.cuboid.bot-front {
	--height: 32;
	--depth: 1;
	transform: translate3d(2vmin, 48vmin, 22vmin);
}	

.cuboid.bot-top {
	transform: translate3d(2vmin, 45vmin, -0.25vmin) rotateX(-6deg);
}
.cuboid.bot-top .side:nth-of-type(5):before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #fff0 20%, #666 50% 65%, #fff0 67%);
}

.cuboid.back {
	--height: 80;
	--depth: 1;
	transform: translate3d(2vmin, 0vmin, -24vmin) rotateX(0.65deg);
}	

.cuboid.left, .cuboid.right {
	--height: 80;
	--width: 1;
	--depth: 45.5;
	transform: translate3d(1.9vmin, 0.5vmin, -1vmin) rotateX(0.25deg);
}	

.cuboid.left .side:nth-of-type(4), .cuboid.right .side:nth-of-type(4) {
	clip-path: polygon(100% 0%, 100% 11%, 60% 11%, 70% 58%, 100% 59.5%, 100% 100%, 0% 100%, 0% 0%);
}

.cuboid.left .side:nth-of-type(3), .cuboid.right .side:nth-of-type(3) {
	clip-path: polygon(100% 0%, 0% 0%, 0% 11%, 40% 11%, 30% 58%, 0% 59.5%, 0% 100%, 100% 100%);
}

.cuboid.left .side:nth-of-type(1), .cuboid.right .side:nth-of-type(1) {
	opacity: 0;
}

.cuboid.left-front, .cuboid.right-front {
	--height: 40;
	--width: 1;
	--depth: 1;
	transform: translate3d(2vmin, 8.5vmin, 5.5vmin) rotateX(7.25deg);
}

.cuboid.right {
	transform: translate3d(47.1vmin, 0.5vmin, -1vmin) rotateX(0.25deg);
}	
.cuboid.right-front {
	transform: translate3d(47vmin, 8.5vmin, 5.5vmin) rotateX(7.25deg);
}

.cuboid.box {
	--height: 35.5;
	--width: 43.725;
	--depth: 15;
	transform: translate3d(3.15vmin, 10.75vmin, -7vmin) rotateX(7.25deg);
}

.cuboid.screen {
	--height: 30;
	--width: 40;
	--depth: 15;
	transform: translate3d(5vmin, 13.5vmin, -5vmin) rotateX(7.25deg);
}

.cuboid.screen .side {
	filter: brightness(0.25);
	border-radius: 0.4vmin;
} 

.cuboid.screen .side:nth-child(1) {
	padding: 1vmin;
} 

.cuboid.coins {
	transform: translate3d(20vmin, 57vmin, 22.5vmin);
	--height: 12;
	--width: 10;
	--depth: 2;
}

.cuboid.coins .side:nth-of-type(1) {
	box-shadow: 0 0 0 0.95vmin #1e1e1e inset, 0 0 0 1vmin #fff4 inset, 0 0 0 15vmin #1a1a1a inset;
}

.cuboid.coins .side:nth-of-type(1):before {
	content: "";
	position: absolute;
	background: #0008;
	width: 4vmin;
	height: 5vmin;
	top: 2.75vmin;
	left: 3vmin;
	box-shadow: 0 0 0 0.5vmin #000 inset, 0 0 0 0.5vmin #fff inset;
}

.cuboid.coins .side:nth-of-type(1):after {
	content: " 25 \A PTS";
	--clr: #ff5722;
	position: absolute;
	background: linear-gradient(90deg, #000, #000), var(--clr);
	background-repeat: no-repeat;
	background-size: 0.54vmin 2.5vmin;
	background-position: 0.25vmin 0.5vmin;
	width: 2.1vmin;
	height: 2.1vmin;
	top: 3.25vmin;
	left: 3.65vmin;
	box-shadow: 0 0 2vmin 0 var(--clr);
	border: 0.25vmin solid #000;
	content: "25 \A PTS";
	font-size: 0.35vmin;
	text-align: right;
	white-space: pre-wrap;
	line-height: 0.5vmin;
	padding-top: 1.35vmin;
	padding-right: 0.15vmin;
	color: #000;
}

.cuboid.coins .side:nth-of-type(1):hover:after {
	--clr: #4caf50;
}






/*** CANVAS  ***/

canvas {
	border: 1px solid #000;
	width: 11vmin;
	height: 23vmin;
	background: #000;
}

.tetris {
	--g1: #474fac;
	--g2: #6d537d;
	--g3: #1c214f;
	--g4: #1f2152;
	width: 38vmin;
	height: 28vmin;
	transform: translate3d(6vmin, 13.5vmin, 2.5vmin) rotateX(7.25deg);
	text-align: left;
	padding: 1vmin 3vmin;
	background: linear-gradient(180deg, #000 2vmin, #8f91aa 2vmin);
}

.tetris:before, .tetris:after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 50%;
	height: 100%;
	z-index: -1;
	background: conic-gradient(from 90deg at 0 0, #000 0 25%, #fff0 0 100%), radial-gradient(circle at 50% 50%, #000 0.125vmin, #fff0 calc(0.125vmin + 1px)), linear-gradient(180deg, #fff0 1.5vmin, #724b07 0 1.8vmin, #fff0 0 2.5vmin, #724b07 0 2.75vmin, #fff0 0 100%),linear-gradient(90deg, #fff0 1.15vmin, #724b07 0 1.4vmin, #fff0 0 1.5vmin, #724b07 0 1.8vmin, #fff0 0 100%), conic-gradient(from 90deg at 0 0, #b59253 0 25%, #fff0 0 100%), radial-gradient(circle at 50% 55%, #b59253 1.4vmin, #fff0 calc(1.4vmin + 2px) 100%),conic-gradient(from 90deg at 0 0, #724b07 0 25%, #fff0 0 100%), radial-gradient(circle at 50% 55%, #724b07 1.7vmin, #fff0 calc(1.7vmin + 2px) 100%),radial-gradient(circle at 50% 55%, #724b07 1.7vmin, #fff0 calc(1.7vmin + 2px) 100%),conic-gradient(from -43deg at 1vmin 100%, var(--g2) 0 40%, #fff0 0 100%), conic-gradient(from 225deg at 100% 0%, var(--g2) 0 25%, var(--g1) 0 100%), conic-gradient(from 90deg, var(--g4) 0 25%, #fff0 0 100%), conic-gradient(from 90deg, #000 0 25%, #fff0 0 100%), conic-gradient(from -152deg at 47% 25%, var(--g1) 0 30%, #fff0 0 100%), conic-gradient(from -135deg at 30% 84%, var(--g1) 0 33%, #fff0 0 100%), conic-gradient(from 135deg at 35% 65%, var(--g2) 0 21%, #fff0 0 100%), conic-gradient(from 35deg at 53% 25%, var(--g3) 0 40%, #fff0 0 100%);
	background-size: 1.15vmin 0.175vmin, 2vmin 2vmin, 3vmin 4.75vmin, 3vmin 4.75vmin, 3vmin 3.25vmin, 3vmin 2.75vmin, 3.65vmin 3.5vmin, 4vmin 3.75vmin, 4vmin 3.75vmin, 6vmin 1.1vmin, 3vmin 1.1vmin, 26vmin 4.5vmin, 22vmin 46vmin, 13vmin 24vmin, 13vmin 24vmin, 13vmin 24vmin, 13vmin 24vmin;
	background-repeat: no-repeat;
	background-position: 16.4vmin 7.625vmin, 16.7vmin 6.75vmin, 15.55vmin 5.5vmin, 15.55vmin 6vmin, 15.55vmin 7.5vmin, 15.55vmin 6vmin, 15.25vmin 7.5vmin, 15.125vmin 5.35vmin, 15vmin 5.35vmin, 14vmin 1vmin, 0 1vmin, -11vmin 23vmin, -7.9vmin -22vmin, 2vmin 1vmin, 2vmin 1vmin, 2vmin 1vmin, 2vmin 1vmin;
}
.tetris:after {
	--g1: #1c214f;
	--g3: #474fac;
	left: 50%;
	transform: rotateY(180deg);
}


.cupule {
	position: absolute;
	width: 10vmin;
	height: 5.25vmin;
	top: 0;
	left: 14vmin;
	background: radial-gradient(circle at 49% 6vmin, #8f91aa 5.5vmin, #fff0 calc(5.5vmin + 1px)), radial-gradient(circle at 49% 5.7vmin, var(--g2) 5.5vmin, #fff0 calc(5.5vmin + 1px));
	background-size: calc(100% - 2vmin ) 2vmin;
	background-position: 1vmin 0.1vmin;
	background-repeat: no-repeat;
	font-size: 0.7vmin;
	display: flex;
	justify-content: center;
	align-items: end;
	padding-bottom: 0.3vmin;
	color: var(--g1);
}

.cupule:before, .cupule:after {
	content: "";
	position: absolute;
	left: 0.6vmin;
	top: 0.85vmin;
	background: linear-gradient(90deg, var(--g3) 0.3vmin, #8f91aa 0 0.6vmin, #c3c3c3 0 0.8vmin);
	width: 0.8vmin;
	height: 0.2vmin;
	border-radius: 0 0vmin 0.05vmin 0.05vmin;
	border-top: 0.2vmin solid var(--g1);
	border-bottom: 0.2vmin solid var(--g3);
}

.cupule:after {
	left: 8.4vmin;
}

.cupule span {
	font-size: 0.475vmin;
	top: -0.4vmin;
	left: 0.75vmin;
	position: relative;
	margin-right: 1vmin;
}

.onion {
	position: absolute;
	background: radial-gradient(circle at 65% 65%, #ff9112 0.2vmin, #db6a00 0.25vmin);
	width: 1vmin;
	height: 1vmin;
	border-radius: 50% 40% 50% 50% / 50% 50% 0% 40%;
	transform: rotate(-135deg);
	left: 0.5vmin;
	top: 0;
	z-index: -1;
}

.onion + .onion {
	left: 8.3vmin
}



/*** GLASS ***/

.cuboid.glass {
	--height: 36;
	--width: 43.72;
	--depth: 1;
	transform: translate3d(3.025vmin, -18.05vmin, 4.5vmin) rotateX(7.25deg);
}

.cuboid.glass .side {
	background: linear-gradient(35deg, #9992, #9993, #9994, #fff3, #fff 75% 80%, #ccc4, #8884), repeating-linear-gradient(95deg, #fff2 0.01px, #96a5a540 0.02px, #fff4 0.03px );
	opacity: 0.2;
	background-color: #03a9f473;
}

.glass.hide {
	opacity: 0;
}








/*** SPEAKERS ***/

.cuboid.top-bot .side:nth-of-type(6):before , 
.cuboid.top-bot .side:nth-of-type(6):after {
	position: absolute;
	width: 8vmin;
	height: 8vmin;
	background: repeating-radial-gradient(#111 4px, transparent 7px);
	content: "";
	border-radius: 100%;
	left: 10vmin;
	top: 6vmin;
	border: 1vmin solid #111;
}

.cuboid.top-bot .side:nth-of-type(6):after {
	left: 26vmin;
}




/*** SCORE ***/

#score {
	margin-top: 2vmin;
	margin-left: -0.5vmin;
	color: red;
	font-size: 1.2vmin;
	text-align: right;
	width: 12vmin;
}

#score:before {
	content: "SCO E";
	float: left;
}

#score:after {
	content: "R";
	float: left;
	margin-left: -2.5vmin;
	transform: rotateY(180deg)
}




/*** LINES ***/

#lines {
	margin-top: -16vmin;
	margin-left: 12vmin;
	font-size: 1.2vmin;
	text-align: center;
	width: 7.99vmin;
	position: absolute;
	color: red;
	padding: 2vmin 0 1vmin 0;
	border: 0.2vmin solid var(--g1);
	border-color: var(--g3) var(--g2) #ffffffcc var(--g1);
	background: radial-gradient(circle at 50% 0%, red 0.25vmin, #333 0.5vmin, red 0.75vmin, #fff0 1vmin) #1f2152;
	background-repeat: repeat-x;
	background-size: 1.9vmin 1vmin;
}

#lines:after {
	content: "LINES";
	float: left;
	display: block;
	width: 100%;
	margin-top: 1vmin;
	color: #fff;
	font-size: 1.17vmin;
}

#lines:before {
	content: "TET IS";
	position: absolute;
	width: 100%;
	color: red;
	font-size: 1.2vmin;
	top: -9.35vmin;
	left: -0.15vmin;
	text-shadow: 0 0 1px #fff, 0 0 1px #fff;
	border-bottom: 0.15vmin solid #fff4;
	border-left: 0.15vmin solid var(--g1);
	border-right: 0.15vmin solid var(--g2);
	border-top: 0.15vmin solid #fff0;
	padding-bottom: 1.25vmin;
	padding-top: 0.45vmin;
}



/*** GAME OVER ***/

#gameover {
	display: none;
	position: absolute;
	top: calc(50% - 4.75vmin);
	left: 3.1vmin;
	color: #fff;
	font-size: 1.125vmin;
	width: 11vmin;
	height: 6.25vmin;
	text-align: center;
	background: #1f2152;
	border: 0.5vmin solid #000;
	padding: 1.2vmin 0 0;
	line-height: 1.55vmin;
	box-shadow: 0 0 0 0.35vmin red inset, 0 0 0 1vmin blue inset;
}

#gameover :after {
	content: "R";
	transform: rotateY(180deg) translateX(1.25vmin);
	position: absolute;
	background: #1f2152;
}

#gameover span {
	display: contents;
}




/*** STATS ***/

#stats {
	position: absolute;
	top: 0.9vmin;
	width: 10.51vmin;
	height: 23vmin;
	left: 24vmin;
	text-align: center;
	padding: 1vmin 0.25vmin 0.25vmin 0.25vmin;
	background: #000;
}
#stats:before {
	content: "R";
	transform: rotateY(180deg);
	position: absolute;
	background: #8f91aa;
	left: -5.1vmin;
	color: red;
	top: 1.75vmin;
	text-shadow: 0 0 1px #fff, 0 0 1px #fff;
}
#stats div {
	float: left;
	width: 1vmin;
	height: 1px;
	position: absolute;
	bottom: 0;
	max-height: 185px;
}

#statsI {
	background: red;
	left: 0.5vmin;
}
#statsO {
	background: blue;
	left: 2vmin;
}
#statsT {
	background: green;
	left: 3.5vmin;
}
#statsS {
	background: cyan;
	left: 5vmin;
}
#statsZ {
	background: orange;
	left: 6.5vmin;
}
#statsJ {
	background: yellow;
	left: 8vmin;
}
#statsL {
	background: purple;
	left: 9.5vmin;
}





/*** INSET COIN***/

#insertcoin {
	position: absolute;
	left: 23.4vmin;
	width: 12vmin;
	word-spacing: -5px;
	top: 25.975vmin;
	text-align: center;
	font-size: 1.1vmin;
	color: #ffffff;
}

#insertcoin:before {
	content: "INSERT COIN";
	white-space: pre-wrap;
}

#insertcoin.blink:before {
	animation: blinking 4s linear 0s infinite;
}

@keyframes blinking {
	0%, 35% { content: "INSERT COIN";}
	36%, 50% { content: "";}
	51%, 85% { content: "RELOAD    F5";}
	86%, 100% { content: "";}	
}




/*** RELOAD ***/

.reload {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
	transform: translateZ(2vmin) translateY(-0.5vmin);
}

.coin {
	position: absolute;
	width: 2vmin;
	height: 2vmin;
	z-index: 1;
	left: 3.75vmin;
	top: 4.85vmin;
	background: radial-gradient(circle at 35% 35%, #ccc, #666);
	width: 2vmin;
	border: 1px solid #00000030;
	border-radius: 100%;
	transform: rotateY(105deg) translateX(1vmin);
}
.coin:before, .coin:after {
	content: "";
	position: absolute;
	background: radial-gradient(circle at 35% 35%, #ccc, #666);
	width: 2vmin;
	border: 1px solid #00000030;
	height: 2vmin;
	left: 0;
	top: 0;
	border-radius: 100%;
	box-sizing: border-box;
	transform: translateZ(-1px) translateY(-1px);
	transition: all 0.25s ease 0s;
}

.coin:after {
	transform: translateZ(1px) translateY(-1px);
}

.reload:hover .coin {
	transform: rotateY(100deg) translateX(2vmin);
	transition: all 0.25s ease 0s;
}

.reload:active .coin {
	transform: rotateY(100deg) translateX(3vmin);
	transition: all 0.25s ease 0s;
}




/*** CONTROLS ***/

#controls {
	position: absolute;
	left: 15.5vmin;
	bottom: 2vmin;
	font-size: 0.85vmin;
	width: 7vmin;
	color: var(--g1);
	line-height: 1.15vmin;
	z-index: 1;

}

#controls:before {
	content: "1980s";
	position: absolute;
	top: -18.85vmin;
	width: 100%;
	text-align: center;
	font-size: 0.65vmin;
	color: var(--g2);
}

#controls div:nth-child(1) {
	margin-bottom: 0.25vmin;
}

#controls div+div:after {
	content: "\25B2";
	position: absolute;
	right: 0;
	margin-top: -0.2vmin;
}
#controls div:nth-child(3):after {
	content: "\25C0";
	right: 0.1vmin;
}

#controls div:nth-child(4):after {
	content: "\25B6";
}

#controls div:nth-child(5):after {
	content: "\25BC";
}

#controls div:nth-child(6):after {
	content: "F5";
	font-size: 0.75vmin;
	margin-top: 0.1vmin
}

#controls:after {
	content: "ATARI\00A9 1988";
	color: #fff;
	font-size: 0.7vmin;
	margin-top: 0.5vmin;
	position: absolute;
	text-shadow: 0 0 1px #000;
}



/*** BONUS ***/

#column {
	background: #090909;
	position: absolute;
	left: 0.4vmin;
	bottom: 0.5vmin;
	width: 1.2vmin;
	height: 2.2vmin;
	box-shadow: 36vmin 0 0 0 #000;
	border: 1px solid #000;
}

#rainbow {
	background: linear-gradient(0deg,blue,cyan,green,yellow,orange,red);
	position: absolute;
	left: 0vmin;
	bottom: 0vmin;
	width: 100%;
	height: 0;
	max-height: 2vmin;

}



/*** ROUND ***/

@property --level {
	syntax: '<color>';
	inherits: false;
	initial-value: white;
}
@property --levels {
	syntax: '<color>';
	inherits: false;
	initial-value: blue;
}

#round {
	position: absolute;
	left: 15.5vmin;
	width: 7vmin;
	word-spacing: -5px;
	top: 18.5vmin;
	text-align: RIGHT;
	font-size: 0.925vmin;
	color: var(--levels);
	text-shadow: -10vmin -11vmin 0px var(--level);
}

#round:before {
	content: "R";
	float: left;
	transform: rotateY(180deg);
	text-shadow: 10.1vmin -11vmin 0px var(--level);
}

#round:after {
	content: "OUND";
	float: left;
}

#round.showing, #round.showing:before {
	animation: level 2s ease 0s 1;
	animation-fill-mode: forwards;
}

@keyframes level {
	0% { --level: white; --levels: red; }
	100% { --level: transparent; --levels: blue; }
}





/*** CONTROLLER ***/

.controller {
	position: absolute;
	transform: translate3d(2vmin, 10.75vmin, 16vmin) rotateX(84deg);
	width: 46vmin;
	height: 16vmin;
}

.controller.layers #joystick *, .controller.layers #joystick *:before, .controller.layers #joystick *:after, .controller.layers .btn-base *, .controller.layers .btn-base *:before, .controller.layers .btn-base *:after {
	background: #0001 !important;
	border: 1px solid #fff1;
}

#joystick {
	position: absolute;
	width: 3vmin;
	height: 3vmin;
	top: 5vmin;
	left: 10vmin;
	border-radius: 100%;
}

#joystick.m-down {
	animation: move-down 0.25s ease 0s 1;
	animation-fill-mode: forwards;
}
#joystick.m-left {
	animation: move-left 0.25s ease 0s 1;
	animation-fill-mode: forwards;
}
#joystick.m-right {
	animation: move-right 0.25s ease 0s 1;
	animation-fill-mode: forwards;
}

@keyframes move-down {
	0%, 100% { transform: rotateX(-20deg); }
}
@keyframes move-left {
	0%, 100% { transform: rotateY(-20deg); }
}
@keyframes move-right {
	0%, 100% { transform: rotateY(20deg); }
}

.stick {
	position: absolute;
	background: #1d2428;
	width: 1vmin;
	height: 1vmin;
	border-radius: 100%;
	left: 1.1vmin;
	top: 1.1vmin;
}



/*** Stick Ball by Amit Sheen from this pen: ***/
/*** https://codepen.io/amit_sheen/pen/NWwYPJE ***/
.stick-ball {
	width: 6vmin;
	height: 6vmin;
	transform: translate3d(-1.5vmin, -1.4vmin, 3vmin) scale3d(0.25, 0.25, 0.25);
	--stick-ball-color: #db0f00;
	--stick-ball-shadow: 0 0 1vmin -0.25vmin #fff4 inset;
}

.stick-ball * {
	position: absolute;
}

.stick-ball *::before, .stick-ball *::after {
	padding: 0;
	margin: 0 auto;
	box-sizing: border-box;
}

.stick-ball .face {
	left: 50%;
	top: 50%;
	width: 3vmin;
	height: 3vmin;
	transform: translate(-50%, -50%);
	background-color: var(--stick-ball-color); /*#dffbff4f*/
	box-shadow: var(--stick-ball-shadow);
}

.stick-ball .face:nth-child(1) {
	transform: translate(-50%, -50%) translateZ(4.23vmin);
}

.stick-ball .face:nth-child(2) {
	transform: translate(-50%, -50%) rotateY(90deg) translateZ(4.23vmin);
}

.stick-ball .face:nth-child(3) {
	transform: translate(-50%, -50%) rotateY(180deg) translateZ(4.23vmin);
}

.stick-ball .face:nth-child(4) {
	transform: translate(-50%, -50%) rotateY(270deg) translateZ(4.23vmin);
}

.stick-ball .face:nth-child(5) {
	transform: translate(-50%, -50%) rotateX(90deg) translateZ(4.23vmin);
}

.stick-ball .face:nth-child(6) {
	transform: translate(-50%, -50%) rotateX(270deg) translateZ(4.23vmin);
}

.stick-ball .face > div {
	top: 50%;
	width: 3vmin;
	height: 2vmin;
	transform: rotateZ(var(--rz, 0deg)) translateY(1.5vmin) rotateX(-30deg);
	background-color: var(--stick-ball-color);
	transform-origin: top;
	transform-style: preserve-3d;
	box-shadow: var(--stick-ball-shadow);
}

.stick-ball .face > div::after {
	content: "";
	position: absolute;
	left: 100%;
	width: 2vmin;
	height: 2vmin;
	background-color: var(--stick-ball-color);
	transform-origin: left;
	transform: rotateY(26.7deg) skewY(14deg);
	box-shadow: var(--stick-ball-shadow);
	-webkit-clip-path: polygon(0 0, 0 100%, 71% 74%, 97% 0%);
	clip-path: polygon(0 0, 0 100%, 71% 74%, 97% 0%);
}

.stick-ball .face > div:nth-child(1) {
	--rz: 0deg;
}

.stick-ball .face > div:nth-child(2) {
	--rz: 90deg;
}

.stick-ball .face > div:nth-child(3) {
	--rz: 180deg;
}

.stick-ball .face > div:nth-child(4) {
	--rz: 270deg;
}




/*** CYLINDER ***/

.cylinder {
	--height: 0.65;
	--width: 0.65;
	--depth: 4;
	--hue: 200;
	--sat: 25%;
	--bg-side: repeating-linear-gradient(5deg, #725f5880 0.01vmin, #8b888780 0.0125vmin, #bfbfbf80 0.015vmin);
	height: calc(var(--height) * 1vmin);
	width: calc(var(--width) * 1vmin);
	position: absolute;
	left: 0.15vmin;
	top: 0.15vmin;
}
.cylinder > div {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 100%;
	width: 100%;
}
.cylinder > div:nth-of-type(1) {
	clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
	transform: translate3d( -50%, -50%, calc(var(--depth) * 0.5vmin) );
	background: var(--bg-side), hsl(var(--hue), var(--sat), 50%);
}
.cylinder > div:nth-of-type(2) {
	clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
	transform: translate3d( -50%, -50%, calc(var(--depth) * -0.5vmin) ) rotateY(180deg);
	background: var(--bg-side), hsl(var(--hue), var(--sat), 85%);
}
.cylinder > div:nth-of-type(3) {
	width: calc(var(--depth) * 1vmin);
	height: calc(calc(calc(var(--width) * 41.17) / 100) * 1vmin);
	transform: translate(-50%, -50%) rotateY(90deg) translate3d( 0, 0, calc(var(--width) * 0.5vmin)  );
	background: var(--bg-side), hsl(var(--hue), var(--sat), 70%); /*45*/
}
.cylinder > div:nth-of-type(4) {
	width: calc(var(--depth) * 1vmin);
	height: calc(calc(calc(var(--width) * 41.17) / 100) * 1vmin);
	transform: translate(-50%, -50%) rotateY(-90deg) translate3d( 0, 0, calc(var(--width) * 0.5vmin)  );
	background: var(--bg-side), hsl(var(--hue), var(--sat), 60%); /*50*/
}
.cylinder > div:nth-of-type(5) {
	height: calc(var(--depth) * 1vmin);
	width: calc(calc(calc(var(--width) * 41.17) / 100) * 1vmin);
	transform: translate(-50%, -50%) rotateX(90deg) translate3d( 0, 0, calc(var(--height) * 0.5vmin)  );
	background: var(--bg-side), hsl(var(--hue), var(--sat), 80%);
}
.cylinder > div:nth-of-type(6) {
	height: calc(var(--depth) * 1vmin);
	width: calc(calc(calc(var(--width) * 41.17) / 100) * 1vmin);
	transform: translate(-50%, -50%) rotateX(-90deg) translate3d( 0, 0, calc(var(--height) * 0.5vmin)  );
	background: var(--bg-side), hsl(var(--hue), var(--sat), 35%);
}
.cylinder > div:nth-of-type(7) {
	height: calc(var(--depth) * 1vmin);
	width: calc(calc(calc(var(--width) * 41.17) / 100) * 1vmin);
	transform: translate(-50%, -50%) rotateX(-90deg) rotateY(45deg) translate3d( 0, 0, calc(var(--height) * 0.5vmin) );
	background: var(--bg-side), hsl(var(--hue), var(--sat), 40%);
}
.cylinder > div:nth-of-type(8) {
	height: calc(var(--depth) * 1vmin);
	width: calc(calc(calc(var(--width) * 41.17) / 100) * 1vmin);
	transform: translate(-50%, -50%) rotateX(-90deg) rotateY(-45deg) translate3d( 0, 0, calc(var(--height) * 0.5vmin) );
	background: var(--bg-side), hsl(var(--hue), var(--sat), 45%);
}
.cylinder > div:nth-of-type(9) {
	height: calc(var(--depth) * 1vmin);
	width: calc(calc(calc(var(--width) * 41.17) / 100) * 1vmin);
	transform: translate(-50%, -50%) rotateX(-90deg) rotateY(135deg) translate3d( 0, 0, calc(var(--height) * 0.5vmin) );
	background: var(--bg-side), hsl(var(--hue), var(--sat), 70%);
}
.cylinder > div:nth-of-type(10) {
	height: calc(var(--depth) * 1vmin);
	width: calc(calc(calc(var(--width) * 41.17) / 100) * 1vmin);
	transform: translate(-50%, -50%) rotateX(-90deg) rotateY(-135deg) translate3d( 0, 0, calc(var(--height) * 0.5vmin) );
	background: var(--bg-side), hsl(var(--hue), var(--sat), 75%);
}







.base {
	width: 3vmin;
	height: 3vmin;
	transform: translate3d(10vmin, 5.2vmin, 0.1vmin);
	border-radius: 100%;
	background: #111;
	border: 0.5vmin solid #222;
	box-shadow: 0px -1px 5px 0 #fff4, 0px 1px 0px 0 #000;
}
.base:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	transform: translate3d(-0.5vmin, -0.5vmin, 0.1vmin);
	border-radius: 100%;
	background: #111;
	border: 0.5vmin solid #222;
	box-shadow: 0px -1px 5px 0 #fff4, 0px 1px 0px 0 #000;
}



.btn-base {
	left: 16vmin;
	top: 6vmin;
	position: absolute;
	background: #111;
	width: 2vmin;
	height: 2vmin;
	border-radius: 100%;
	border: 0.2vmin solid #222;
	box-shadow: 0px -1px 3px 0 #fff4, 0px 1px 0px 0 #000;
	transform: translate3d(0, 0, 0.15vmin);
}

#btn {
	width: calc(100% - 0.2vmin);
	height: calc(100% - 0.2vmin);
	border-radius: 100%;
	background: #4a0000;
	position: absolute;
	left: 0.15vmin;
	top: 0.1vmin;
}

.pressed {
	transform: translateZ(-0.4vmin);
}

#btn > div {
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: red;
	position: absolute;
	border-radius: 100%;
	box-shadow: 0 0 0.25vmin 0 #0000006e inset;
	transform: translateZ(0px);
}

#btn > div:nth-of-type(1) {
	transform: translateZ(0.05vmin); 
}
#btn > div:nth-of-type(2) {
	transform: translateZ(0.1vmin); 
}
#btn > div:nth-of-type(3) {
	transform: translateZ(0.15vmin); 
}
#btn > div:nth-of-type(4) {
	transform: translateZ(0.2vmin); 
}
#btn > div:nth-of-type(5) {
	transform: translateZ(0.25vmin); 
}
#btn > div:nth-of-type(6) {
	transform: translateZ(0.3vmin); 
}
#btn > div:nth-of-type(7) {
	transform: translateZ(0.35vmin); 
}
#btn > div:nth-of-type(8) {
	transform: translateZ(0.4vmin); 
}
#btn > div:nth-of-type(9) {
	transform: translateZ(0.45vmin); 
}
#btn > div:nth-of-type(10) {
	transform: translateZ(0.5vmin); 
}





/*** BUTTONS ***/

button {
	border: 0;
	outline: none;
	width: 6vmin;
	height: 6vmin;
	position: absolute;
	background: #fff0;
	right: 3vmin;
	cursor: pointer;
	--clr: #fff;
}

button:before, button:after {
	content: "";
	position: absolute;
	filter: drop-shadow(1px 1px 0px #0006);
}

button:disabled {
	opacity: 0.25;
	cursor: not-allowed;
}

button span + span {
	filter: drop-shadow(1px 1px 0px #0006);
}




/*** CENTER SCENE ***/

button#center-scene {
	margin-top: 40vmin;
}

button#center-scene:before, button#center-scene:after {
	top: 1vmin;
	left: 1vmin;
	border: 0;
	width: 4vmin;
	height: 4vmin;
	cursor: pointer;
	background: radial-gradient(circle at 50% 50%, var(--clr) 0.45vmin, #fff0 calc(0.45vmin + 1px)), conic-gradient(from 135deg at 50% 81%, var(--clr) 0 25%, #fff0 0 100%), conic-gradient(from 45deg at 82% 50%, var(--clr) 0 25%, #fff0 0 100%), conic-gradient(from -45deg at 50% 20%, var(--clr) 0 25%, #fff0 0 100%), conic-gradient(from -135deg at 20% 50%, var(--clr) 0 25%, #fff0 0 100%);
	border-radius: 100%;
	transform: rotate(45deg);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

button#center-scene:active:before, button#center-scene:active:after {
	--clr: #000;
	filter: drop-shadow(1px 1px 0px #fff2);
}





/*** BLOCK JOYSTICK ***/

button#block-joystick {
	margin-top: 24vmin;
}

button#block-joystick:before {
	height: 2vmin;
	background: var(--clr);
	width: 1.95vmin;
	border-radius: 100%;
	left: 1.2vmin;
	top: 0.65vmin;
	transition: all 0.5s ease 0s;
}

button#block-joystick:after {
	height: 1.5vmin;
	background: var(--clr);
	width: 0.85vmin;
	left: 1.75vmin;
	top: 2.6vmin;
	transition: all 0.5s ease 0s;
	border-radius: 0 0 1vmin 1vmin;
	z-index: -1;
}

button#block-joystick span + span {
	position: absolute;
	height: 1.25vmin;
	background: radial-gradient(circle at 1.4vmin -0.1vmin, #fff0 0.65vmin, var(--clr) calc(0.65vmin + 1px) 100%);
	width: 4.5vmin;
	left: 0.75vmin;
	top: 3.75vmin;
	transition: all 0.5s ease 0s;
	border-radius: 0.5vmin;
}
button#block-joystick span + span:after {
	content: "";
	position: absolute;
	height: 0.5vmin;
	background: var(--clr);
	width: 1.1vmin;
	left: 2.75vmin;
	top: -0.75vmin;
	transition: all 0.5s ease 0s;
	border-radius: 0.15vmin 0.15vmin 0 0;
}


button#block-joystick.blocking:after,
button#block-joystick.blocking:before,
button#block-joystick.blocking span + span,
button#block-joystick.blocking span + span:after {
	--clr: #000;
	filter: drop-shadow(1px 1px 0px #fff2);
}



/*** GLASS ***/

button#front-glass {
	margin-top: 8vmin;
}

button#front-glass:before, button#front-glass:after {
	top: 1.35vmin;
	left: 1vmin;
	border: 0;
	width: 4vmin;
	height: 3.25vmin;
	cursor: pointer;
	background: linear-gradient(45deg, var(--clr) 51%, #fff0 0 55%, var(--clr) 0 66%, #fff0 0 70%, var(--clr) 0 100%);
}

button#front-glass:after {
	transform: translate3d(0.15vmin, -0.15vmin, 0.15vmin);
	clip-path: polygon(100% 0%, 100% 100%, 95% 100%, 95% 5%, 0% 5%, 0% 0%);
}

button#front-glass.hide:before, 
button#front-glass.hide:after {
	--clr: #000;
	filter: drop-shadow(1px 1px 0px #fff2);
}



/*** MODES ***/
button#modes {
	margin-top: -8vmin;
}

button#modes:before {
	height: 4vmin;
	background: linear-gradient(90deg, var(--clr) 0.3vmin, #fff0 0 calc(100% - 0.3vmin), var(--clr) 0 100%), linear-gradient( 180deg, #fff0 0 0.2vmin, var(--clr) 0 0.4vmin, #fff0 0 0.6vmin, var(--clr) 0 0.9vmin, #fff0 0 2.35vmin, var(--clr) 0 2.55vmin, #fff0 0 2.75vmin, var(--clr) 0 2.95vmin, #fff0 0 3.15vmin, var(--clr) 0 3.45vmin, #fff0 0 3.65vmin, var(--clr) 0 3.85vmin, #fff0 0 100% );
	width: 3vmin;
	left: 1.4vmin;
	top: 1vmin;
	transition: all 0.5s ease 0s;
}

button#modes.game:before {
	height: 3vmin;
	background: conic-gradient(from 180deg at 25% 78%, var(--clr) 0 25%, #fff0 0 100%), conic-gradient(from 90deg at 33% 78%, var(--clr) 0 25%, #fff0 0 100%), conic-gradient(from 270deg at 20% 100%, var(--clr) 0 25%, #fff0 0 100%), conic-gradient(from 90deg at 38% 50%, var(--clr) 0 25%, #fff0 0 100%), linear-gradient(180deg, var(--clr) 56%, #fff0 0 100% );
	width: 4.2vmin;
	left: 0.9vmin;
	top: 1.15vmin;
	transition: all 0.5s ease 0s;
}

button#modes.game:after {
	height: 0.35vmin;
	background: var(--clr);
	width: 4.4vmin;
	left: 0.8vmin;
	top: 4.5vmin;
	transition: all 0.5s ease 0s;
}

button#modes.game:before,
button#modes.game:after {
	--clr: #000;
	filter: drop-shadow(1px 1px 0px #fff2);
}




/*** MUSIC ***/

button#music {
	margin-top: -24vmin;
}

button#music:after {
	background: var(--clr);
	left: 0.75vmin;
	top: 4vmin;
	width: 1.6vmin;
	height: 1.3vmin;
	border-radius: 45% 45% 100% 100%;
	border: 0;
	box-shadow: 2.5vmin 0.3vmin 0px -0.5px var(--clr), 2.5vmin 0.3vmin 0px -0.5px var(--clr);
	transform:
		skewY(-20deg);
}

button#music:before {
	left: 1.85vmin;
	top: 1.25vmin;
	background: #fff0;
	width: 3vmin;
	height: 3.25vmin;
	border-radius: 0.25vmin 0.25vmin 0.5vmin 0.5vmin;
	border: 0.55vmin solid var(--clr);
	box-sizing: border-box;
	border-bottom-color: #fff0;
	transform:
		skewY(-15deg);
	border-top-width: 1.25vmin;
}

button#music.off:before,
button#music.off:after {
	--clr: #000000;
	filter: drop-shadow(1px 1px 0px #fff2);
}




/*** SOUND ***/

button#sound {
	margin-top: -40vmin;
}

button#sound:after {
	border-radius: 0.35vmin;
	height: 1.5vmin;
	top: 1vmin;
	left: -0.65vmin;
	border: 2.75vmin solid var(--clr);
	border-left-color: #fff0;
	border-top: 1.25vmin solid #fff0;
	border-bottom: 1.25vmin solid #fff0;
}

button#sound:before {
	left: 0.75vmin;
	top: 2vmin;
	background: var(--clr);
	width: 1.25vmin;
	height: 2vmin;
	border-radius: 0.2vmin;
}

button.off#sound:before, 
button.off#sound:after {
	--clr: #000000;
	filter: drop-shadow(1px 1px 0px #fff2);
}





/*** BUTTONS INFO ***/

button span.info {
	background: #000;
	width: 7.25vmin;
	height: 4vmin;
	position: absolute;
	top: 1vmin;
	left: -7vmin;
	color: #fff;
	padding: 0.65vmin;
	font-size: 1.1vmin;
	line-height: 1.3vmin;
	opacity: 0;
	transform: translateX(16vmin);
	transition: all 0s ease 0s;
}

button:hover span.info {
	opacity: 1;
	transform: translateX(-2vmin);
	transition: all 0.25s ease 0s;
}

button span.info:after {
	content: "";
	border: 1vmin solid #0000;
	border-left-color: #000;
	position: absolute;
	bottom: 0.95vmin;
	right: -1.75vmin;
	transition: all 0.25s ease 0s;
}

button#center-scene span.info:before {
	content:"CENTER ARCADE";
}

button#block-joystick span.info:before {
	content:"JOYSTICK LOCK";
}
button#block-joystick.blocking span.info:before {
	content:"JOYSTICK UNLOCK";
}

button#front-glass span.info:before {
	content:"HIDE GLASS";
}
button#front-glass.hide span.info:before {
	content:"SHOW GLASS";
}

button#modes span.info:before {
	content:"GAME MODE";
}

button#modes.game span.info:before {
	content:"VIEW MODE";
}

button#music.off span.info:before {
	content:"PLAY MUSIC";
}

button#music span.info:before {
	content:"STOP MUSIC";
}

button#sound span.info:before {
	content:"TURN OFF SOUNDS";
}

button#sound.off span.info:before {
	content:"TURN ON SOUNDS";
}


button:hover.off span.info,
button:hover.game span.info,
button:hover.hide span.info,
button:hover.blocking span.info,
button#center-scene:active span.info{
	background: #fff;
	color: #000;
}
button:hover.off span.info:after,
button:hover.game span.info:after,
button:hover.hide span.info:after,
button:hover.blocking span.info:after,
button#center-scene:active span.info:after {
	border-left-color: #fff;
}


/*** END BUTTONS ***/






/*** TITTLE ***/

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

.cuboid.top-front:before,
.cuboid.top-front:after{
	content: "TET IS";
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 1.25vmin 4vmin;
	font-size: 5.5vmin;
	text-align: center;
	box-sizing: border-box;
	text-shadow:  0px -1px 0px #fff8, 0px 1px 0px hsl(var(--neon) 100% 50%);
	color: #000000;
	animation: neon 10s linear 0s infinite;
}

@keyframes neon {
	0% { --neon: 0deg; }
	100% { --neon: 360deg; }
}

.cuboid.top-front:after {
	content: "R";
	transform: rotateY(180deg);
	margin-left: 2.25vmin
}

.cuboid.top-front .side:nth-of-type(1), 
.cuboid.top-front .side:nth-of-type(3), 
.cuboid.top-front .side:nth-of-type(4) {
	background: linear-gradient(45deg, #2196f340 45%, #2196f350 45% 50%, #2196f340 50% 53%, #2196f350 53% 64%, #2196f340 64%);
}




/*** LOGO ATARI ***/

.atari {
	position: absolute;
	width: 42vmin;
	height: 78vmin;
	background: linear-gradient(90deg, #fff0 20vmin, #fff 0 55%, #fff0 0 100%), #f000;
	left: 18.5vmin;
	top: 1vmin;
	left: 1.5vmin;
	font-size: 24.5vmin;
	background-size: 100% 60vmin;
	background-repeat: no-repeat;
}

.atari:before, .atari:after {
	content: "";
	position: absolute;
	width: calc(50% - 3vmin);
	height: 60vmin;
	border-right: 5.85vmin solid #fff;
	box-sizing: border-box;
	border-bottom: 10vmin solid #fff;
	border-radius: 0 0 100%;
}

.atari:after {
	transform: rotateY(180deg);
	right: 0;
}

.atari .text {
	font-family: 'Atarian System', Arial, Helvetica, serif;
	position: absolute;
	bottom: -3vmin;
	text-align: center;
	left: 0vmin;
}

.cuboid.left .side:nth-of-type(4) {
	transform: translate(-50%, -50%) rotateY(-90deg) translate3d(0, 0, calc(var(--width) * 0.425vmin));
}




/*** TETRIS PATTERN ***/
.cuboid.right .side:nth-of-type(3) {
	clip-path: polygon(100% 0%, 0% 0%, 0% 11%, 40% 11%, 30% 58%, 0% 59.5%, 0% 100%, 100% 100%);
	--u: 3.5vmin;
	--blue1: #03a9f4;
	--blue2: #0047de;
	--pink: #de00de;
	--red: #ff0000;
	--green: #47b800;
	--orange: #ff9700;
	--yellow: #deb800;
	--line: #00000099;
	--line2: #ffffff99;
	--square: 0 90deg, #fff0 0 100%;
	--gp: 50%/ calc(var(--u) * 9) calc(var(--u) * 8);
	--bp: calc(var(--u) * 2) calc(var(--u) * -4);
	--bg:
		conic-gradient(from 0deg at 88.888% 12.5%, var(--red) var(--square)) var(--gp), conic-gradient(from 0deg at 88.888% 50%, var(--yellow) var(--square)) var(--gp), conic-gradient(from 0deg at 77.777% 12.5%, var(--red) var(--square)) var(--gp), conic-gradient(from 0deg at 77.777% 37.5%, var(--blue2) var(--square)) var(--gp), conic-gradient(from 0deg at 77.777% 50%, var(--yellow) var(--square)) var(--gp), conic-gradient(from 0deg at 66.666% 12.5%, var(--red) var(--square)) var(--gp), conic-gradient(from 0deg at 66.666% 37.5%, var(--blue2) var(--square)) var(--gp), conic-gradient(from 0deg at 66.666% 50%, var(--green) var(--square)) var(--gp), conic-gradient(from 0deg at 55.555% 12.5%, var(--red) var(--square)) var(--gp), conic-gradient(from 0deg at 55.555% 25%, var(--orange) var(--square)) var(--gp), conic-gradient(from 0deg at 55.555% 50%, var(--green) var(--square)) var(--gp), conic-gradient(from 0deg at 44.444% 25%, var(--orange) var(--square)) var(--gp), conic-gradient(from 0deg at 44.444% 37.5%, var(--blue1) var(--square)) var(--gp), conic-gradient(from 0deg at 44.444% 50%, var(--green) var(--square)) var(--gp), conic-gradient(from 0deg at 33.333% 12.5%, var(--orange) var(--square)) var(--gp), conic-gradient(from 0deg at 33.333% 25%, var(--green) var(--square)) var(--gp), conic-gradient(from 0deg at 33.333% 37.5%, var(--blue1) var(--square)) var(--gp), conic-gradient(from 0deg at 22.222% 12.5%, var(--pink) var(--square)) var(--gp), conic-gradient(from 0deg at 22.222% 37.5%, var(--green) var(--square)) var(--gp), conic-gradient(from 0deg at 22.222% 50%, var(--blue1) var(--square)) var(--gp), conic-gradient(from 0deg at 11.111% 12.5%, var(--pink) var(--square)) var(--gp), conic-gradient(from 0deg at 11.111% 25%, var(--green) var(--square)) var(--gp), conic-gradient(from 0deg at 0% 25%, var(--pink) var(--square)) var(--gp), conic-gradient(from 0deg at 0% 50%, var(--blue2) var(--square)) var(--gp);
	background: repeating-linear-gradient( 180deg, var(--line) 0 calc(var(--u) * 0.035), #fff0 calc(var(--u) * 0.05) calc(var(--u) * 0.95), var(--line) calc(var(--u) * 0.965) calc(var(--u) * 1) ), repeating-linear-gradient( 90deg, var(--line) 0 calc(var(--u) * 0.035), #fff0 calc(var(--u) * 0.05) calc(var(--u) * 0.95), var(--line) calc(var(--u) * 0.965) calc(var(--u) * 1) ), repeating-linear-gradient( 180deg, var(--line2) 0 calc(var(--u) * 0.035), #fff0 calc(var(--u) * 0.05) calc(var(--u) * 0.95), var(--line2) calc(var(--u) * 0.965) calc(var(--u) * 1) ), repeating-linear-gradient( 90deg, var(--line2) 0 calc(var(--u) * 0.035), #fff0 calc(var(--u) * 0.05) calc(var(--u) * 0.95), var(--line2) calc(var(--u) * 0.965) calc(var(--u) * 1) ), var(--bg), var(--bg);
	background-position: 0% 0%, 0% 0%, 0% calc(var(--u) / 20.05), calc(var(--u) / -20) 0%, var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0 , 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
	border-color: #444444;
	transform: translate(-50%, -50%) rotateY(90deg) translate3d(0, 0, calc(var(--width) * 0.495vmin));
}

.cuboid.right .side:nth-of-type(3):after {
	content: "";
	background: radial-gradient(circle at 100% 0, #fff9 -10%, #fff0 60% 100%);
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	background-repeat: repeat;
	background-size: calc(var(--u)) calc(var(--u));
	background-position: -0.5vmin 0.5vmin;
}

.cuboid.right .side:nth-of-type(3):before {
	content: "";
	--hole: conic-gradient(from 0deg at 0% 100%, #444 0 25%, #fff0 0 100%);
	background: var(--hole), var(--hole), var(--hole), var(--hole), var(--hole), var(--hole), var(--hole), var(--hole), var(--hole), var(--hole), var(--hole), var(--hole);
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	background-repeat: no-repeat;
	background-size: calc(var(--u) * 3) calc(var(--u) * 3), calc(var(--u) * 1) calc(var(--u) * 2), calc(var(--u) * 1.15) calc(var(--u) * 1), calc(var(--u) * 3) calc(var(--u) * 3), calc(var(--u) * 2) calc(var(--u) * 5), calc(var(--u) * 3.05) calc(var(--u) * 7), calc(var(--u) * 2) calc(var(--u) * 1.1), calc(var(--u) * 1) calc(var(--u) * 1), calc(var(--u) * 7.3) calc(var(--u) * 1), calc(var(--u) * 7.3) calc(var(--u) * 4), calc(var(--u) * 1) calc(var(--u) * 8),calc(var(--u) * 1) calc(var(--u) * 9);
	background-position: 0vmin -0.5vmin, 10.5vmin 3.5vmin, 17.5vmin 0vmin, 31.5vmin -3.55vmin, 38.5vmin -3.5vmin, 20.95vmin -3.5vmin, 28vmin 20.7vmin, 21vmin 21vmin, 20.5vmin 28vmin, 31.5vmin 14vmin, 17.5vmin 7vmin, 14vmin 7vmin;
	z-index: 1;
}



/*** NEXT PIECE ***/
#nextpiece {
	position: absolute;
	top: 0;
	left: 0;
	font-size: 0.6vmin;
	width: 4vmin;
	height: 1vmin;
}

#nextpiece:before {
	content: "NEXT";
	font-size: 0.4vmin;
	position: absolute;
	color: red;
	left: 0.25vmin;
	top: 0.35vmin;
}
#nextpiece:after {
	content: "?";
	position: absolute;
	left: 2vmin;
	top: 0;
	width: 2vmin;
	height: 1vmin;
	box-sizing: border-box;
	text-align: left;
	line-height: 1.3vmin; 
}

#nextpiece[class^="next"]:after, #nextpiece[class*="next"]:after {
	content: "";
}

#nextpiece.nextI:after {
	background: linear-gradient(180deg, #fff0 0 25%, red 0 75%, #fff0 0% 100%);
}

#nextpiece.nextO:after {
	background: linear-gradient(90deg, #fff0 0 25%, blue 0 75%, #fff0 0% 100%);
}

#nextpiece.nextJ:after {
	background: conic-gradient(from 90deg at 33% 50%, yellow 0 75%, #fff0 0 100%);
	background-size: 75% 100%;
	background-repeat: no-repeat;
}

#nextpiece.nextL:after {
	background: conic-gradient(from 0deg at 66% 50%, purple 0 75%, #fff0 0 100%);
	background-size: 75% 100%;
	background-repeat: no-repeat;
}

#nextpiece.nextZ:after {
	background: 
		conic-gradient(from 0deg at 66% 50%, #000 0 25%, #fff0 0 100%), 
		conic-gradient(from -90deg at 33% 50%, orange 0 75%, #fff0 0 100%);
	background-size: 75% 100%;
	background-repeat: no-repeat;
}


#nextpiece.nextS:after {
	background: 
		conic-gradient(from -90deg at 33% 50%, #000 0 25%, #fff0 0 100%),
		conic-gradient(from 180deg at 66% 50%, cyan 0 75%, #fff0 0 100%);
	background-size: 75% 100%;
	background-repeat: no-repeat;
}

#nextpiece.nextT:after {
	background: 
		conic-gradient(from 180deg at 33% 50%, #000 0 25%, #fff0 0 100%),
		conic-gradient(from 180deg at 66% 50%, green 0 75%, #fff0 0 100%);
	background-size: 75% 100%;
	background-repeat: no-repeat;
	transform: rotateX(180deg);
}