Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

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.

+ add another resource

JavaScript

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.

+ 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.

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

              
                - for (c = 0; c < 81; c++)
	.cam

#content.content
	.cuboid.clock
		- for (s = 0; s < 4; s++)
			.side
		.side
			.volume VOLUME BAND
			.sleep SLEEP &#8692; SELECTOR
		.side
		
		.cuboid.base
			- for (s = 0; s < 6; s++)
				.side
		
		.cuboid.black
			- for (s = 0; s < 6; s++)
				.side
				
		- for (cb = 0; cb < 4; cb++)
			.cuboid.border
				- for (var s = 0; s < 6; s++)
					.side
					
		.cuboid.dial
			.side
				.fm &nbsp;88 92 96 100 104 108 &nbsp; &nbsp;MHz
				.am &nbsp;53 65 80 100 130 160 x10kHz
				.needle
			- for (var s = 0; s < 5; s++)
				.side
				
		.cuboid.numbers
			- for (var s = 0; s < 6; s++)
				.side
				
		.cuboid.minutes
			.side
				.num.top.move
					.front 59
					.back 00
				.num.bot 59
				.num.top.fixed 00
			- for (var s = 0; s < 5; s++)
				.side
		
		.cuboid.hours
			.side
				.num.top.move
					.front 5
					.back 9
				.num.bot 5
				.num.top.fixed 6
			- for (var s = 0; s < 5; s++)
				.side
			
		.cuboid.wheel
			- for (var s = 0; s < 6; s++)
				.side
				
		.decagon.scale
			- for (var f = 0; f < 5; f++)
				.face
				
		.decagon.wheeler
			- for (var f = 0; f < 12; f++)
				.face
				
		.decagon.wheeler.btn
			- for (var f = 0; f < 12; f++)
				.face
				
		.decagon.wheeler.right
			- for (var f = 0; f < 12; f++)
				.face
				
		.decagon.wheeler.btn.right
			- for (var f = 0; f < 12; f++)
				.face
				
		.decagon.wheeler.top
			- for (var f = 0; f < 12; f++)
				.face
				
		.decagon.wheeler.squared
			- for (var f = 0; f < 12; f++)
				.face
				
			- for (var cc = 0; cc < 3; cc++)
				.cuboid.cross
					- for (var s = 0; s < 6; s++)
						.side
						
		.cuboid.switch
			- for (var s = 0; s < 6; s++)
				.side
				
	audio(src='https://cdn.josetxu.com/audio/gd-radio-alarm.mp3' id='as1') 
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Michroma&display=swap');

