Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ 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

Save Automatically?

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 (i = 0; i < 400; i++)
	.cam
.content
	.endurance
		.modules
			.group.mod-1
				.module.type-1
					- for (s = 0; s < 8; s++)
						.side
					.window
						- for (s = 0; s < 5; s++)
							.side
					.cuboid.hole
						- for (s = 0; s < 6; s++)
							.side
						span
			.group.mod-2
				.module.type-2
					- for (s = 0; s < 8; s++)
						.side
					.cuboid.hole
						- for (s = 0; s < 6; s++)
							.side
						- for (n = 0; n < 3; n++)
							.nozzle
								- for (s = 0; s < 15; s++)
									span
								div
			.group.mod-3
				.module.type-1.type-3
					- for (s = 0; s < 8; s++)
						.side
					.window
						- for (s = 0; s < 5; s++)
							.side
					.cuboid.hole
						- for (s = 0; s < 6; s++)
							.side
						span
				.module.type-2.type-3
					- for (s = 0; s < 8; s++)
						.side
			.group.mod-4
				.module.type-2
					- for (s = 0; s < 8; s++)
						.side
					.cuboid.hole
						- for (s = 0; s < 6; s++)
							.side
						- for (n = 0; n < 3; n++)
							.nozzle
								- for (s = 0; s < 15; s++)
									span
								div
			- for (m = 5; m < 8; m++)
				div(class="group mod-" + (m))
					.module.type-1
						- for (s = 0; s < 8; s++)
							.side
						.window
							- for (s = 0; s < 5; s++)
								.side
						.cuboid.hole
							- for (s = 0; s < 6; s++)
								.side
							span
			.group.mod-8
				.module.type-2
					- for (s = 0; s < 8; s++)
						.side
					.cuboid.hole
						- for (s = 0; s < 6; s++)
							.side
						- for (n = 0; n < 3; n++)
							.nozzle
								- for (s = 0; s < 15; s++)
									span
								div
			.group.mod-9
				.module.type-1.type-3
					- for (s = 0; s < 8; s++)
						.side
					.cuboid.hole
						- for (s = 0; s < 6; s++)
							.side
						span
			.group.mod-10
				.module.type-2
					- for (s = 0; s < 8; s++)
						.side
					.cuboid.hole
						- for (s = 0; s < 6; s++)
							.side
						- for (n = 0; n < 3; n++)
							.nozzle
								- for (s = 0; s < 15; s++)
									span
								div
			- for (m = 11; m < 13; m++)
				div(class="group mod-" + (m))
					.module.type-1
						- for (s = 0; s < 8; s++)
							.side
						.window
							- for (s = 0; s < 5; s++)
								.side
						.cuboid.hole
							- for (s = 0; s < 6; s++)
								.side
							span
		.cylinders
			- for (c = 1; c < 13; c++)
				div(class="group cyl-" + (c))
					.cylinder
						- for (s = 0; s < 10; s++)
							.side
					if (c) == 3 || (c) == 5 || (c) == 9 || (c) == 11
						.cylinder.port
							- for (s = 0; s < 10; s++)
								if (s) == 1
									.side.ring
								else
									.side
							.hatch
								span
								span
								span
					else
						.cylinder
							- for (s = 0; s < 10; s++)
								.side
		.chains
			- for (ch = 1; ch < 25; ch++)
				div(class="group cha-" + (ch))
					.cuboid.chain
						- for (s = 0; s < 6; s++)
							.side
		.radius
			.group
				- for (rc = 0; rc < 12; rc++)
					.cylinder
						if (rc) == 0 || (rc) == 6 || (rc) == 9
								.side.ring
						else
							.side
						if (rc) == 6 || (rc) == 9
								.side.ring-dark
						else
							.side
						- for (s = 0; s < 8; s++)
							.side
						if (rc) == 0 || (rc) == 6 || (rc) == 9
							.hatch
								span
								span
								span
						if (rc) == 6 || (rc) == 9
							.hatch
								span
								span
								span
				- for (cc = 0; cc < 4; cc++)
					.cuboid.chain
						- for (s = 0; s < 10; s++)
							.side
				- for (rc = 0; rc < 2; rc++)
					.cylinder
						- for (s = 0; s < 10; s++)
							if (s) == 0
								.side.ring
							else
								.side
						.hatch
							span
							span
							span
.blackhole
	.gargantua
		.bot-photon-ring
		.image-disk
		.image-disk-lines
		.accretion-disk
		.top-photon-ring
              
            
!