:root {
	--bf: #111;
	--grad: linear-gradient(0deg, #ffffffab, #ffffffdb);
	--deca:  polygon(
        34.54915% 2.44717%,
        65.45085% 2.44717%,
        90.45085% 20.61074%,
        100% 50%,
        90.45085% 79.38926%,
        65.45085% 97.55283%,
        34.54915% 97.55283%,
        9.54915% 79.38926%,
        0% 50%,
        9.54915% 20.61074%
    );
}
	
* {
	transform-style: preserve-3d;
	box-sizing: border-box;
}

body {
	margin: 0;
	height: 100vh;
	overflow: hidden;
	background: radial-gradient(circle at 50% 50%, #333, #000);
	font-family: Arial, Helvetica, serif;
}

.cam {
	transform: translateZ(60vmin);
	float: left;
	width: 11.11%;
	height: 11.11%;
	z-index: 1;
	position: relative;
	cursor: pointer;
	@for $i from 1 through 9 {
		@for $j from 1 through 9 {
			$key: ($i - 1) * 9 + $j;
			&:nth-child(#{$key}) {
				&:hover ~ .content .clock {
					transform: 
						rotateX(($i - 8) * -10deg - 30) 
						rotateY(($j - 8) * 10deg + 30);
				}
			}
		}
	}
	&:active ~ .content {
		transform: scale3d(1.5, 1.5, 1.5);
		transition: all 1s ease 0.5s;
	}
	&:hover ~ .content {
		transition: all 1s ease 0.5s;
	}
}

body.zoom .cam { cursor: zoom-in; }

.content {
	width: 100vw;
	height: 100vh;
	margin: 0 auto;
	justify-content: center;
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	perspective: 150vmin;
	perspective-origin: center;
	position: absolute;
	z-index: -1;
	transition: all 1s ease 0.5s;
}


/*** CUBOID ***/	

.cuboid {
	--hue: 0;
	--sat: 0%;
	height: calc(var(--height) * 1vmin);
	width: calc(var(--width) * 1vmin);
	position: absolute;
}

.side {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 100%;
	width: 100%;
	box-sizing: border-box;
	border-radius: 0.35vmin;
	&:nth-of-type(1) {
		transform: translate3d(-50%, -50%, calc(var(--depth) * 0.5vmin));
		background: var(--grad), hsl(var(--hue), var(--sat), 50%);
	}
	&:nth-of-type(2) {
		transform: translate3d(-50%, -50%, calc(var(--depth) * -0.5vmin)) rotateY(180deg);
		background: var(--grad), hsl(var(--hue), var(--sat), 35%);
	}
	&:nth-of-type(3) {
		width: calc(var(--depth) * 1vmin);
		transform: translate(-50%, -50%) rotateY(90deg) translate3d(0, 0, calc(var(--width) * 0.5vmin));
		background: var(--grad), hsl(var(--hue), var(--sat), 40%);
	}
	&:nth-of-type(4) {
		width: calc(var(--depth) * 1vmin);
		transform: translate(-50%, -50%) rotateY(-90deg) translate3d(0, 0, calc(var(--width) * 0.5vmin));
		background: var(--grad), hsl(var(--hue), var(--sat), 60%);
	}
	&:nth-of-type(5) {
		height: calc(var(--depth) * 1vmin);
		transform: translate(-50%, -50%) rotateX(90deg) translate3d(0, 0, calc(var(--height) * 0.5vmin));
		background: var(--grad), hsl(var(--hue), var(--sat), 70%);
		border: 1px solid hsl(var(--hue), 0%, 50%);
	}
	&:nth-of-type(6) {
		height: calc(var(--depth) * 1vmin);
		transform: translate(-50%, -50%) rotateX(-90deg) translate3d(0, 0, calc(var(--height) * 0.5vmin));
		background: var(--grad), hsl(var(--hue), var(--sat), 25%);
	}	
}




/*** CLOCK ***/

.clock {
	--width: 80;
  --height: 20;
  --depth: 60;
  transform: rotateX(-10deg) rotateY(20deg);
	transition: all 0.5s ease 0s;
	animation: init 3.8s ease 0s;
	> .side {
		&:nth-child(1) {
			background: linear-gradient(-40deg, #fff0 0 44%, #122f4630 45.35% 52%,  #fff0 55.35% 57%, #122f4661 60.25% 65%, #fff0 75.25% 100%), #051c2e3b;
		}		
		&:nth-of-type(5) {
			font-size: 1.35vmin;
			text-shadow: 0 -1px 0 #ccc;
			color: #fff;
			&:before {
				content: "";
				position: absolute;
				background: repeating-radial-gradient(#f7f7f7bd 0 30%, #fff0 35% 100%);
				width: 55%;
				height: 58%;
				left: 24%;
				top: 10%;
				background-repeat: repeat;
				background-size: 1.25vmin 1.25vmin;
				filter: drop-shadow(-1px 1px 1px #000);
			}
			&:after {
				position: absolute;
				width: 11%;
				height: 7%;
				left: 82%;
				top: 82%;
				border: 0.1vmin solid #fff0;
				border-color: #00000014 #fff9 #fff9 #00000014;
				border-radius: 0.5vmin;
				font-size: 1vmin;
				content: "FM AM";
				word-spacing: 4vmin;
				text-align: center;
				padding: 1.35vmin 0.5vmin;
				box-sizing: border-box;
				background: radial-gradient(circle at 45% 50%, #3a3a3a 0 1.25vmin, transparent 1.35vmin 100%), radial-gradient(circle at 50% 50%, #3a3a3a 0 1.25vmin, transparent 1.35vmin 100%), radial-gradient(circle at 55% 50%, #3a3a3a 0 1.25vmin, transparent 1.35vmin 100%);
		 }
		}
	}
}

@keyframes init {
	50% { transform: rotateX(10deg) rotateY(-20deg); }
}


.sleep {
  position: absolute;
  bottom: 11vmin;
  left: 2vmin;
	&:before {
    content: "\00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 0FF \A ON";
    white-space: pre-wrap;
    position: absolute;
    top: -3.75vmin;
    line-height: 1vmin;
    font-size: 1.25vmin;
    left: 7vmin;
	}
	&:after {
    content: "\00a0 \00a0 \00a0 ALARM \A AUTO";
    white-space: pre-wrap;
    position: absolute;
    top: -8.75vmin;
    line-height: 2vmin;
    font-size: 1.125vmin;
    left: 11.5vmin;
	}
}



/*** BASE ***/

.base {
	--width: 60;
	--height: 8;
	--depth: 40;
	transform: translate3d(10vmin, 20vmin, 0vmin);
	> .side {
  	border: 0.125vmin solid #0003;
	}
}
 


/*** BLACK ***/

.black {
	--width: 79;
	--height: 19;
	--depth: 55;
	transform: translate3d(0.5vmin, 0.5vmin, -2vmin);	
	> .side {
		border: 0.125vmin solid #0004;
		background: #333;
		&:nth-of-type(1) {
  background: 
		linear-gradient(90deg, var(--bf) 0 6%, #fff0 0 13%, var(--bf) 0 19%, #fff0 0 49%, var(--bf) 0 54%, #fff0 0 95%, var(--bf) 0 100% ), 
		linear-gradient(0deg, var(--bf) 0 18%, #fff0 0 82%, var(--bf) 0 100% );
		}
	}
}

	


/*** DIAL ***/

.dial {
	--width: 32;
	--height: 12;
	--depth: 55;
	transform: translate3d(43.5vmin, 4.075vmin, -2vmin);
	> .side {
		border: 0.125vmin solid #0004;
		background: #111;
		&:nth-of-type(1) {
			transform: translate3d(-50%, -50%, calc(var(--depth) * 0.485vmin));
			background: #000;
			&:before {
				content: "Panasonic";
				color: #fff;
				font-weight: bold;
				font-size: 1.85vmin;
				float: left;
				width: 100%;
				text-align: right;
				padding: 1vmin 1.5vmin 1vmin 1vmin;
				box-sizing: border-box;
			}
			&:after {
				content: "";
				font-weight: bold;
				float: left;
				width: calc(100% - 2vmin);
				border-bottom: 0.5vmin dotted #fff;
				margin: 2vmin 1vmin 1vmin;
			}
			> div {
				color: #fff;
				font-size: 1.5vmin;
			}
		}
	}
}
	

.am {
  word-spacing: 0.4vmin;
	margin-top: 1.25vmin;
	&:before {
		content: "AM";
		float: left;
		margin-right: 4vmin;
		margin-left: 1vmin;
	}
}

.fm {
  word-spacing: 0.35vmin;
	&:before {
		content: "FM";
		float: left;
		margin-right: 4vmin;
		margin-left: 1vmin;
	}
}

.needle {
	background: #b30000;
	width: 0.2vmin;
	height: 9vmin;
	position: absolute;
	bottom: -0.5vmin;
	left: 12.35vmin;
	border: 1px solid #0002;
	box-shadow: 0.125vmin -0.125vmin 1vmin 0 #0006;
	border-bottom: 0;
	border-radius: 0.15vmin 0.15vmin 0 0;
}



/*** MINUTES ***/

.minutes {
	--width: 11;
	--height: 12;
	--depth: 10;
	transform: translate3d(27.5vmin, 4.075vmin, 19.5vmin);
	> .side {
  	border: 0.125vmin solid #0004;
		background: #1c1c1cb8;
		&:nth-of-type(4):before, 
		&:nth-of-type(3):before, 
		&:nth-of-type(4):before {
			content: "";
			background: repeating-linear-gradient(0deg, #111 0 1.5%, #222 0 2.75%);
			width: 1vmin;
			height: 100%;
			position: absolute;
			right: 0;
			transform-origin: right center;
			transform: rotateY(90deg);
		}
		&:nth-of-type(3):before {
			left: 0;
			transform-origin: left center;
			transform: rotateY(-90deg);
			border-right: 0.5vmin solid #2a2a2a;
			width: 0.5vmin;
		}
	}
}


.num {
	height: 46%;
	background: #000000;
	border: 1px solid #333;
	border-radius: 0.5vmin 0.5vmin 0 0;
	font-family: 'Bebas Neue', Arial, Helvetica, serif;
	color: #fff;
	font-size: 11vmin;
	text-align: center;
	width: 94%;
	margin-left: 2%;
	line-height: 12vmin;
	&.top {
  	margin-top: 2%;
		&.move {
			transform-origin: center bottom;
			transform: rotateX(0deg);
			animation: wakeup 0.35s ease-in 0s 1;
			animation-play-state: paused;
			animation-fill-mode: forwards;
		}
		&.fixed {
			position: absolute;
			top: 0;
			z-index: -1;
			&:before {
				content: "";
				background: #101010;
				width: 100%;
				height: 0.1vmin;
				position: absolute;
				bottom: 0;
				left: 0;
			}
		}
	}
	
	&.bot {
		border-radius:  0 0 0.5vmin 0.5vmin;
		line-height: 0vmin;
		overflow: hidden;
	}
}


.clock.active .num.top.move {
	animation-play-state: running;
}

@keyframes wakeup {
	100% { transform: rotateX(-175deg) ; }
}



/*** HOURS ***/

.hours {
	--width: 10;
	--height: 12;
	--depth: 10;
	transform: translate3d(16.5vmin, 4.075vmin, 19.5vmin);
	> .side {
		border: 0.125vmin solid #0004;
		background: #1c1c1cb8;
		&:nth-of-type(4):before {
			width: 0.75vmin;
			border-left: 0.5vmin solid #2a2a2a;
		}
	}
	.num.top.move {
		animation-delay: 0.1s;
		animation-duration: 0.25s;
	}
}



/*** WHEEL ***/

.wheel {
	--width: 5.5;
	--height: 12;
	--depth: 10;
	transform: translate3d(5.25vmin, 4.075vmin, 20.5vmin);
	> .side {
    border: 0.125vmin solid #0004;
		background: #1c1c1c;
		&:nth-of-type(1) {
    	opacity: 0;
		}
		&:nth-of-type(3):before {
			content: "";
			position: absolute;
			border: 0.2vmin solid #fff0;
			border-left: 1.5vmin solid #b30000;
			top: calc(50% - 0.35vmin);
			transform: rotateY(90deg);
			transform-origin: left center;
		}
	}
}



/*** NUMBERS ***/

.numbers {
	--width: 24;
	--height: 12;
	--depth: 12;
	transform: translate3d(15.5vmin, 4.075vmin, 19.5vmin);
	> .side {
  	border: 0.125vmin solid #0004;
		background: #000;
		&:nth-child(1) {
			opacity: 0;
		}
		&:nth-of-type(6):before {
			content: "";
			width: 24vmin;
			height: 12vmin;
			position: absolute;
			left: 0;
			box-shadow: 0 -2vmin 2vmin 0 #ffcc0036 inset, 0 2vmin 2vmin 0 #ffcc0036 inset;
			transform: rotateX(-90deg) translateY(6vmin) translateZ(-6vmin);
			background: radial-gradient(circle at 24% 103%, #ffcc0080 0 0%, #fff0 30% 100%), radial-gradient(circle at 70% 103%, #ffcc0080 0 0%, #fff0 30% 100%);
			opacity: 0.5;
		}
	}
}


.front, .back {
  backface-visibility: hidden;
  box-sizing: border-box;
  color: white;
  display: block;
  height: 100%;
  position: absolute;
  text-align: center;
  width: 100%;
}

.back {
  transform: rotateY( 180deg);
}




/*** DECAGON ***/

.decagon {
	--width: 19;
	--height: 19;
	--depth: 5;
	--hue: 200;
	--sat: 0%;
	height: calc(var(--height) * 1vmin);
	width: calc(var(--width) * 1vmin);
	position: absolute;
	transform: translate3d(-1.5vmin, 0.5vmin, 16vmin) rotateZ(45deg) rotateX(90deg) rotateY(45deg) rotate(145deg);
	
	.face {
		--line: conic-gradient(from 180deg at 6% 0%, #fff 0 25%, #fff0 0 100%);
    position: absolute;
    top: 50%;
    left: 50%;
    height: 100%;
    width: 100%;
    background: var(--line), var(--line), var(--line), var(--line), var(--line), var(--line), var(--line), var(--line), var(--line), linear-gradient(0deg, #fff 0 20%, #111 0 100%);
    overflow: hidden;
    background-size: 38% 56%, 38% 56%, 38% 56%, 38% 56%, 38% 56%, 38% 56%, 38% 56%, 38% 56%, 38% 56%, 100% 100%;
    background-repeat: no-repeat;
    background-position: 16% 160%, 151% 160%, 68% 160%, 50% 160%, 103% 160%, 118% 160%, 135% 130%, 85% 130%, 31% 130%, 0 0;
		
		&:nth-of-type(1) {
			clip-path:  var(--deca);
			transform: translate3d(-50%, -50%, calc(var(--depth) * 0.5vmin));
			background: #222;
				box-shadow: none;
				border: 0;
				background-size: 0.5% 0.5%;
		}
		&:nth-of-type(2) {
			clip-path:  var(--deca);
			transform: translate3d(-50%, -50%, calc(var(--depth) * -0.5vmin)) rotateY(180deg);
			background: #222;
				box-shadow: none;
				border: 0;
				background-size: 0.5% 0.5%;
		}
		&:nth-of-type(1n + 3) {
			width: calc(calc(calc(var(--width) * 31) / 100) * 1vmin);
			height: calc(var(--depth) * 1vmin);
			transform: translate(-50%, -50%) rotateY(90deg) rotateX(90deg) rotateZ(-90deg) translate3d(0vmin, 0, calc(var(--width) * 0.475vmin));
			filter: hue-rotate(360deg);
			display: flex;
			justify-content: center;
			&:after {
				content: "";
				transform: rotate(-90deg);
				font-family: 'Michroma', Arial, Helvetica, serif;
				position: absolute;
				font-size: 1vmin;
				color: #fff;
				text-align: right;
				max-width: 2.1vmin;
				line-height: 1.85vmin;
				top: -0.25vmin;
			}
		}
		&:nth-of-type(3):after {
    	content: "4 3 2";
		}
		&:nth-of-type(4) {
			transform: translate(-50%, -50%) rotateY(90deg) rotateX(54deg) rotateZ(-90deg) translate3d(0vmin, 0, calc(var(--width) * 0.475vmin));
			&:after {
    		content: "7 6 5";
			}
		}
		&:nth-of-type(5) {
			transform: translate(-50%, -50%) rotateY(90deg) rotateX(18deg) rotateZ(-90deg) translate3d(0vmin, 0, calc(var(--width) * 0.475vmin));
			&:after {
    		content: "10 9 8";
			}
		}
		&:nth-of-type(6) {
			transform: translate(-50%, -50%) rotateY(90deg) rotateX(-18deg) rotateZ(-90deg) translate3d(0vmin, 0, calc(var(--width) * 0.475vmin));
		}
		&:nth-of-type(7) {
			transform: translate(-50%, -50%) rotateY(90deg) rotateX(-54deg) rotateZ(-90deg) translate3d(0vmin, 0, calc(var(--width) * 0.475vmin));
		}
		&:nth-of-type(8) {
			transform: translate(-50%, -50%) rotateY(90deg) rotateX(-90deg) rotateZ(-90deg) translate3d(0vmin, 0, calc(var(--width) * 0.475vmin));
		}
		&:nth-of-type(9) {
			transform: translate(-50%, -50%) rotateY(90deg) rotateX(-126deg) rotateZ(-90deg) translate3d(0vmin, 0, calc(var(--width) * 0.475vmin));
		}
		&:nth-of-type(10) {
			transform: translate(-50%, -50%) rotateY(90deg) rotateX(-162deg) rotateZ(-90deg) translate3d(0vmin, 0, calc(var(--width) * 0.475vmin));
		}
		&.face:nth-of-type(11) {
			transform: translate(-50%, -50%) rotateY(90deg) rotateX(-198deg) rotateZ(-90deg) translate3d(0vmin, 0, calc(var(--width) * 0.475vmin));
		}
		&:nth-of-type(12) {
			transform: translate(-50%, -50%) rotateY(90deg) rotateX(-234deg) rotateZ(-90deg) translate3d(0vmin, 0, calc(var(--width) * 0.475vmin));
		}
		
	}
	
}







/*** WHEELERS ***/

.wheeler {
	--width: 12;
	--height: 12;
	--depth: 1;
	transform: translate3d(-6.5vmin, 4.5vmin, 16vmin) rotateZ(45deg) rotateX(90deg) rotateY(45deg) rotate(145deg);
	> .face {
		background: repeating-linear-gradient(90deg, #d7d7d7 0 1.1%, #ffffff 0 2.2%), #dedede;
    box-shadow: 0 0 1vmin 0 #0003 inset;
		&:nth-child(2) {
			background: linear-gradient(0deg, #dfdfdf, #f1f1f1) !important;
			background: radial-gradient(#f1efef 0 43%, #ccc8 44% 46%, #fff0 0 100%), repeating-conic-gradient(from 0deg at 50% 50%, #e3e1e1 0 0.75%, #fff 0 2%) !important;
		}
		&:after {
			display: none;
		}
	}
	&.btn {
		--width: 5;
		--height: 5;
		--depth: 3;
		transform: translate3d(-5vmin, 8vmin, 16vmin) rotateZ(45deg) rotateX(90deg) rotateY(45deg) rotate(145deg);
		.face:nth-child(1n + 3) {
    	background: repeating-linear-gradient(90deg, #d7d7d7 0 1.5%, #ffffff 0 4%), #dedede;
		}
		&.right {
    	transform: translate3d(80.1vmin, 8vmin, 16vmin) rotateZ(45deg) rotateX(90deg) rotateY(225deg) rotate(145deg);
		}
	}
	&.right {
    transform: translate3d(74.55vmin, 4.5vmin, 16vmin) rotateZ(45deg) rotateX(90deg) rotateY(225deg) rotate(145deg);
	}
	&.top {
		--width: 7;
		--height: 7;
		--depth: 1;
		transform: translate3d(56vmin, -4vmin, 21vmin) rotateZ(45deg) rotateX(90deg) rotateY(135deg) rotate(145deg);
		> .face:nth-of-type(2) {
  		background: radial-gradient(#f1efef 0 43%, #ccc8 44% 46%, #fff0 0 100%), repeating-conic-gradient(from 0deg at 50% 50%, #9c9c9c 0 0.75%, #fff 0 2%) !important;
		}
	}
	&.squared {
		--width: 9;
		--height: 9;
		--depth: 2;
		transform: translate3d(4vmin, -5.5vmin, 9vmin) rotateZ(45deg) rotateX(90deg) rotateY(135deg) rotate(135deg);
		> .face:nth-child(2) {
  background: radial-gradient(#ededed 0 60%, #dbdbdb 0 100%) !important;
		}
	}

}

.volume {
	position: absolute;
	bottom: 2.75vmin;
	right: 7.5vmin;
	font-size: 1.35vmin;
	text-shadow: 0 -1px 0 #ccc;
	word-spacing: 6vmin;
	&:before, &:after {
    content: "MIN";
    position: absolute;
    top: -1.25vmin;
    font-size: 1vmin;
    left: -1.5vmin;
	}
	&:after {
			content: "MAX";
			left: 5vmin;
	}
}


.cross {
	--width: 0.75;
	--height: 11;
	--depth: 1.25;
	transform: translate3d(4vmin, -1vmin, -0.25vmin);
	.side {
		background: #f7f7f7;
		box-shadow: 0 0 0.5vmin 0 #0004 inset;
		border-color: #0004;
		border-radius: 0.15vmin;
	}
	+ .cross {
    transform: translate3d(8.25vmin, 3.5vmin, -0.25vmin) rotate(90deg);
    --height: 2;
		+ .cross {
			--width: 1.25;
			--height: 7;
			--depth: 1.5;
			transform: translate3d(3.75vmin, 0.75vmin, -1.8vmin) rotate(35deg);
			.side:nth-of-type(2) {
				&:before {
					content: "";
					position: absolute; 
					width: 100%;
					height: 2px;
					background: #ccc;
					border-top: 0.1vmin solid #f8f8f8;
					top: 75%
				}
				&:after {
					content: "";
					position: absolute;
					width: 0.35vmin;
					height: 1vmin;
					background: #d5d5d5;
					border-right: 0.1vmin solid #f8f8f8;
					top: 85%;
					left: 0.4vmin;
				}
			}
		}
		.side:nth-of-type(2):before {
			background: #ff00005c;
			width: 0.25vmin;
			height: 0.25vmin;
			content: "";
			position: absolute;
			left: 0.25vmin;
			top: 0.35vmin;
		}
	}
}


/*** BORDER ***/

.border {
	--width: 79;
	--height: 1;
	--depth: 3.75;
	transform: translate3d(0.5vmin, 0.5vmin, 28.5vmin);	
	> .side {
		border: 0.125vmin solid #0004;
		background: #181818;
	}
	+ .border {
    transform: translate3d(0.5vmin, 18.5vmin, 28.5vmin);
		+ .border {
    	--width: 1;
    	--height: 19;
    	transform: translate3d(0.5vmin, 0.5vmin, 28.5vmin);
			+ .border {
    		--width: 1;
    		--height: 19;
    		transform: translate3d(78.5vmin, 0.5vmin, 28.5vmin);
			}
		}
	}
}



/*** SWITCH ***/

.switch {
	--width: 1.25;
	--height: 2;
	--depth: 1.25;
	transform: translate3d(68.75vmin, -1.5vmin, 21.125vmin);
	> .side {
    border: 0.125vmin solid #0008;
    background: #333;
    box-shadow: 0 0 0.5vmin 0 #0008 inset;
    border-radius: 0.2vmin;
		&:nth-child(5) {
    	background: repeating-linear-gradient(90deg, #000 0 10%, #fff0 0 20%), repeating-linear-gradient(0deg, #000 0 10%, #fff0 0 22%);
		}
	}
}


audio {
    display: none;
}
              
            
!

JS

              
                times = 0;
var c = document.querySelectorAll('.cam');
for (i = 0; i < c.length; ++i) {
  c[i].addEventListener("click", function(){
		if(times==0) {
			document.querySelector('.clock').classList.add('active');
			document.body.classList.add('zoom');
			setTimeout(function(){
				document.getElementById('as1').play();
			}, 250)
			times++;
		}
	});
};
              
            
!
999px

Console