CSS

              
                :root {	
	--sat: 5%;
	--hue: 200;
	--sp0: #b9c0c3;
  --sp1: #9cabb2;
  --sp2: #949dad;
  --sp3: #838ea0;
	--sp4: #737d8e;
  --sp5: #6a7484;	
  --sp6: #575e6b;
  --sp7: #464c56;	
	--sp8: #353a42;
	--luz-05: hsl(var(--hue), var(--sat), 5%); 
	--luz-10: hsl(var(--hue), var(--sat), 10%); 
	--luz-15: hsl(var(--hue), var(--sat), 15%); 
	--luz-20: hsl(var(--hue), var(--sat), 20%); 
	--luz-25: hsl(var(--hue), var(--sat), 25%); 
	--luz-30: hsl(var(--hue), var(--sat), 30%); 
	--luz-35: hsl(var(--hue), var(--sat), 35%); 
	--luz-40: hsl(var(--hue), var(--sat), 40%); 
	--luz-45: hsl(var(--hue), var(--sat), 45%); 
	--luz-50: hsl(var(--hue), var(--sat), 50%); 
	--luz-55: hsl(var(--hue), var(--sat), 55%); 
	--luz-60: hsl(var(--hue), var(--sat), 60%);
	--luz-65: hsl(var(--hue), var(--sat), 65%);
	--luz-70: hsl(var(--hue), var(--sat), 70%);
	--luz-75: hsl(var(--hue), var(--sat), 75%);
	--luz-80: hsl(var(--hue), var(--sat), 80%);
	--luz-85: hsl(var(--hue), var(--sat), 85%);
	--luz-90: hsl(var(--hue), var(--sat), 90%);
	--dot-spb: conic-gradient(from 90deg at 0% 0%, var(--luz-20) 0% 25%, #fff0 0% 100%) no-repeat;
	--dot-spl: conic-gradient(from 90deg at 0% 0%, var(--sp0) 0% 25%, #fff0 0% 100%) no-repeat;
	--dot-spm: conic-gradient(from 90deg at 0% 0%, var(--sp3) 0% 25%, #fff0 0% 100%) no-repeat;
	--dot-spd: conic-gradient(from 90deg at 0% 0%, var(--sp4) 0% 25%, #fff0 0% 100%) no-repeat;
	--w1: conic-gradient(from 180deg at 50% 50%, #fff0 0%, var(--sp8) 1% 32%, #fff0 33%) no-repeat;
  --w2: conic-gradient(from 245deg at 50% 50%, #fff0 0%, var(--sp8) 1% 32%, #fff0 33%) no-repeat;
	--w3: conic-gradient(from 65deg at 50% 50%, #fff0 0%, var(--sp8) 1% 32%, #fff0 33%) no-repeat;
  --w4: conic-gradient(from 0deg at 50% 50%, #fff0 0%, var(--sp8) 1% 32%, #fff0 33%) no-repeat;
  --w5: conic-gradient(from 0deg at 50% 50%, #fff0 0%, var(--sp8) 0% 25%, #fff0 0 100%) no-repeat;
	--white:  #ffffff;
	--yellow: #f1edb6;
	--black:  #000000;
}


* {
  transform-style: preserve-3d;
}

body {
	margin: 0;
    height: 100vh;
    background: linear-gradient(-45deg, #080808, #0a0a0a, #080808), #080808;
    overflow: hidden;	
	background-image: 
		radial-gradient(1px 1px at 5% 98%, #ffffff, #fff0), 
		radial-gradient(1px 1px at 18% 79%,  #ffffff, #fff0), 
		radial-gradient(2px 1px at 26% 52%, #ffffff, #fff0), 
		radial-gradient(1px 2px at 31% 20%, #e6e6e6, #fff0), 
		radial-gradient(1px 1px at 41% 44%, #e8e8e8, #fff0), 
		radial-gradient(1px 2px at 47% 6%, #ffffff, #fff0), 
		radial-gradient(1px 1px at 50% 71%, #f5f5f5, #fff0), 
		radial-gradient(2px 1px at 65% 50%, #e2e2e2, #fff0), 
		radial-gradient(1px 1px at 54% 26%,  #ffffff, #fff0), 
		radial-gradient(2px 2px at 76% 34%,  #efefef, #fff0), 
		radial-gradient(1px 1px at 10% 32%,  #ececec, #fff0), 
		radial-gradient(1px 2px at 84% 60%,  #ffffff, #fff0), 
		radial-gradient(1px 1px at 87% 13%, #eaeaea, #fff0), 
		radial-gradient(1px 1px at 69% 21%,  #efefef, #fff0),
		radial-gradient(1px 2px at 62% 83%,  #efefef, #fff0),
		radial-gradient(2px 1px at 51% 66%,  #efefef, #fff0),
		radial-gradient(1px 1px at 36% 62%,  #efefef, #fff0),
		radial-gradient(1px 1px at 94% 68%,  #efefef, #fff0),
		radial-gradient(2px 1px at 98% 50%,  #efefef, #fff0),
		radial-gradient(1px 1px at 95% 21%,  #efefef, #fff0),		
		linear-gradient(45deg, #000 5%, #000313 65%, #111 100%);
    background-repeat: repeat;
    background-size: 25% 25%, 33.33% 33.33%, 50% 50%, 20% 20%, 33.33% 33.33%, 25% 18%, 33.33% 19%, 33.33% 21%, 23% 27%, 27.33% 35.33%, 18.33% 32.33%, 28.33% 34.33%, 33.33% 30.33%, 25.33% 29.33%, 29.33% 31.33%, 20.33% 29.33%, 30.33% 27.33%, 22.33% 33.33%, 15.33% 32.33%, 33.33% 22.33%, 100% 100%;
}

.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 0s;
}

.endurance {
	width: 90vmin;
	height: 90vmin;
	transform: rotateX(40deg) rotateZ(-70deg);
	border-radius: 100%;
	transition: all 0.75s ease 0s;
	animation: spin 4s ease 0s 1;
}




@keyframes spin {
	  0% { transform: rotateX(142.5deg) rotateZ(47deg); }
	100% { transform: rotateX(40deg) rotateZ(-70deg); }
}





/*** MODULES ***/

.modules {
	width: 100%;
	height: 100%;
	border-radius: 100%;
	position: absolute;
}

.module {
	--height: 15;
	--width: 10;
	--depth: 15;
	transform: translate3d(0vmin, 0vmin, 0vmin);
	transform-origin: left center;
	height: calc(var(--height) * 1vmin);
	width: calc(var(--width) * 1vmin);
	position: absolute;
	bottom: 0;
	.side {
		position: absolute;
		top: 50%;
		left: 50%;
		height: 100%;
		width: 100%;
		box-sizing: border-box;
		border-radius: 2px;
		border: 1px solid var(--luz-35);
	}
	> .side:nth-of-type(2) {
    clip-path: polygon(0% 0%, 0% 100%, 10% 100%, 10% 40%, 90% 40%, 90% 90%, 10% 90%, 10% 100%, 100% 100%, 100% 0%);
	}
}



/*** TYPE 1 ***/

.type-1 {
	.side:nth-of-type(1) {
    width: calc(100% - 3vmin);
		transform: translate3d(-50%, -50%, calc(var(--depth) * 0.5vmin));
    background-color:  var(--luz-85);
	}
	.side:nth-of-type(2) { 
		transform: translate3d(-50%, -50%, calc(var(--depth) * -0.5vmin));
		background-color:  var(--luz-25);
	}
	.side:nth-of-type(3) {
		width: calc(var(--depth) * 1vmin - 1.5vmin);
		transform: translate(-50%, -50%) rotateY(90deg) translate3d(0.75vmin, 0, calc(var(--width) * 0.5vmin));
		background-color:  var(--luz-40);		
	}
	.side:nth-of-type(4) {		
		width: calc(var(--depth) * 1vmin - 1.5vmin);
    transform: translate(-50%, -50%) rotateY(-90deg) translate3d(-0.75vmin, 0, calc(var(--width) * 0.5vmin));
    background-color: var(--luz-60);
	}
	.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:  var(--luz-80);
	}
		.side:nth-of-type(6) {
		height: calc(var(--depth) * 1vmin);
		clip-path: polygon(15% 0%, 0% 9.5%, 0% 100%, 100% 100%, 100% 9.5%, 85% 0%);
		transform: translate(-50%, -50%) rotateX(-90deg) translate3d(0, 0, calc(var(--height) * 0.5vmin));
		background-color:  var(--luz-35);
	}
	.side:nth-of-type(7) {
		height: calc(var(--height) * 1vmin);
		width: calc(var(--width) * 1vmin / 4.625 );
		transform: translate3d(63%, -50%, calc(var(--depth) * 0.5vmin)) rotateY(225deg);
		transform-origin: right center;
		background-color: var(--luz-55);
	}
	.side:nth-of-type(8) {
		height: calc(var(--height) * 1vmin);
		width: calc(var(--width) * 1vmin / 4.625 );
		transform: translate3d(-260%, -50%, calc(var(--depth) * 0.5vmin)) rotateY(-44deg);
		transform-origin: right center;
		background-color:  var(--luz-70);
	}
}




/*** TYPE 2 ***/

.type-2 {
	.side:nth-of-type(1) {
		height: calc(100% / 1.495);
		transform: translate3d(-50%, -50%, calc(var(--depth) * 0.5vmin)) translate3d(0, calc(var(--width) / 4 * -1vmin), 0);
		background: 
			linear-gradient(-135deg, var(--luz-15) 0 5%, #fff0 0 100%), 
			linear-gradient(-220deg, var(--luz-15) 0 5%, #fff0 0 100%),
			conic-gradient(from 90deg at 48% 75%, var(--luz-85) 0% 25%, #fff0 0% 100%) no-repeat, 
			var(--dot-spb), 
			conic-gradient(from 90deg at 48% 75%, var(--luz-80) 0% 25%, #fff0 0% 100%) no-repeat, 
			repeating-linear-gradient(180deg, #fff0 0 10%, #fff8 0 11%, var(--luz-75) 0 12%, #fff0 0 66%, #fff8 0 67%, var(--luz-75) 0 68%, #fff0 0 89%, #fff8 0 90%, var(--luz-75) 0 91%, #fff0 0 100% ),
			repeating-linear-gradient(90deg, #fff0 0 97%, #fff8 0 98%, #b3b3b3 0 100%), var(--luz-85);
		background-position: 0 0, 0 0, 48% 32.5%, 68% 36%, 60% -150%, -20% top, -20% top, -20% top;
			background-size: 100% 100%, 100% 100%, 5% 83%, 12% 9%, 38% 80%, 100% 100%, 32% 50%, 32% 50%;
	}
	.side:nth-of-type(2) {
		height: calc(100% / 1.5);
		transform: translate3d(-50%, -25%, calc(var(--depth) * -0.5vmin)) rotateY(180deg);
		background-color: var(--luz-25);
    clip-path: polygon(0% 0%, 0% 100%, 10% 100%, 10% 10%, 90% 10%, 90% 90%, 10% 90%, 10% 100%, 100% 100%, 100% 0%);
	}
	.side:nth-of-type(3) {
		width: calc(var(--depth) * 1vmin);
		clip-path: polygon(74% 0, 100% 33%, 100% 100%, 26% 100%, 0 67%, 0 0);
		transform: translate(-50%, -50%) rotateY(90deg) translate3d(0vmin, 0, calc(var(--width) * 0.5vmin));
		background-color:  var(--luz-40);
	}
	.side:nth-of-type(4) {
		width: calc(var(--depth) * 1vmin);
		clip-path: polygon(26% 0, 100% 0, 100% 67%, 74% 100%, 0 100%, 0 33%);
		transform: translate(-50%, -50%) rotateY(-90deg) translate3d(0vmin, 0, calc(var(--width) * 0.5vmin));
		background-color:  var(--luz-60);
	}
	.side:nth-of-type(5) {  
		height: calc(var(--depth) * 1vmin - 3.9vmin);
		transform: translate(-50%, -50%) rotateX(90deg) translate3d(0, 1.9vmin, calc(var(--height) * 0.5vmin));
		background: 
			conic-gradient(from 90deg at 0% 0%, var(--luz-80) 0 25%, #fff0 0 100%) no-repeat, 
			conic-gradient(from 90deg at 0% 0%, var(--luz-80) 0 25%, #fff0 0 100%) no-repeat, 
			repeating-linear-gradient(0deg, #fff0 0 15.5%, #fff8 0 16%, var(--luz-60) 0 17%, #fff0 0 84.5%, #fff8 0 85%, var(--luz-60) 0 86%, #fff0 0 100%), 
			repeating-linear-gradient(90deg, #fff0 0 96.75%, #fff8 0 97.75%, var(--luz-60) 0 100%), var(--luz-80);
		background-position: 100% 85%, 0% 85%, -20% top, -20% top;
		background-size: 17.5% 3%, 18% 3%, 100% 100%, 32% 50%;
	}
	.side:nth-of-type(6) {
		height: calc(var(--depth) * 1vmin - 3.9vmin);
		transform: translate(-50%, -50%) rotateX(-90deg) translate3d(0vmin, 1.9vmin, calc(var(--height) * 0.5vmin));
		background: 
			conic-gradient(from -22.5deg at 50% 30%, var(--luz-35) 0 10%, #fff0 0 100%), 		
			repeating-linear-gradient(0deg, #fff0 0 69%, var(--luz-40) 0 70%, var(--luz-25) 0 71%, #fff0 0 100%),		
			repeating-linear-gradient(90deg, #fff0 0 95%,  var(--luz-40) 0 98%, var(--luz-25) 0 100%), var(--luz-35);
		background-position: 50% 30%, -20% top, -20% top;
		background-size: 100% 100%, 100% 100%, 32% 50%;
	}
	.side:nth-of-type(7) {
		transform-origin: center top;
		transform: translate3d(-50%, -50%, calc(var(--depth) * 0.5vmin)) translate3d(0, 5.7vmin, 0vmin) rotateX(-38.5deg);
		height: calc(100% - var(--width) * 0.875vmin);
		background: 
			repeating-linear-gradient(180deg, #fff0 0 89.75%, #fff8 0 90%, var(--luz-60) 0 91%, #fff0 0 100%), 
			repeating-linear-gradient(90deg, #fff0 0 96.75%, #fff8 0 97.75%, var(--luz-60) 0 100%), var(--luz-75);
		background-position: -20% top;
		background-size: 100% 100%, 32% 50%;
	}
	.side:nth-of-type(8) {
		transform-origin: center top;
		transform: translate3d(-50%, -50%, calc(var(--depth) * 0.5vmin)) translate3d(0, -4.3vmin, -11.1vmin) rotateX( -38.5deg);
		background: 
			repeating-linear-gradient(0deg, #fff0 0 69%, #fff3 0 70%, var(--luz-30) 0 71%, #fff0 0 100%), 
			repeating-linear-gradient(90deg, #fff0 0 96.3%, #fff5 0 97.6%, var(--luz-30) 0 100%), 
			var(--luz-35);
		height: calc(100% - var(--width) * 0.875vmin);
		background-position: -20% top;
		background-size: 100% 100%, 32% 50%;
	}
	/*** Black Corners ***/
	> .side:nth-of-type(1):before,
	> .side:nth-of-type(1):after,
	> .side:nth-of-type(3):before,
	> .side:nth-of-type(4):before,
	> .side:nth-of-type(5):before, 
	> .side:nth-of-type(5):after {
		content: "";
		position: absolute;
		width: 1.25vmin;
		height: 1.25vmin;
		border-radius: 2px;
	}
	> .side:nth-of-type(1):before {
			left: -1px;
			top: -1px;
			background: linear-gradient(135deg, var(--luz-10) 0 50%, #fff0 0 50%);
	}
	> .side:nth-of-type(1):after {
		left: calc(100% - 1.25vmin + 1px);
		top: -1px;
		background: linear-gradient(-135deg, var(--luz-10) 0 50%, #fff0 0 50%);
	}
	> .side:nth-of-type(5):before, /*test*/
	> .side:nth-of-type(5):after {
			right: -1px;
			bottom: -1px;
			background: linear-gradient(-45deg, var(--luz-10) 0 50%, #fff0 0 50%);
	}
	> .side:nth-of-type(5):after {
			left: -1px;
			bottom: -1px;
			background: linear-gradient(45deg, var(--luz-10) 0 50%, #fff0 0 50%);
	}
	> .side:nth-of-type(4):before {
			right: -1px;
			top: -1px;
			background: linear-gradient(-135deg, var(--luz-10) 0 50%, #fff0 0 50%);
	}
	> .side:nth-of-type(3):before {
			left: -1px;
			top: -1px;
			background: linear-gradient(135deg, var(--luz-10) 0 50%, #fff0 0 50%);
	}
	.cuboid.hole > .side {
    border-color: #000000f0 !important;
	}
} /*** end .type-2 ***/



/*** Module 2 ***/ /*** TEST ***/
.module.type-2 .side, 
.module.type-2.type-3 .side {
    border-color: var(--luz-60);
}
.module.type-2.type-3 .side:nth-child(6) {
    background: var(--luz-60);
}
.type-2.type-3 > .side:before, 
.type-2.type-3 > .side:after {
    display: none;
}
/*** Module 2 ***/






/*** TYPE 1-3 ***/

.type-3 {
  transform: rotateX(90deg);
	> .side:nth-of-type(1) {
		background-color:  var(--luz-80);
	}
	> .side:nth-of-type(2) {
		clip-path: none;
		transform: translate3d(-50%, -50%, calc(var(--depth) * -0.5vmin)) rotateY(0deg) rotateZ(180deg);
		background-color: var(--luz-35);
	}
	> .side:nth-of-type(4):before {
		content: "";
		background: var(--luz-60);
		position: absolute;
		top: calc(100% - 10%);
		right: 75%;
		width: 10%;
		height: 10%;
	}
	> .side:nth-of-type(5) {
		clip-path: polygon(0% 0%, 0 90%, 10% 97%, 10% 6%, 90% 6%, 90% 60%, 10% 60%, 10% 97%, 15% 100%, 86% 100%, 100% 90%, 100% 0%);
		background-color:  var(--luz-25);
	}
	> .side:nth-of-type(6) {
		background: 
			conic-gradient(from 90deg at 0% 0%, var(--luz-85) 0 25%, #fff0 0 100%) 100% 38% no-repeat, 
			conic-gradient(from 90deg at 0% 0%, var(--luz-85) 0 25%, #fff0 0 100%) 100% 70% no-repeat, 
			var(--w1) 15% 1.5%, var(--w2) 15% 10%, var(--w3) 80% 1%, var(--w4) 80% 9%, var(--w5) 92% 9%, 
			var(--dot-spb) 100% 100%, 
			linear-gradient(180deg, var(--luz-85) 0 23.4%, #fff0 0 91.5%, var(--luz-85) 0 100%), 
			linear-gradient(90deg, var(--luz-85) 0 10%, #fff0 0 77%, var(--luz-85) 0 82%, var(--luz-20) 0 95%, var(--luz-85) 0 100%), 
			repeating-conic-gradient(from 90deg at 12% 5%, var(--sp1) 0% 25%, #fff0 0% 100%) 12% 5%, 
			repeating-conic-gradient(from 90deg at 12% 3%, var(--sp3) 0% 25%, #fff0 0% 100%) 11% 6%;
		background-color: var( --luz-85);
		background-size: 20% 10%, 20% 10%, 15% 6%, 15% 6%, 15% 6%, 15% 6%, 15% 10%, 18% 9%, 100% 100%, 100% 100%, 35% 17.25%, 35% 17.25%;
	}
	> .side:nth-of-type(7) {
    background-color:  var(--luz-50);
	}
	>.side:nth-of-type(8) {
			background-color: var(--luz-65);
	}
	.cuboid.hole {
    transform: translate3d(1vmin, -9.1vmin, -2.5vmin) rotateX(-90deg);
	}
} /*** end .type-3 ***/










/*** TYPE 2-3 ***/

.type-2.type-3 {
  --height: 10;
  --width: 3;
  --depth: 5;
  transform: translate3d(4.91vmin, -9.975vmin, 7vmin) rotate(90deg);
	> .side:nth-of-type(1) {
		transform: translate3d(-50%, -50%, calc(var(--depth) * 0.5vmin)) translate3d(0, calc(var(--width) / 1.9 * -1vmin), 0);
		height: calc(100% / 1.45);
		background: var(--w1) 15% 28%, var(--w4) -24% 20%, var(--w3) -30% 0%, var(--w2) 65% 3%, var(--w1) 60% 96%, var(--w4) -35% 99%;
		background-size: 45% 15%;
		background-color: var(--luz-85);
	}
	> .side:nth-of-type(4) {
		clip-path: polygon(0% 0, 100% 0, 100% 67%, 74% 100%, 0 100%, 0 33%);
		background-color: var(--luz-80);
	}
	> .side:nth-of-type(5) {
		height: 100%;
		transform: translate(-50%, -50%) rotateX(0deg) rotateY(0deg) translate3d(0, 0, calc(var(--height) * -0.25vmin));
		background-color: var(--luz-25);
	}
	> .side:nth-of-type(6) {
		height: calc(var(--depth) * 0.75vmin );
		transform: translate(-50%, -50%) rotateX( -90deg ) translate3d(0vmin, 0.65vmin, calc(var(--height) * 0.5vmin));
		background-color: var(--luz-60);
	}
	> .side:nth-of-type(7) {
		height: calc(100% - var( --width) * 2.15vmin);
		transform-origin: center top;
		transform: translate3d(-50%, -50%, calc(var(--depth) * 0.5vmin)) translate3d(0, 3.5vmin, 0vmin) rotateX(-22deg);
		background: var(--w1) 10% 5%, var(--w2) 65% 7%;
		background-color: var( --luz-75);
		background-size: 50% 25%;
	}
	> .side:nth-of-type(8) {
		height: calc(var(--depth) * 1vmin );
		transform: translate(-50%, -50%) rotateX( -90deg ) translate3d(0vmin, -2.5vmin, calc(var(--height) * -0.25vmin));
		background-color: var(--luz-40);
	}
} /*** end .type2.type-3 ***/









/* Module 3 */
.mod-3 {
	.module {
		.side:nth-child(5) {
			background: 
			var(--w1) 36% 84%, var(--w2) 36% 94%, 
			var(--w3) 16% 83%, var(--w4) 16% 94%, 
			conic-gradient(from 90deg at 0% 0%, var(--luz-25) 0% 25%, #fff0 0% 100%) 88% 88% no-repeat, 
			conic-gradient(from 90deg at 0% 0%, var(--luz-30) 0% 25%, #fff0 0% 100%) 89% 89% no-repeat, 
			conic-gradient(from 90deg at 0% 0%, var(--luz-25) 0% 25%, #fff0 0% 100%) 67% 93% no-repeat, 
			conic-gradient(from 90deg at 0% 0%, var(--luz-30) 0% 25%, #fff0 0% 100%) 67% 95% no-repeat, 
			conic-gradient(from 90deg at 0% 0%, var(--luz-35) 0% 25%, #fff0 0% 100%) 10% 69% no-repeat, 
			conic-gradient(from 90deg at 0% 0%, var(--luz-35) 0% 25%, #fff0 0% 100%) 27% 69% no-repeat, 
			conic-gradient(from 90deg at 0% 0%, var(--luz-35) 0% 25%, #fff0 0% 100%) 42% 69% no-repeat, 
			conic-gradient(from 90deg at 0% 0%, var(--luz-35) 0% 25%, #fff0 0% 100%) 58% 69% no-repeat, 
			conic-gradient(from 90deg at 0% 0%, var(--luz-35) 0% 25%, #fff0 0% 100%) 73% 69% no-repeat, 
			conic-gradient(from 90deg at 0% 0%, var(--luz-35) 0% 25%, #fff0 0% 100%) 90% 69% no-repeat;
			background-size: 15% 7.5%, 15% 7.5%, 15% 7.5%, 15% 7.5% , 13% 10%, 15% 13%, 13% 16%, 17% 19%, 13.5% 10%, 13% 10%, 12.5% 10%, 12.5% 10%, 12.5% 10%, 13.5% 10%;
			background-color: var(--luz-25);
		}
	}
	.type-1.type-3 {
		> .side:nth-child(1) { /* > */
			clip-path: polygon(0% 0%, 0% 100%, 0 100%, 0 27.5%, 100% 27.5%, 100% 52.5%, 0 52.5%, 0 100%, 100% 100%, 100% 0%);
			border-color: var(--luz-35) #fff0 #fff0 #fff0;
			background: 
			conic-gradient(from 90deg at 0% 0%, var(--luz-85) 0% 25%, #fff0 0% 100%) no-repeat, var(--dot-spb), 
			conic-gradient(from 90deg at 0% 0%, var(--sp4) 0% 25%, #fff0 0% 100%) no-repeat, var(--dot-spb), 
			var(--w1), var(--w3), var(--w1), var(--w1), var(--w3), var(--w3), 
			conic-gradient(from 90deg at 0% 0%, var(--sp4) 0% 25%, #fff0 0% 100%) no-repeat, 
			conic-gradient(from 90deg at 0% 0%, var(--sp4) 0% 25%, #fff0 0% 100%) no-repeat, 
			var(--luz-80);
			background-size: 90% 8%, 15% 18%, 15% 18%, 15% 18%, 21% 7%, 21% 7%, 21% 7%, 21% 7%, 21% 7%, 21% 7%, 29% 6%, 29% 6%;
			background-position: 110% 93%, 90% 6%, 50% 6%, 10% 6%, 72% 100%, 20% 100%, 90% 83%, 32% 83%, 58% 83%, 1% 83%, 77% 75%, 12% 75%;
		}
		> .side:nth-of-type(6) {
			background: 
			conic-gradient(from 90deg at 0% 0%, var(--luz-55) 0 25%, #fff0 0 100%) 24% 26% no-repeat,
			conic-gradient(from 90deg at 0% 0%, var(--luz-50) 0 25%, #fff0 0 100%) 10% 26% no-repeat, 
			conic-gradient(from 90deg at 0% 0%, var(--luz-85) 0 25%, #fff0 0 100%) 30% 25% no-repeat, 
			conic-gradient(from 90deg at 0% 0%, var(--luz-85) 0 25%, #fff0 0 100%) 100% 70% no-repeat, 
			conic-gradient(from 90deg at 0% 0%, var(--luz-85) 0 25%, #fff0 0 100%) 100% 38% no-repeat, 
			var(--dot-spb) 100% 100%, 
			linear-gradient(180deg, var(--luz-85) 0 23.4%, #fff0 0 91.5%, var(--luz-85) 0 100%), 
			linear-gradient(90deg, var(--luz-85) 0 10%, #fff0 0 77%, var(--luz-85) 0 82%, var(--luz-20) 0 95%, var(--luz-85) 0 100%), 
			repeating-conic-gradient(from 90deg at 15% 2%, var(--sp1) 0% 25%, #fff0 0% 100%) 12% 5%,
			repeating-conic-gradient(from 90deg at 15% 4%, var(--sp2) 0% 25%, #fff0 0% 100%) 11% 6%;
			background-color: var( --luz-85);
			background-size: 11% 15%, 11% 15%, 70% 20%, 20% 10%, 20% 10%, 18% 9%, 100% 100%, 100% 100%, 35% 17.75%, 35% 17.75%;
			&:before {
				content: "";
				position: absolute;
				background: linear-gradient(0deg, var(--luz-85) 0 40%, var(--luz-20) 0 100%);
				width: 13%;
				height: 25%;
				left: 82%;
				top: 60%;
			} 
		}
		.window {
			transform: rotateX(-90deg) translate3d(1.5vmin, -6.5vmin, -8vmin);
		}
	}
	.type-2.type-3 > .side:nth-of-type(4) {
    background: var(--w1), var(--w2),var(--w3), var(--w4), var(--luz-80);
    background-size: 30% 13%, 30% 13%, 30% 13%, 30% 13%;
    background-position: 90% 64%, 90% 40%, 70% 23%, 70% 81%;
	}
}











/*** GROUPS ***/

.group {
	transform-origin: center top;
	width: 10vmin;
	height: 50%;
	position: absolute;
	top: 50%;
	left: calc(50% - 5vmin);
}

@for $g from 1 through 12 {
	.mod-#{$g} {
			transform: rotate(($g) * 30deg);
	}
	.cyl-#{$g} {
			transform: rotate(($g) * 30 - 15deg);
	}
}











/*** CUBOID ***/

.cuboid {
	height: calc(var(--height) * 1vmin);
	width: calc(var(--width) * 1vmin);
	.side {
		position: absolute;
		top: 50%;
		left: 50%;
		height: 100%;
		width: 100%;
	}
	.side:nth-of-type(1) {
		transform: translate3d(-50%, -50%, calc(var(--depth) * 0.5vmin));
		background-color: var(--luz-80);
	}
	.side:nth-of-type(2) {
		transform: translate3d(-50%, -50%, calc(var(--depth) * -0.5vmin)) rotateY(180deg);
		background-color: var(--luz-25);
	}
	.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: var(--luz-40);
	}
	.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: var(--luz-60);
	}
	.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: var(--luz-70);
	}
	.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: hsl(var(--hue),var(--sat),32.5%);
	}

} /*** end .cuboid ***/











/*** CYLINDER ***/

.cylinders {
	width: 80%;
	height: 80%;
	border-radius: 100%;
	position: absolute;
	left: 10%;
	top: 10%;
	.group {
    padding-left: 3.5vmin;
    box-sizing: border-box;
	}
}

.cylinder {
	--height: 3;
	--width: 3;
	--depth: 4;
	height: calc(var(--height) * 1vmin);
	width: calc(var(--width) * 1vmin);
	position: absolute;
	bottom: 0;
	.side {
		position: absolute;
		top: 50%;
		left: 50%;
		height: 100%;
		width: 100%;
	}
	.side: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: radial-gradient(var(--luz-75) 0 35%, #fff0 45% 100%), conic-gradient(from 180deg at 50% 50%, var(--luz-60), #fff0, var(--luz-60) ), var(--luz-90);
	}
	.side: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: radial-gradient(var(--luz-35) 0 35%, #fff0 45% 100%), conic-gradient(from 180deg at 50% 50%, var(--luz-35), var(--luz-60), var(--luz-35) ), var(--luz-85);
	}
	.side: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-color: var(--luz-45);
	}
	.side: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-color: var(--luz-50);
	}
	.side: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-color: var(--luz-80);
	}
	.side: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-color: var(--luz-35);
	}
	.side: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-color: var(--luz-40);
	}
	.side: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-color: var(--luz-45);
	}
	.side: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-color: var(--luz-70);
	}
	.side: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-color: var(--luz-75);
	}
	+ .cylinder {
		--height: 3;
		--width: 3;
		--depth: 4;
		transform: rotateX(-90deg) rotateY(180deg);
		.side:nth-of-type(3), 
		.side:nth-of-type(4) {
			background: hsl(var(--hue),var(--sat),67.5%);
		}
		.side:nth-of-type(7), 
		.side:nth-of-type(8) {
			background: hsl(var(--hue),var(--sat),38.5%);
		}
	}
	+ .cylinder.port {
		--depth: 5;
		transform: rotateX(-90deg) rotateY(180deg) translateZ(-0.5vmin);
	}
	
} /*** end .cylinder ***/







/*** Exterior cylinders ***/
.cylinders {
	.cylinder:nth-child(1) {
		.side:nth-child(1) {
			background: 
				conic-gradient(from 90deg at 0% 0%, var(--luz-40) 0% 25%, #fff0 0% 100%) 50% 50% no-repeat, 
				conic-gradient(from 90deg at 0% 0%, var(--luz-30) 0% 25%, #fff0 0% 100%) 50% 50% no-repeat, 
				var(--luz-85);
			background-size: 28% 66%, 34% 60%, 100% 100%;
		}
		.side:nth-child(2) {
			background: 
				conic-gradient(from 90deg at 0% 0%, var(--luz-40) 0% 25%, #fff0 0% 100%) 50% 50% no-repeat, 
				conic-gradient(from 90deg at 0% 0%, var(--luz-30) 0% 25%, #fff0 0% 100%) 50% 50% no-repeat,  
				var(--luz-35);
			background-size: 28% 60%, 35% 66%, 100% 100%;
		}
	}
	.cylinder:nth-child(2) {
		.side:nth-child(1) {
			background: 
				radial-gradient(var(--luz-85) 0 30%, #fff0 35% 45%, var(--luz-85) 50% 100%  ),
				conic-gradient(
					 from 0deg at 50% 50%,
					 var(--luz-25) 0 42deg, #fff0 0 72deg,
					 var(--luz-25) 0 114deg, #fff0 0 144deg,
					 var(--luz-25) 0 186deg, #fff0 0 216deg,
					 var(--luz-25) 0 258deg, #fff0 0 288deg,
					 var(--luz-25) 0 330deg, #fff0 0 360deg
					) 0% 0% no-repeat,
				var(--luz-80);
		}
		.side:nth-child(2) {
    	background: 
        radial-gradient(var(--luz-45) 0 30%, #fff0 35% 45%, var(--luz-45) 50% 100%  ),
        conic-gradient(
         	from 0deg at 50% 50%,
         	var(--luz-25) 0 42deg, #fff0 0 72deg,
         	var(--luz-25) 0 114deg, #fff0 0 144deg,
         	var(--luz-25) 0 186deg, #fff0 0 216deg,
         	var(--luz-25) 0 258deg, #fff0 0 288deg,
         	var(--luz-25) 0 330deg, #fff0 0 360deg
        ) 0% 0% no-repeat,
        var(--luz-40);
		}
		.side:nth-child(2).ring {
			background: 
				radial-gradient(var(--luz-35) 0 20%, #fff0 30% 45%, var(--luz-25) 50% 60%, #fff0 65% 100%), 
				conic-gradient(from 180deg at 50% 50%, var(--luz-35) , var(--luz-60),  var(--luz-35) ),  var(--luz-85);
		}
	}
}







/*** CHAINS ***/

.chains {
	width: 79%;
	height: 79%;
	border-radius: 100%;
	position: absolute;
	left: 10.5%;
	top: 10.5%;
	.group {
		padding-left: 2.5vmin;
		box-sizing: border-box;
	}
}

.chain {
	--height: 2; 
	--width: 5; 
	--depth: 2; 
	bottom: 0;
  position: absolute;
	.group:nth-child(odd) .cuboid {
		transform: rotate(-10deg)
	}
	.group:nth-child(even) .cuboid {
		transform: rotate(10deg)
	}
}

//@for $c from 0 through 23 {
		//@if $c % 2 == 0 {
			//.cha-#{$c + 1} {
				//transform: rotate(($c) * 30 + 12deg);
				//color: red;
			//}
		//}
//}

.cha-1 {
    transform: rotate(12deg);
}
.cha-2 {
    transform: rotate(18deg);
}
.cha-3 {
    transform: rotate(42deg);
}
.cha-4 {
    transform: rotate(48deg);
}
.cha-5 {
    transform: rotate(72deg);
}
.cha-6 {
    transform: rotate(78deg);
}
.cha-7 {
    transform: rotate(102deg);
}
.cha-8 {
    transform: rotate(108deg);
}
.cha-9 {
    transform: rotate(132deg);
}
.cha-10 {
    transform: rotate(138deg);
}
.cha-11 {
    transform: rotate(162deg);
}
.cha-12 {
    transform: rotate(168deg);
}

.cha-13 {
    transform: rotate(192deg);
}
.cha-14 {
    transform: rotate(198deg);
}
.cha-15 {
    transform: rotate(222deg);
}
.cha-16 {
    transform: rotate(228deg);
}
.cha-17 {
    transform: rotate(252deg);
}
.cha-18 {
    transform: rotate(258deg);
}
.cha-19 {
    transform: rotate(282deg);
}
.cha-20 {
    transform: rotate(288deg);
}
.cha-21 {
    transform: rotate(312deg);
}
.cha-22 {
    transform: rotate(318deg);
}
.cha-23 {
    transform: rotate(342deg);
}
.cha-24 {
    transform: rotate(348deg);
}















/*** HATCHS ***/

.hatch {
	width: 100%;
	height: 100%;
	position: absolute;
	transform: translateZ(-3vmin) translateX(0.05vmin);
	border-radius: 100%;
	span {
		width: 100%;
		height: 100%;
		position: absolute;
		+ span {
    	transform: rotate(120deg);
			+ span {
    		transform: rotate(240deg);
			}
		}
		&:before {
			content: "";
			border: 0.5vmin solid #fff0;
			border-top: 0.85vmin solid var(--luz-20);
			position: absolute;
			transform: rotateX(-45deg) translate3d(0.95vmin, 0vmin, 0.35vmin);
			transform-style: preserve-3d;
			transform-origin: center top;
			border-radius: 2px;
			width: 0.25vmin;
		}
		&:after {
			width: 0.75vmin;
			border-right: 0.25vmin solid var(--luz-50);
			border-left: 0.25vmin solid var(--luz-50);
			height: 0.35vmin;
			position: absolute;
			content: "";
			transform: rotateX(-90deg) translate3d(0vmin, -0.35vmin, 0.2vmin);
			top: -0.15vmin;
			left: 1.25vmin;
			box-sizing: border-box;
		}
	}
}










/*** LOWER HOLES ***/

.cuboid.hole {
	--height: 8;
	--width: 8;
	--depth: 4;
	transform: translate3d(1vmin, -1vmin, -5.5vmin);
	position: absolute;
	bottom: 0;
	.side:nth-of-type(1) {
		background: #131313 !important;
		clip-path: none !important;
		height: 100%;
		width: 100%;
	}
	.side:nth-of-type(2) {
		display: none;
	}
	.side:nth-of-type(3),
	.side:nth-of-type(4) {
		clip-path: none;
		background: var(--luz-20) !important;
	}
	.side:nth-of-type(5) {
		background: var(--luz-10) !important;
		clip-path: none !important;
	}
	.side:nth-of-type(6) {
		background: var(--luz-10) !important;
	}
}








.window + .cuboid.hole > .side:nth-child(2),
.type-1.type-3 .cuboid.hole > .side:nth-child(2) {
    display: block;
    background: var(--luz-30);
    clip-path: polygon(10% 1%, 90% 1%, 99% 11%, 99% 35%, 1% 35%, 1% 10%);
    overflow: visible;
}

.window + .cuboid.hole > span,
.type-1.type-3 .cuboid.hole > span  {
    background: var(--luz-25);
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    transform: rotateX(90deg) translate3d(0vmin, 2vmin, -1.5vmin);
}

.window + .cuboid.hole > span:before,
.type-1.type-3 .cuboid.hole > span:before {
    content: "";
    background: var(--luz-30);
    clip-path: polygon(10% 1%, 90% 1%, 99% 11%, 99% 35%, 1% 35%, 1% 10%);
    width: 100%;
    height: 100%;
    position: absolute;
    transform: rotateX(-90deg) translate3d(0vmin, 1.2vmin, -4.01vmin);
}

.window + .cuboid.hole > span:after,
.type-1.type-3 .cuboid.hole > span:after {
    content: "";
    background: var(--luz-25);
    width: 100%;
    height: 100%;
    position: absolute;
    transform: rotateX(0deg) translate3d(0vmin, 0, 2.8vmin);
}








/*** NOZZLES ***/

.nozzle {
	border-radius: 100%;
	width: 35%;
	height: 35%;
	box-sizing: border-box;
	position: absolute;
	left: 10%;
	top: 50%;
	background: #111;
	transform: translateZ(1.9vmin);
	+ .nozzle {
    left: inherit;
		right: 10%;
		+ .nozzle {
    	left: 32%;
    	top: 11%;
		}
	}
	span {
		position: absolute;
		width: 102%;
		height: 102%;
		border-radius: 100%;
		box-sizing: border-box;
		background: radial-gradient(#fff0 50%, #111 55%, var(--luz-40) 60% 100%);
		left: -1%;
		top: -1%;
		transform: translateZ(-0.3vmin);
		border: 1px solid #101010;
		&:before, &:after {
			content: "";
			width: 100%;
			height: 100%;
			position: absolute;
			background: radial-gradient(#fff0 50%, #111 55%, var(--luz-40) 60% 100%);
			border-radius: 100%;
			transform: translateZ(0.1vmin);
			border: 1px solid #333;
			transition: all 0.5s ease 0s;
		}
		&:after {
    	transform: translateZ(-0.1vmin);
		}
	}
	div, &:before, &:after {
    width: 80%;
    height: 200%;
    background: radial-gradient(#c2ecff 40%, #dcf4ff 55%, #dbf4ff 60% 100%);
    box-shadow: 0 0 0.5vmin 0.5vmin #d7ebfb;
    border-color: #dcf4ff;
    opacity: 0;
    transition: all 0.5s ease 0s;
    transform: translate3d(0.25vmin, -1.25vmin, 5vmin) rotateX(90deg) rotateY(210deg);
    border-radius: 50%;
    position: absolute;
	}
	&:before {
		content: "";
    transform: translate3d(0.25vmin, -1.25vmin, 5vmin) rotateX(90deg) rotateY(90deg);
		position: absolute;
	}
	&:after {
		content: "";
    transform: translate3d(0.25vmin, -1.25vmin, 5vmin) rotateX(90deg) rotateY(320deg);
	}
	
} /*** end .nozzle ***/







/*** nozzle childs ***/
@for $n from 2 through 15 {
	$s : $n * 2 + 100 * 1%;
	$p : $n * -1%;
	$t : $n * -0.3vmin;
	.nozzle span:nth-child(#{$n}) {
		width: ($s);
		height: ($s);
		left: ($p);
		top: ($p);
		transform: translateZ(($t));
		color: red;
	}
}





 



/*** ENGINES ON ***/
.cam {
	&:active {
		~ .content {
			.nozzle {
				span {
					&:nth-child(13):before,
					&:nth-child(13):after,
					&:nth-child(14):before,
					&:nth-child(14):after,
					&:nth-child(15):before,
					&:nth-child(15):after{
						background: #dcf4ff;
						box-shadow: 0 0 0.5vmin 0.5vmin #d7ebfb;
						border-color: #dcf4ff;
						opacity: 0.5;
						transition: all 0.5s ease 0s;
						transform:translatez(-0.5vmin);
					}
				}
				div, &:before, &:after {
					transform: translate3d(0.25vmin, -1.25vmin, -5vmin) rotateX(90deg) rotateY(210deg);
					animation: vibration 0.2s linear 0s infinite;
					opacity: 0.75;
				}
				&:before {
					transform: translate3d(0.25vmin, -1.25vmin, -5vmin) rotateX(90deg) rotateY(90deg);
					animation: vibration 0.2s linear 0s infinite;
					position: absolute;
				}
				&:after {
					transform: translate3d(0.25vmin, -1.25vmin, -5vmin) rotateX(90deg) rotateY(320deg);
					animation: vibration 0.2s linear 0s infinite;
				}
			}
		}
	}
}
	

@keyframes vibration {
	  0% { top: 0; left: 0;      }
	 25% { top: 1px; left: 0;    }
	 50% { top: 0px; left: -1px; }
	 75% { top: 0px; left: 1px;  }
	100% { top: -1px; left: 0;   }
}













/*** RADIUS ***/

.radius {
	width: 66%;
	height: 66%;
	border-radius: 100%;
	position: absolute;
	left: 17%;
	top: 17%;
	.group {
		padding-left: 3.25vmin;
		box-sizing: border-box;
		transform: rotate(270deg);
	}
	.cylinder {
		transform: rotateX(90deg) translate3d(0, 0, 19.5vmin) rotateZ(180deg);
		--height: 3;
		--width: 3;
		--depth: 44;
		+ .cylinder {
			--height: 5;
			--width: 5;
			--depth: 7;
			transform: rotateX(90deg) rotateZ(180deg) translate3d(1vmin, 0vmin, 0.5vmin);
		}
		&:nth-child(1) {
			.hatch {
				transform: translateZ(22.5vmin) translateX(0.05vmin) rotateX(180deg);
			}
		}
		&:nth-child(3) {
			transform: rotateX(90deg) rotateZ(180deg) translate3d(1vmin, 0vmin, 10vmin);
		}
		&:nth-child(4) {
  		transform: rotateX(90deg) rotateZ(180deg) translate3d(1vmin, 0vmin, 19.5vmin);
		}
		&:nth-child(5) {
			transform: rotateX(90deg) rotateZ(180deg) translate3d(1vmin, 0vmin, 35vmin);
		}
		&:nth-child(6) {
  		transform: rotateX(90deg) rotateZ(180deg) translate3d(1vmin, 0vmin, 27.25vmin);
  		--depth: 4;
		}
		&:nth-child(7) {
			transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translate3d(0vmin, -28.25vmin, 0vmin);
			--height: 3;
			--width: 3;
			--depth: 18;
			.hatch {
				transform: translateZ(9.5vmin) translateX(0.05vmin) rotateX(180deg);
				+ .hatch {
					transform: translateZ(-9.5vmin) translateX(0.05vmin);
				}
			}
		}
		&:nth-child(8) {
			transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translate3d(0vmin, -27.25vmin, 4.5vmin);
			--depth: 4;
		}
		&:nth-child(9) {
			transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translate3d(0vmin, -27.25vmin, -6.5vmin);
			--depth: 4;
		}
		&:nth-child(10) {
			transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(0vmin, -28.25vmin, -3.75vmin);
			--height: 3;
			--width: 3;
			--depth: 27.5;
			.hatch {
				transform: translateZ(14.15vmin) translateX(0.05vmin) rotateX(180deg);
				+ .hatch {
					transform: translateZ(-14.15vmin) translateX(0.05vmin);
				}
			}
		}
		&:nth-child(11) {
			transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(-1vmin, -27.25vmin, 6.5vmin);
			--depth: 4;
		}
		&:nth-child(12) {
			transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(-1vmin, -27.25vmin, -10vmin);
			--depth: 12;
		}
		&:nth-child(17) {
			.hatch {
				transform: translateZ(0.85vmin) translateX(0.05vmin) rotateX(180deg) scale3d(0.75,0.75,0.75);
				width: 115%;
				height: 115%;
				top: -5%;
				left: -7.5%;
			}
		}
		&:nth-child(18) {
			.hatch {
				transform: translateZ(0.85vmin) translateX(0.05vmin) rotateX(180deg) scale3d(0.75,0.75,0.75);
				width: 115%;
				height: 115%;
				top: -5%;
				left: -7.5%;
			}
		}
		/*** Ranger Ports ***/
		~ .cuboid.chain {
			transform: translate3d(0.25vmin, -21.9vmin, 2vmin) rotateY(0) rotateX(-190deg);
			--width: 2.4;
			--height: 2.4;
			--depth: 5;
			.side:nth-child(3) {
				background: hsl(var(--hue), var(--sat), 67.5%);
			}
			+ .cylinder {
				--depth: 1;
				transform: translate3d(0.25vmin, -34.95vmin, 6.85vmin) rotateX(-15deg);
				--width: 2.4;
				--height: 2.4;
				+ .cylinder {
					--depth: 1;
					transform: translate3d(0.25vmin, -22.3vmin, 6.85vmin) rotateX(15deg);
					--width: 2.4;
					--height: 2.4;
				}
			}
		}
		+ .cuboid.chain {
			+ .cuboid.chain {
				transform: translate3d(0.25vmin, -35.25vmin, 2vmin) rotateY(0deg) rotateX(10deg);
				+ .cuboid.chain {
					transform: translate3d(0.25vmin, -21.76vmin, 5.15vmin) rotateY(0deg) rotatex(-165deg);
					--depth: 2.5;
					.side:nth-child(2) {
						background: var(--luz-80);
					}
					+ .cuboid.chain {
						transform: translate3d(0.25vmin, -35.4vmin, 5.15vmin) rotateY(0deg) rotatex(-15deg);
						--depth: 2.5;
					}
				}
			}
		}
		.side.ring {
			background: 
				radial-gradient(var(--luz-75) 0 45%, var(--luz-40) 50% 60% , #fff0 65% 100%), 
				conic-gradient(from 180deg at 50% 50%, var(--luz-60) , #fff0, var(--luz-60) ), var(--luz-90);
		}
		.side.ring-dark {
    	background: 
				radial-gradient(var(--luz-35) 0 45%, var(--luz-25) 50% 60% , #fff0 65% 100%), 
				conic-gradient(from 180deg at 50% 50%, var(--luz-25) , var(--luz-60), var(--luz-25) ), var(--luz-85);
		}
	} /*** end .cylinder ***/
	
}/*** end .radius ***/







/********************************/
/*** A CHAOS OF DRAWINGS HERE ***/
/********************************/


/*** WINDOWS HOLES ***/

.group.mod-1 .module .side:nth-child(5),
.group.mod-7 .module .side:nth-child(5) {
	clip-path: polygon(0% 0%, 0 90%, 15% 100%, 15% 10%, 85% 10%, 85% 35%, 15% 35%, 15% 100%, 85% 100%, 100% 90%, 100% 0%);
    background: 
		conic-gradient(from 90deg at 48% 75%, var(--luz-85) 0% 25%, #fff0 0% 100%) no-repeat, 
		var(--dot-spb), 
		var(--dot-spb), 
		conic-gradient(from 90deg at 48% 75%, var(--luz-75) 0% 25%, #fff0 0% 100%) no-repeat, 
		conic-gradient(from 90deg at 48% 75%, var(--luz-75) 0% 25%, #fff0 0% 100%) no-repeat, 
		conic-gradient(from 90deg at 48% 75%, var(--sp4) 0% 25%, #fff0 0% 100%) no-repeat, 
		conic-gradient(from 90deg at 48% 75%, var(--sp4) 0% 25%, #fff0 0% 100%) no-repeat, 
		conic-gradient(from 90deg at 48% 75%, var(--sp0) 0% 25%, #fff0 0% 100%) no-repeat, 
		var(--luz-80);
    background-size: 46% 70%, 7% 3% , 7% 3%, 30% 25%, 30% 25%, 16% 70%, 18% 52%, 18% 52%;
    background-position: 4% 68%, 67% 76% , 67% 83%, 65% 80%, 65% 71%, 8% 68%, 84% 46%, 84% 76%;
}


.group.mod-5 .module .side:nth-child(5),
.group.mod-11 .module .side:nth-child(5) {
    clip-path: polygon(0% 0%, 0 90%, 15% 100%, 15% 10%, 85% 10%, 85% 35%, 15% 35%, 15% 100%, 85% 100%, 100% 90%, 100% 0%);
    background: 
		conic-gradient(from 90deg at 48% 75%, var(--sp4) 0% 25%, #fff0 0% 100%) no-repeat, var(--dot-spb), 
		var(--dot-spb), 
		conic-gradient(from 90deg at 48% 75%, var(--luz-75) 0% 25%, #fff0 0% 100%) no-repeat, 
		conic-gradient(from 90deg at 48% 75%, var(--luz-75) 0% 25%, #fff0 0% 100%) no-repeat, 
		conic-gradient(from 90deg at 48% 75%, var(--luz-85) 0% 25%, #fff0 0% 100%) no-repeat, 
		conic-gradient(from 90deg at 48% 75%, var(--luz-85) 0% 25%, #fff0 0% 100%) no-repeat, 
		conic-gradient(from 90deg at 48% 75%, var(--sp4) 0% 25%, #fff0 0% 100%) no-repeat, 
		var(--luz-80);
    background-size: 46% 70%, 7% 3% , 7% 3%, 30% 25%, 30% 25%, 16% 70%, 18% 52%, 18% 52%;
    background-position: 4% 68%, 67% 76% , 67% 83%, 65% 80%, 65% 71%, 8% 68%, 84% 46%, 84% 76%;
}


.group.mod-9 .module > .side:nth-child(1),
.group.mod-6 .module > .side:nth-child(5),
.group.mod-12 .module > .side:nth-child(5) {
	clip-path: polygon(0% 0%, 0 90%, 15% 100%, 15% 35%, 85% 35%, 85% 60%, 15% 60%, 15% 100%, 85% 100%, 100% 90%, 100% 0%);
    background: 
		var(--dot-spb), 
		var(--dot-spb), 
		var(--dot-spb), 
		conic-gradient(from 90deg at 0% 0%, var(--luz-80) 0% 25%, #fff0 0% 100%) no-repeat, 
		conic-gradient(from 90deg at 0% 0%, var(--luz-75) 0% 25%, #fff0 0% 100%) no-repeat, 
		var(--dot-spb), 
		var(--dot-spb), 
		var(--dot-spb), 
		conic-gradient(from 90deg at 0% 0%, var(--luz-80) 0% 25%, #fff0 0% 100%) no-repeat, 
		conic-gradient(from 90deg at 0% 0%, var(--luz-75) 0% 25%, #fff0 0% 100%) no-repeat, 
		var(--luz-80);
    background-size: 12% 5%, 12% 5%, 12% 5%, 15% 21%, 19% 24%, 12% 5%, 12% 5%, 12% 5%, 15% 21%, 19% 24%;
    background-position: 50% 23%, 50% 16%, 50% 9%, 51% 10%, 51% 8%, 50% 88%, 50% 82%, 50% 75%, 51% 88%, 51% 89%;
}

.group.mod-9 .module > .side:nth-child(1) {
    background-size: 12% 5%, 12% 7%, 12% 5%, 18% 22%, 21% 24%, 12% 5%, 12% 7%, 12% 5%, 18% 22%, 21% 24%;
    background-position: 51% 23%, 51% 15%, 51% 9%, 50% 9%, 50% 8%, 51% 88%, 51% 81.5%, 51% 74%, 50% 88%, 50% 89%;
	clip-path: none;
}


/*** Underside ***/

.group.mod-1 .module > .side:nth-child(2),
.group.mod-3 .module .side:nth-child(5),
.group.mod-5 .module > .side:nth-child(2),
.group.mod-6 .module > .side:nth-child(2),
.group.mod-7 .module > .side:nth-child(2),
.group.mod-9 .module .side:nth-child(5),
.group.mod-11 .module > .side:nth-child(2),
.group.mod-12 .module > .side:nth-child(2) {
	--w1: conic-gradient(from 180deg at 50% 50%, #fff0 0%, var(--luz-10) 1% 32%, #fff0 33%) no-repeat;
  --w2: conic-gradient(from 245deg at 50% 50%, #fff0 0%, var(--luz-10) 1% 32%, #fff0 33%) no-repeat;
	--w3: conic-gradient(from 65deg at 50% 50%, #fff0 0%, var(--luz-10) 1% 32%, #fff0 33%) no-repeat;
  --w4: conic-gradient(from 0deg at 50% 50%, #fff0 0%, var(--luz-10) 1% 32%, #fff0 33%) no-repeat;
  --w5: conic-gradient(from 0deg at 50% 50%, #fff0 0%, var(--luz-10) 0% 25%, #fff0 0 100%) no-repeat;
}

.group.mod-1 .module > .side:nth-child(2), 
.group.mod-5 .module > .side:nth-child(2), 
.group.mod-6 .module > .side:nth-child(2), 
.group.mod-7 .module > .side:nth-child(2),
.group.mod-11 .module > .side:nth-child(2), 
.group.mod-12 .module > .side:nth-child(2) {
    background: 
        var(--w1) 85% 5%, var(--w5) 76% 15%, var(--w2) 85% 21%, 
        var(--w3) 15% 5%, var(--w5) 15% 15%, var(--w4) 15% 21%,
        conic-gradient(from 90deg at 0% 0%, var(--luz-20) 0% 25%, #fff0 0% 100%) 5% 7.5%  no-repeat,
        conic-gradient(from 90deg at 0% 0%, var(--luz-35) 0% 25%, #fff0 0% 100%) 94% 7.5%  no-repeat,
        conic-gradient(from 90deg at 0% 0%, var(--luz-40) 0% 25%, #fff0 0% 100%) 51% 7.5%  no-repeat,
        conic-gradient(from 90deg at 0% 0%, var(--luz-35) 0% 25%, #fff0 0% 100%) 10% 31%  no-repeat,
        conic-gradient(from 90deg at 0% 0%, var(--luz-35) 0% 25%, #fff0 0% 100%) 26% 31%  no-repeat,
        conic-gradient(from 90deg at 0% 0%, var(--luz-35) 0% 25%, #fff0 0% 100%) 41% 31%  no-repeat,
        conic-gradient(from 90deg at 0% 0%, var(--luz-35) 0% 25%, #fff0 0% 100%) 57% 31%  no-repeat,
        conic-gradient(from 90deg at 0% 0%, var(--luz-35) 0% 25%, #fff0 0% 100%) 73% 31%  no-repeat,
        conic-gradient(from 90deg at 0% 0%, var(--luz-35) 0% 25%, #fff0 0% 100%) 90% 31%  no-repeat;
    background-color: var(--luz-25);
    background-size:
        15% 7.5%,  15% 7.5%,  15% 7.5%,
        15% 7.5%,  15% 7.5%,  15% 7.5%,
        10% 20%, 10% 20%,
        26% 16%,
        13% 9%, 12.5% 9%, 12.5% 9%, 12.5% 9%, 12.5% 9%, 13% 9%;
}

.group.mod-1 .module > .side:nth-child(2):before, 
.group.mod-7 .module > .side:nth-child(2):before {
    content: "";
    background: var(--luz-15);
    width: 26%;
    height: 16%;
    position: absolute;
    left: 38%;
    top: 6%;
}

.group.mod-1 .module > .side:nth-child(2):after, 
.group.mod-7 .module > .side:nth-child(2):after {
    content: "";
    background: var(--luz-25);
    width: 38%;
    height: 8%;
    position: absolute;
    left: 10%;
    top: 29%;
}

.group.mod-5 .module > .side:nth-child(2):after, 
.group.mod-11 .module > .side:nth-child(2):after {
    content: "";
    background: var(--luz-25);
    width: 24%;
    height: 8%;
    position: absolute;
    left: 51%;
    top: 29%;
}

.group.mod-6 .module > .side:nth-child(2):before, 
.group.mod-12 .module > .side:nth-child(2):before {
    content: "";
    background: var(--luz-30);
    width: 26%;
    height: 16%;
    position: absolute;
    left: 38%;
    top: 6%;
}

.group.mod-6 .module > .side:nth-child(2):after, 
.group.mod-12 .module > .side:nth-child(2):after {
    content: "";
    background: #fff0;
    width: 16%;
    height: 8%;
    position: absolute;
    left: 37%;
    top: 29%;
    border-right: 1.1vmin solid var(--luz-25);
    border-left: 1.1vmin solid var(--luz-25);
}

.group.mod-1 .module > .side:nth-child(2):after, 
.group.mod-5 .module > .side:nth-child(2):after, 
.group.mod-7 .module > .side:nth-child(2):after, 
.group.mod-11 .module > .side:nth-child(2):after {
    box-shadow: 
        6vmin 9.25vmin 0 var(--luz-10), 6vmin 10vmin 0 var(--luz-10),
        2.5vmin 9.25vmin 0 var(--luz-10), 2.5vmin 10vmin 0 var(--luz-10),
        0.5vmin 9.25vmin 0 var(--luz-10), 0.5vmin 10vmin 0 var(--luz-10),
        -1.5vmin 9.25vmin 0 var(--luz-10), -1.5vmin 10vmin 0 var(--luz-10),
        -3.5vmin 9.25vmin 0 var(--luz-10), -3.5vmin 10vmin 0 var(--luz-10),
        -5.5vmin 9.25vmin 0 var(--luz-10), -5.5vmin 10vmin 0 var(--luz-10)
}

.group.mod-9 .module .side:nth-child(5) {
    background: 
		var(--w1) 85% 81%, var(--w5) 77% 91%, var(--w2) 85% 97%, 
		var(--w3) 15% 81%, var(--w5) 15% 91%, var(--w4) 15% 97%, 
		conic-gradient(from 90deg at 0% 0%, var(--luz-25) 0% 25%, #fff0 0% 100%) 50% 93% no-repeat, 
		conic-gradient(from 90deg at 0% 0%, var(--luz-30) 0% 25%, #fff0 0% 100%) 50% 95% no-repeat, 
		conic-gradient(from 90deg at 0% 0%, var(--luz-35) 0% 25%, #fff0 0% 100%) 10% 69% no-repeat, 
		conic-gradient(from 90deg at 0% 0%, var(--luz-35) 0% 25%, #fff0 0% 100%) 27% 69% no-repeat, 
		conic-gradient(from 90deg at 0% 0%, var(--luz-35) 0% 25%, #fff0 0% 100%) 42% 69% no-repeat, 
		conic-gradient(from 90deg at 0% 0%, var(--luz-35) 0% 25%, #fff0 0% 100%) 58% 69% no-repeat, 
		conic-gradient(from 90deg at 0% 0%, var(--luz-35) 0% 25%, #fff0 0% 100%) 73% 69% no-repeat, 
		conic-gradient(from 90deg at 0% 0%, var(--luz-35) 0% 25%, #fff0 0% 100%) 90% 69% no-repeat;
    background-size: 15% 7.5%, 15% 7.5%, 15% 7.5%, 15% 7.5%, 15% 7.5%, 15% 7.5% , 13% 16%, 17% 19%, 13.5% 10%, 13% 10%, 12.5% 10%, 12.5% 10%, 12.5% 10%, 13.5% 10%;
    background-color: var(--luz-25);
}

.group.mod-3 .module > .side:nth-child(5):after,
.group.mod-9 .module > .side:nth-child(5):after {
    content: "";
    background: var(--luz-20);
    width: 3%;
    border-radius: 25%;
    height: 4%;
    position: absolute;
    left: 14%;
    top: 66%;
    box-shadow: 
		1.45vmin 0 0 0 var( --luz-25), 
		2.8vmin 0 0 0 var(--luz-15), 
		4.1vmin 0 0 0 var(--luz-20), 
		5.45vmin 0 0 0 var(--luz-40), 
		6.8vmin 0 0 0 var(--luz-25);
}




/*** Black Panels Underside***/

.group.mod-1 .window + .cuboid.hole > span:before,
.group.mod-1 .window + .cuboid.hole > .side:nth-child(2),
.group.mod-5 .window + .cuboid.hole > span:before,
.group.mod-5 .window + .cuboid.hole > .side:nth-child(2),
.group.mod-7 .window + .cuboid.hole > span:before,
.group.mod-7 .window + .cuboid.hole > .side:nth-child(2),
.group.mod-11 .window + .cuboid.hole > span:before,
.group.mod-11 .window + .cuboid.hole > .side:nth-child(2) {
    background: var(--luz-15);
}

.group.mod-1 .window + .cuboid.hole > span:after,
.group.mod-1 .window + .cuboid.hole > span,
.group.mod-5 .window + .cuboid.hole > span:after,
.group.mod-5 .window + .cuboid.hole > span,
.group.mod-7 .window + .cuboid.hole > span:after,
.group.mod-7 .window + .cuboid.hole > span,
.group.mod-11 .window + .cuboid.hole > span:after,
.group.mod-11 .window + .cuboid.hole > span {
    background: var(--luz-10);
}






/*** FRONT WINDOWS ***/

.window {
	--height: 2;
	--width: 7.1;
	--depth: 4;
	bottom: 0;
	position: absolute;
	transform: translate3d(1.4vmin, -13vmin , -0.3vmin);
	height: calc(var(--height) * 1vmin);
	width: calc(var(--width) * 1vmin);
	.side {
		position: absolute;
		top: 50%;
		left: 50%;
		height: 100%;
		width: 100%;
		border-bottom-color: var(--luz-50);
		&:nth-of-type(1) {
			transform: translate3d( -50%, -50%, calc(var(--depth) * 0.5vmin) ) rotateX(-40deg);
			background: var(--luz-45) !important;
			width: 100%;
			transform-origin: top center;
			clip-path: none !important;
		}
		&:nth-of-type(2) {
			transform: translate3d( -50%, -50%, calc(var(--depth) * -0.5vmin) ) rotateY(180deg) rotateX(-40deg);
			background: var(--luz-85) !important;
			transform-origin: top center;
		}
		&:nth-of-type(3) {
			width: calc(var(--depth) * 1vmin);
			transform: translate(-50%, -50%) rotateY(90deg) translate3d( 0, 0, calc(var(--width) * 0.5vmin) ) rotateX(-40deg);
			background: var(--luz-60);
			transform-origin: top center;
		}
		&:nth-of-type(4) {
			width: calc(var(--depth) * 1vmin);
			transform: translate(-50%, -50%) rotateY(-90deg) translate3d( 0, 0, calc(var(--width) * 0.5vmin) ) rotateX(-40deg);
			background: var(--luz-50);
			transform-origin: top center;
		}
		&:nth-of-type(5) {
			height: calc(var(--depth) * 0.425vmin);
			transform: translate(-50%, -50%) rotateX(-90deg) translate3d( 0, 0, calc(var(--height) * 0.25vmin) );
			background: var(--luz-75) !important;
			clip-path: none !important;
			width: 66%;
			height: calc(var(--depth) * 0.775vmin);
			transform: translate(-50%, -50%) rotateX(-90deg) translate3d( 0, 0, calc(var(--height) * -0.25vmin) );
			background: var(--w5) -5% 20%, var(--w5) -5% 120%, var(--w5) 94% 25%, var(--w5) 94% 120%, var(--w3) 75% 75%, var(--w1) 24% 75%, var(--w5) 77% 25%, var(--w5) 11% 20% !important;
			clip-path: none !important;
			width: 88%;
			background-color: var(--luz-75) !important;
			background-size: 20% 57%, 20% 56%, 20% 52%, 20% 52%, 25% 40%, 25% 40%, 20% 50%, 20% 50% !important;
		}
		
	} /*** end .side ***/
	
} /*** end .window ***/



.group.mod-1 .module .window,
.group.mod-5 .module .window,
.group.mod-7 .module .window,
.group.mod-11 .module .window {
    transform: translate3d(1.4vmin, -13vmin , -4.25vmin);
}






/*** DRAWINGS ON SIDES ***/

.group.mod-1 .module .side:nth-child(1),
.group.mod-5 .module .side:nth-child(1) {
	background: 
		var(--dot-spl) 88% 60%, 
		var(--dot-spl) 10% 60%, 
		var(--w1) 5% 2%, 
		var(--w2) 5% 10%, 
		var(--w3) 80% 1%, 
		var(--w4) 80% 9%, 
		var(--w5) 95% 3%, 
		var(--w5) 95% 10%, 
		linear-gradient( 0deg, var(--luz-15) 0 11%, #fff0 0 75%, var(--luz-85) 0 100%), 
		linear-gradient( 90deg, #fff0 0 8%, var(--sp1) 0 35%, var(--sp3) 0 47.5%, #fff0 0 48.5%, var(--sp2) 0 51.5%, #fff0 0 52.5%, var(--sp3) 0 65%, var(--sp1) 0 92%, #fff0 0 100% );
    background-size: 27% 25%, 27% 25%, 18% 6%, 18% 6%, 18% 6%, 18% 6%, 18% 9%, 18% 9.5%, 100% 100%, 100% 100%, 100% 100%;
    background-color: var( --luz-85);
}

.group.mod-7 .module .side:nth-child(1), 
.group.mod-11 .module .side:nth-child(1) {
    background: 
		var(--dot-spd) 88% 60%, 
		var(--dot-spd) 10% 60%, 
		var(--w1) 5% 2%, 
		var(--w2) 5% 10%, 
		var(--w3) 80% 1%,
		var(--w4) 80% 9%, 
		var(--w5) 95% 3%, 
		var(--w5) 95% 10%, 
		linear-gradient( 0deg, var(--luz-15) 0 11%, #fff0 0 75%, var(--luz-85) 0 100%),
		linear-gradient( 90deg, #fff0 0 8%, var(--sp1) 0 35%, var(--sp3) 0 47.5%, #fff0 0 48.5%, var(--sp4) 0 51.5%, #fff0 0 52.5%, var(--sp3) 0 65%, var(--sp1) 0 92%, #fff0 0 100% );
    background-size: 27% 25%, 27% 25%, 18% 6%, 18% 6%, 18% 6%, 18% 6%, 18% 9%, 18% 9.5%, 100% 100%, 100% 100%, 100% 100%;
    background-color: var( --luz-85);
}

.group.mod-6  .module .side:nth-child(1),
.group.mod-12 .module .side:nth-child(1) {
    background: 
		var(--w1) 5% 2%, var(--w2) 5% 10%, 
		var(--w3) 80% 1%, var(--w4) 80% 9%, 
		var(--w5) 95% 3%, var(--w5) 95% 10%, 
		linear-gradient(180deg, var(--luz-85) 0 23.4%, #fff0 0 91.5%, var(--luz-85) 0 100%), 
		linear-gradient(90deg, var(--luz-85) 0 10%, #fff0 0 90%, var(--luz-85) 0 10%), 
		repeating-conic-gradient(from 90deg at 15% 10%, var(--sp1) 0% 25%, #fff0 0% 100%) 12% 8%,   
		repeating-conic-gradient(from 90deg at 20% 7%, var(--sp3) 0% 25%, #fff0 0% 100%) 12% 8%;
	background-color: var(--luz-85);
    background-size: 18% 6%, 18% 6%, 18% 6%, 18% 6%, 18% 9%, 18% 9.5%, 100% 100%, 100% 100%, 40% 13.75%, 40% 13.75%;
}

.mod-6 .type-1 .side:nth-of-type(7),
.mod-12 .type-1 .side:nth-of-type(7) {	
	background: 
		conic-gradient(from 90deg at 0% 0%, var(--luz-55) 0 25%, #fff0 0 100%) 100% 38% no-repeat, 
		conic-gradient(from 90deg at 0% 0%, var(--luz-55) 0 25%, #fff0 0 100%) 100% 70% no-repeat,
		conic-gradient(from 90deg at 0% 0%, var(--luz-05) 0% 25%, #fff0 0% 100%) 0% 100% no-repeat, 
		conic-gradient(from 90deg at 0% 0%, var(--luz-05) 0% 25%, #fff0 0% 100%) 50% 100% no-repeat, 
		var(--w3) 80% 1.5%, var(--w4) 80% 10%, 
		var(--luz-55);
    background-size: 80% 10%, 80% 10%, 30% 10%, 50% 75%, 60% 6%, 60% 6%;
}

.group.mod-3  .module .side:nth-child(3),
.group.mod-9 .module .side:nth-child(3) {
    background: 
		linear-gradient(-90deg, var(--luz-15) 0 10%, #fff0 0 30%, var(--luz-40) 0 31%,  #fff0 0 51%, var(--luz-40) 0 52%,  #fff0 0 71%, var(--luz-40) 0 72% ), 
		linear-gradient(0deg, #fff0 0 5%, var(--sp6) 0% 25%, #fff0 0 27%, var(--sp7) 0 46%, #fff0 0 48%, var(--sp6) 0 51%, #fff0 0 53%, var(--sp7) 0 71%, #fff0 0 73%, var(--sp6) 0 91%, #fff0 0 30%);
	background-color: var(--luz-40);
}

.group.mod-3  .module .side:nth-child(2),
.group.mod-6  .module .side:nth-child(6),
.group.mod-9  .module .side:nth-child(2),
.group.mod-12 .module .side:nth-child(6) {
	background: 
		repeating-linear-gradient(90deg, #fff0 0 15%, #59595930 0 16%), 
		linear-gradient(90deg, var(--luz-35) 0 5%, #fff0 0 94%, var(--luz-35) 0 100% ), 
		linear-gradient(0deg, var(--luz-35) 0 5%, #fff0 0 87%, var(--luz-35) 0 100% ),
		repeating-conic-gradient(from 90deg at 0% 12%, var(--luz-15) 0% 25%, #fff0 0% 100%);
	background-color: var(--luz-35);
	background-position: -1.15vmin 0, 0 0, 0.5vmin 0.05vmin;
	background-size: 110% 100%, 100% 100%, 100% 100%, 94% 11.9%;
}

.group.mod-2 .module .side:nth-child(3),
.group.mod-4 .module .side:nth-child(3),
.group.mod-8 .module .side:nth-child(3),
.group.mod-10 .module .side:nth-child(3) {
	background: 
		conic-gradient(from 90deg at 45% 35%, var(--sp7) 0% 25%, #fff0 0% 100%) 70% 12.5%  no-repeat,    
		conic-gradient(from 142deg at 76% 35%, var(--sp7) 0% 35.5%, #fff0 0% 100%) 44% -1%  no-repeat,   
		conic-gradient(from 320deg at 20% 95%, var(--sp8) 0% 36%,  #fff0 0% 100%) 35% 86%  no-repeat,  
		linear-gradient(-128deg, var(--luz-35) 0 21.25%, #fff0 0 100%),   
		linear-gradient(52deg, var(--luz-35) 0 21.25%, #fff0 0 100%),  
		linear-gradient(0deg, var(--luz-35) 0 10%, #fff0 0 91%, var(--luz-35) 0 100%),  
		linear-gradient(90deg, var(--luz-35) 0 10%, #fff0 0 90.5%, var(--luz-35) 0 100% ),  
		linear-gradient(0deg, #fff0 0 10%, var(--luz-25) 0 10.75%, #fff4 0 11%, #fff0 0 29%, var(--luz-25) 0 29.5%, #fff4 0 30%, #fff0 0 50%, var(--luz-25) 0 50.5%, #fff4 0 51%, #fff0 0 70%, #fff4 0 70%, var(--luz-25) 0 71.5%, #fff0 0 89.5%, #fff3 0 90.25%, var(--luz-25) 0 90.5%, #fff0 0 100% ),  
		linear-gradient(90deg, #fff0 0 10%, var(--luz-25) 0 10.75%, #fff4 0 10.95%, #fff0 0 49.5%, var(--luz-25) 0 50%, #fff4 0 50.5%, #fff0 0 89.5%, #fff3 0 90.25%, var(--luz-25) 0 91%, #fff0 0 100% ),  linear-gradient(52deg, #fff0 0 21.25%, var(--luz-25) 0 21.85%, #fff4 0 22.15%,  #fff0 0 100% ),   linear-gradient(-128deg, #fff0 0 21.25%, var(--luz-25) 0 21.85%, #fff4 0 22.15%, #fff0 0 100% );
    background-color: var(--luz-35);
    background-size: 5% 75%,  76% 30%, 15% 8%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
}

.group.mod-2 .module .side:nth-child(4),
.group.mod-4 .module .side:nth-child(4),
.group.mod-8 .module .side:nth-child(4),
.group.mod-10 .module .side:nth-child(4) {
	background: 
		conic-gradient(from 90deg at 45% 35%, var(--sp5) 0% 25%, #fff0 0% 100%) 30% 12.5%  no-repeat, 
		conic-gradient(from 90deg at 34% 35%, var(--sp4) 0% 35.5%, #fff0 0% 100%) 10% -1%  no-repeat, 
		conic-gradient(from 270deg at 75% 95%, var(--sp6) 0% 36%,  #fff0 0% 100%) 66% 86%  no-repeat, 
		linear-gradient(128deg, var(--luz-60) 0 21.25%, #fff0 0 100%), 
		linear-gradient(-52deg, var(--luz-60) 0 21.25%, #fff0 0 100%), 
		linear-gradient(0deg, var(--luz-60) 0 10%, #fff0 0 91%, var(--luz-60) 0 100%), 
		linear-gradient(90deg, var(--luz-60) 0 10%, #fff0 0 90.5%, var(--luz-60) 0 100% ),
		linear-gradient(0deg, #fff0 0 10%, var(--luz-55) 0 10.75%, #fff4 0 11.25%, #fff0 0 29%, var(--luz-55) 0 29.5%, #fff4 0 30%, #fff0 0 50%, var(--luz-55) 0 50.5%, #fff4 0 51%, #fff0 0 70%, #fff4 0 70.5%, var(--luz-55) 0 71.5%, #fff0 0 90%, var(--luz-55) 0 90.5%, #fff4 0 91%, #fff0 0 100% ), 
		linear-gradient(90deg, #fff0 0 10%, var(--luz-55) 0 10.75%, #fff4 0 11%, #fff0 0 49.5%, var(--luz-55) 0 50%, #fff4 0 50.5%, #fff0 0 90.15%, #fff3 0 90.5%, var(--luz-55) 0 91%, #fff0 0 100% ), 
		linear-gradient(-52deg, #fff0 0 21.25%, var(--luz-55) 0 21.85%, #fff4 0 22.15%, #fff0 0 100% ), 
		linear-gradient(128deg, #fff0 0 21.25%, var(--luz-55) 0 21.85%, #fff4 0 22.15%, #fff0 0 100% );
    background-color: var(--luz-60);
    background-size: 5% 75%,  88% 30%, 15% 8%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
	
}

.group.mod-6 .module.type-1 > .side:nth-of-type(3),
.group.mod-12 .module.type-1 > .side:nth-of-type(3) {
	width: calc(var(--depth) * 1vmin - 1.5vmin);
    transform: translate(-50%, -50%) rotateY( 90deg ) translate3d(0.75vmin, 0, calc(var(--width) * 0.5vmin));
	background: 
		linear-gradient(180deg, var(--luz-40) 0 39%, #fff0 0 55%, var(--luz-40) 0 56%,  #fff0 0 72%, var(--luz-40) 0 73%, #fff0 0 89.5%, var(--luz-40) 0 90%, var(--luz-05) 0 100% ),   linear-gradient(90deg, var(--luz-40) 0 5%, #fff0 0 93.45%, var(--luz-40) 0 100% ), 
		linear-gradient(90deg, var(--sp4) 0 22%, #fff0 0 24%, var(--sp3) 0 40%, #fff0 0 45%,  var(--sp4) 0 62%, #fff0 0 64%,  var(--sp3) 0 81%, #fff0 0 100%);
    background-color: var(--luz-40);
}

.group.mod-1 .module.type-1 > .side:nth-of-type(3),
.group.mod-1 .module.type-1 > .side:nth-of-type(4),
.group.mod-5 .module.type-1 > .side:nth-of-type(3),
.group.mod-5 .module.type-1 > .side:nth-of-type(4),
.group.mod-7 .module.type-1 > .side:nth-of-type(3),
.group.mod-7 .module.type-1 > .side:nth-of-type(4),
.group.mod-11 .module.type-1 > .side:nth-of-type(3),
.group.mod-11 .module.type-1 > .side:nth-of-type(4) {
	background: 
		var(--dot-spm) 11% 65%, 
		var(--dot-spm) 34% 40%,
		conic-gradient(from 0deg at 50% 50%, var(--sp4) 0% 20%, #fff0 0% 100%) 23% 94% no-repeat, 
		var(--dot-spm) 67% 40%,  
		conic-gradient(from 0deg at 50% 50%, var(--sp4) 0% 35%, #fff0 0% 100%) 62% 85% no-repeat,  var(--dot-spm) 90% 69%,   
		linear-gradient(180deg, var(--luz-60) 0 35%, #fff0 0 87.5%, var(--luz-60) 0 90%, var(--luz-15) 0 100% ),   
		linear-gradient(-90deg, var(--luz-30) 0 8%, #fff0 0 9%, var(--sp2) 0 22%, var(--sp5) 0 28%, #fff0 0 29%, var(--sp5) 0 48%, #fff0 0 52%, var(--sp5) 0 71%, #fff0 0 72%, var(--sp5) 0 78%, var(--sp2) 0 91%, #fff0 0 92%, var(--luz-30) 0 100%);
    background-color: var( --luz-60);
    background-size: 13% 25%, 12.5% 12%, 25% 50%, 12.5% 12%, 25% 45%, 13% 25%, 100% 100%, 100% 100%;
}

.group.mod-1 .type-1 .side:nth-of-type(6),
.group.mod-5 .type-1 .side:nth-of-type(6),
.group.mod-7 .type-1 .side:nth-of-type(6),
.group.mod-11 .type-1 .side:nth-of-type(6) {
    background: 
		repeating-linear-gradient(0deg, #0b0b0b 0.25vmin, #fff0 0.75vmin), 
		repeating-linear-gradient(90deg, #0b0b0b 0.3vmin, #fff0 0.75vmin), 
		var(--luz-05);
    background-position: center center;
    background-size: 18% 20%;
}

.group.mod-1 .type-1 .side:nth-of-type(7),
.group.mod-5 .type-1 .side:nth-of-type(7),
.group.mod-7 .type-1 .side:nth-of-type(7),
.group.mod-11 .type-1 .side:nth-of-type(7) {
    background: 
		linear-gradient(0deg, var(--luz-15) 0 10% , #fff0 0 100%), 
		var(--w3) 80% 1.5%, 
		var(--w4) 80% 10%, 
		var(--luz-55);
    background-size: 100% 100%, 60% 6%, 60% 6%;
}

.group.mod-1 .type-1 .side:nth-of-type(8),
.group.mod-5 .type-1 .side:nth-of-type(8),
.group.mod-7 .type-1 .side:nth-of-type(8),
.group.mod-11 .type-1 .side:nth-of-type(8) {
    background: linear-gradient(0deg, var(--luz-15) 0 10% , #fff0 0 100%), var(--luz-70);
}

.group.mod-6 .module.type-1 > .side:nth-of-type(4),
.group.mod-12 .module.type-1 > .side:nth-of-type(4) {
    background: 
		conic-gradient(from 90deg at 0% 70%, var(--luz-60) 0% 25%, #fff0 0% 100%) no-repeat 59% 100%,  
		conic-gradient(from 90deg at 0% 75%, var(--luz-60) 0% 25%, #fff0 0% 100%) no-repeat 100% 60%, 
		conic-gradient(from 90deg at 88% 25%, var(--luz-15) 0% 25%, #fff0 0% 100%), 
		linear-gradient(180deg, var(--luz-60) 0 39%, #fff0 0 56%, var(--luz-60) 0 57%, #fff0 0 72%, var(--luz-60) 0 73%, #fff0 0 88.5%,var(--luz-60) 0 90%, var(--luz-15) 0 100% ),  
		linear-gradient(90deg, var(--luz-60) 0 8%, #fff0 0 89%, var(--luz-60) 0 100% ), 
		linear-gradient(-90deg, #fff0 0 15%, var(--sp4) 0% 33%, #fff0 0 34%, var(--sp4) 0 50%, #fff0 0 52%, var(--sp6) 0 54%, #fff0 0 56%, var(--sp4) 0 73%, #fff0 0 74%, var(--sp4) 0 92%, #fff0 0 30%);
    background-color: var(--luz-60);
	background-size: 12% 35% ,15% 30% , 100% 100%, 100% 100%, 100% 100%, 100% 100%;
}

.group.mod-3 .type-1 > .side:nth-of-type(4),
.group.mod-9 .type-1 > .side:nth-of-type(4) {
	background: 
		conic-gradient(from 180deg at 50% 90.25%, var(--luz-15) 0 25%, #fff0 0 100%) ,
		linear-gradient(90deg, #fff0 0 69.5%, var(--luz-60) 0 100%),
		linear-gradient(90deg, var(--luz-15) 0 10%, #fff0 0 28%, var(--luz-60) 0 28.5%, #fff0 0 48%, var(--luz-60) 0 48.5%, #fff0 0 69%, var(--luz-60) 0 69.5%, #fff0 0 100%), 
		linear-gradient(0deg, var(--luz-15) 0 10%, var(--luz-60) 0 12.5%, var(--sp5) 0 29%, var(--luz-60) 0 29.75%, var(--sp4) 0 47.25%, var(--luz-60) 0 48.25%, var(--sp6) 0 50.5%, var(--luz-60) 0 51.75%, var(--sp4) 0 68.5%, var(--luz-60) 0 69.5%, var(--sp5) 0 87%, var(--luz-60) 0 91%);
}









/*** CAM SYS ***/
.cam {
	width: 5vw;
	height: 5vh;
	z-index: 44;
	opacity: 0;
	border: 1px solid red;
	float: left;
	box-sizing: border-box;
	position: relative;
	cursor: zoom-in;
	/*** 
		Cam System by Yusuke Nakaya from this pen:
		https://codepen.io/YusukeNakaya/pen/GRWZdOb
	
	  Explained by Amit Sheen in CSS-Tricks:
	  https://css-tricks.com/how-to-map-mouse-position-in-css/
	***/
	@for $i from 1 through 20 {
		@for $j from 1 through 20 {
			$key: ($i - 1) * 20 + $j;
			&:nth-child(#{$key}) {
				&:hover ~ .content .endurance {
					transform: 
						rotateX(($i - 8) * 19deg - 47.5) 
						rotateZ(($j - 8) * 19deg - 10)
						/*rotateY(($j - 8) * 19deg - 10)*/;
					animation-iteration-count: 0;
				}
			}
		}
	}
	&:active ~ .content {
		transform: 
			scale3d(1.5,1.5,1.5);
		transition: all 1.5s ease 0.25s ;
	}
	&:active ~ .blackhole .gargantua {
    transform: 
			rotate(-5deg) scale3d(0.175, 0.175, 0.175) 
			translate3d(-10vw, -15vh, -250vmin);
    transition: all 1.45s ease 0.25s;
	}
} /*** end .cam ***/














/*** BLACK HOLE ***/

.blackhole {
	position: absolute;
	z-index: -3;
}
.gargantua *, .gargantua *:before, .gargantua *:after { box-sizing: border-box; }

.gargantua *:before, .gargantua *:after { position: absolute; }


.gargantua {
  width: 90vmax;
  height: 60vmax;
	left: -30vw;
	top: -20vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  transform: rotate(-5deg) scale3d(0.2, 0.2, 0.2) translate3d(-10vw, -15vh, -250vmin);
	transition: all 1.45s ease 0.25s;
}
.gargantua > div {
	position: absolute;
}


.bot-photon-ring {
	width: 18vmax;
	height: 10vmax;
	border-radius: 1vmax 1vmax 20vmax 20vmax;
	box-shadow: 0 0 5px 2px var(--black);
	top: 28.5vmax;
	border: 2px solid var(--white);
	border-top: 0;
	background: var(--black);
	margin-left: 0.75vmax;
	box-shadow: 0 0 5px 2px var(--black), 0px 0px 5px 2px var(--yellow), 0px -3px 10px -3px var(--yellow) inset;
}

.image-disk {
	width: 22vmax;
	height: 22vmax;
	border-radius: 100%;
	top: 19vmax;
	border: 2vmax solid var(--white);
	box-shadow: 0 0px 15px 3px var(--yellow), 0 0px 5px 2px var(--yellow) inset;
}
.image-disk:before, .image-disk:after {
	content: "";
	position: absolute;
	left: -5.365vmax;
	top: 3.85vmax;
	width: 3.5vmax;
	height: 4.5vmax;
	border-radius: 0px 0px 34px 10px;
	transform: rotate(23deg);
	box-shadow: 16px 2px 0px 1px white;
}
.image-disk:after {
	left: 19.885vmax;
	transform: rotateY(180deg) rotateZ(23deg);
}
.image-disk-lines {
	width: 22vmax;
	height: 22vmax;
	border-radius: 100%;
	background: 
		radial-gradient(
			circle at 50% 50%,
			transparent, transparent 9.25vmax, 
			var(--yellow) 9.5vmax, var(--yellow) 9.55vmax, 
			var(--white) 9.55vmax, var(--white) 9.95vmax,
			var(--yellow) 9.95vmax, var(--yellow) 10.05vmax,
			var(--white) 10.05vmax, var(--white) 10.35vmax,
			var(--yellow) 10.35vmax, var(--yellow) 10.42vmax,
			var(--white) 10.42vmax, var(--white) 10.75vmax,
			var(--yellow) 10.75vmax, var(--yellow) 10.79vmax,
			var(--white) 10.79vmax, var(--white) 10.95vmax,
			red 22vmax
		)
	;
}

.accretion-disk {
  background: 
		radial-gradient(
		   ellipse at 49.5% 40%, 
		   transparent, transparent 11.15vmax, 
		   var(--white) 11.15vmax, var(--yellow) 11.15vmax, 
		   var(--yellow) 11.2vmax, var(--white) 11.2vmax, 
		   var(--white) 12.5vmax, var(--yellow) 12.5vmax, 
		   var(--yellow) 12.65vmax, var(--white) 12.65vmax,
		   var(--white) 13.5vmax, var(--yellow) 13.5vmax, 
		   var(--yellow) 13.55vmax, var(--white) 13.55vmax,
		   var(--white) 14.45vmax, var(--yellow) 14.45vmax, 
		   var(--yellow) 14.55vmax, var(--white) 14.55vmax, 
		   var(--white) 15.5vmax, var(--yellow) 15.5vmax, 
		   var(--yellow) 15.65vmax, var(--white) 15.65vmax,
		   var(--white) 16.5vmax, var(--yellow) 16.5vmax, 
		   var(--yellow) 16.65vmax, var(--white) 16.65vmax,
		   var(--white) 17.6vmax,  var(--yellow) 17.6vmax,
		   var(--yellow) 17.65vmax, var(--white) 17.65vmax,
		   var(--white) 18.25vmax,  var(--yellow) 18.25vmax,
		   var(--yellow) 18.35vmax, var(--white) 18.35vmax,
		   var(--white) 19.15vmax,  var(--yellow) 19.15vmax,
		   var(--yellow) 19.35vmax, var(--white) 19.35vmax,
		   var(--white) 19.95vmax,  var(--yellow) 19.95vmax,
		   var(--yellow) 20.05vmax, var(--white) 20.05vmax,
		   var(--white) 20.75vmax,  var(--yellow) 20.75vmax,
		   var(--yellow) 20.85vmax, var(--white) 20.85vmax,
		   var(--white) 21.5vmax,  var(--yellow) 21.5vmax,
		   var(--yellow) 21.55vmax, var(--white) 21.55vmax,
		   var(--white) 22.5vmax,  var(--yellow) 22.5vmax,
		   var(--yellow) 22.65vmax, var(--white) 22.65vmax,
		   var(--white) 23.45vmax, var(--yellow) 23.45vmax,
		   var(--yellow) 23.52vmax, var(--white) 23.55vmax
		),
		radial-gradient(
		   ellipse at 49.5% 37%, 
		   var(--black), var(--black) 9.25vmax, 
		   var(--white) 9.5vmax, var(--white)
		)
	;
  width: 54vmax;
  height: 6vmax;
  border-radius: 100%;
  top: 28.5vmax;
  box-shadow: 0 0 3px 0 var(--white), 0 0px 15px 3px var(--yellow), 0 15px 10px 10px var(--black);
}



.top-photon-ring {
	width: 17vmax;
	height: 9vmax;
	border-radius: 20vmax 20vmax 1vmax 1vmax;
	background: var(--black);
	top: 21.5vmax;
	box-shadow: 0 5px 0px 2px var(--black), -3px 5px 0px 2px var(--black), 4px 5px 0px 2px var(--black), -2px 3px 3px 0px var(--yellow);
}
.top-photon-ring:before {
	content: "";
	width: 18vmax;
	height: 3vmax;
	background: black;
	left: -0.5vmax;
	border-radius: 100%;
	bottom: -7.6vmax;
	box-shadow: 0 0 1px 1px var(--black);
	position: relative;
	display: block;
}
.top-photon-ring:after {
	content: "";
	opacity: 0.75;
	width: 17vmax;
	height: 17vmax;
	border: 2px solid var(--white);
	border-radius: 100%;
	border-bottom-color: transparent;
	border-left-color: transparent;
	transform: rotate(-46deg);
	left: 0.25vmax;
	top: 1.25vmax;
	box-shadow: -5px 5px 5px -4px var(--yellow) inset, 2px -2px 4px -2px var(--yellow);
}
              
            
!

JS

              
                
              
            
!
999px

Console