/* Zooms the entire HTML to make the tower fill the screen completely.*/
html {
	zoom: 200%;
}

/* Selects the body.
   Remove margin, sets our width to fill the screen, this is 50% of the VH/VW-
   because we are zoomed!
   Flex is used to center the Tower horizontally and vertically.*/
body {
	margin: 0px;
	width: 50vw;
	height: 50vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Selects the tower div and sets the size for our PC Tower
   Background color is also set, and the display is set to flex to position child divs.*/
div.tower {
	width: 250px;
	height: 475px;
	background-color: #333333;
	box-sizing: border-box;
	border: outset 4px #ffffff5c;
	display: flex;
}
/* Creates the pc left panel, sets it color width and position.*/
div.panel-a {
	background-color: rgb(86, 86, 86);
	width: 4px;
}
/* Selects the first screw div in panel-a and sets its position and rotates it a little.*/
div.panel-a div.screw:nth-child(1) {
	top: 2%;
	left: -5px;
	rotate: 4deg;
}
/* Selects the second screw in panel-a and sets its position and rotates it a little.*/
div.panel-a div.screw:nth-child(2) {
	top: 93%;
	left: -5px;
	rotate: 359deg;
}

/* Sets the right panel background color and width.*/
div.panel-b {
	background-color: rgb(77, 77, 77);
	width: 4px;
}
/* Selects the first screw div in panel-b and sets its position and rotates it a little */
div.panel-b div.screw:nth-child(1) {
	top: 2%;
	left: -4px;
	rotate: 16deg;
}
/* Selects the second screw div in panel-b and sets its position and rotates it a little */
div.panel-b div.screw:nth-child(2) {
	top: 93%;
	left: -4px;
	rotate: -12deg;
}

/* Reusable Screw Elements */
/* base screw style, selects the screw div and sets its position, sizing, border,
   and gives it some shadow.*/
div.screw {
	position: relative;
	width: 12px;
	height: 12px;
	box-sizing: border-box;
	border: dotted 1px rgba(255, 255, 255, 0.038);
	border-radius: 50%;
	background-color: #3a3a3a;
	z-index: 1;
	box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.75);
}
/* Selects the divs descendent of the screw div, this is used to create the
   phillips head indents.  Sets the sizing, border, and color to such end. */
div.screw div {
	position: relative;
	box-sizing: border-box;
	width: 90%;
	top: 45%;
	left: 5%;
	height: 5%;
	background-color: rgba(0, 0, 0, 0.404);
	border: 1px solid rgba(196, 196, 196, 0.229);
	border-top: none;
	border-bottom: none;
}
/* Selects the second div under screw, this is used to create the cross pattern
   from the parent styling */
div.screw div:nth-child(2) {
	rotate: 90deg;
	top: 42.5%
}

/* Center Panel / Main Body */
/* Selects the center div decendent of the tower and sizes it to fill all the space.*/
div.tower div.center{
	width:100%
}

/* This is the 'top' of the tower, which will contain the I/O shield and fan.
   This selects the top class div under the center class div.
   it sets the display to be flex and positions the element, and gives it a background color.*/
div.center div.top {
	display: flex;
	position: relative;
	top: 4px;
	height: 35%;
	background-color: #565656;
}

/* IO */
/* This selects the io shield div descendent of the top div.
   This positions it appropriately, sets to display its contents as flex, 
   sets the appropriate width/height, and give it some internal box-shadow to
   convey depth.
   Padding keeps the inner elements from touching the edge in flex, and the 
   flex mode is set to wrap, so the descendent divs are distributed.*/
div.top div.ioshield {
	position: relative;
	display: flex;
	box-sizing: border-box;
	height: 90%;
	width: 25%;
	top: 5%;
	left: 2%;
	padding: 3%;
	background-color: #313131;
	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.75) inset;
	flex-flow: wrap;
}

/* Display Port, sans notch. */
/* This selects the dp div under the ioshield div.
   This is used to convey a female video-connector plug.
   We set our sizing and box-sizing, bg color, and border to achieve the look.*/
div.ioshield div.dp {
	box-sizing: border-box;
	height: 28px;
	width: 8px;
	background-color: rgb(31, 31, 31);
	margin: 4px;
	border: solid 1px rgba(255, 255, 255, 0.205);
}
/* This selects divs descendent the ioshield dp div.
   This style centers a 3/4 border line that represents the contact finger within
   the DP connector its parent. */
div.ioshield div.dp div{
	position: relative;
	box-sizing: border-box;
	top: 13%;
	left: 10%;
	height: 75%;
	width: 65%;
	border: solid 1px rgb(73, 73, 73);
	border-left: none;
}

/* Empty Div for blanking spot in I/O */
/* This selects the spacer div under the ioshield div.
   This is a visually empty element used only to pad out the spacing in the flexbox its parent. */
div.ioshield div.spacer {
	height: 22px;
	width: 6px;
	margin: 4px;
}

/* USB Type C Port */
/* This selects the usb-c div under the ioshield div.
   This sets the dimensions of the element, and a background color to 
   represent the area around the USB-C connector proper. */
div.ioshield div.usb-c {
	height: 22px;
	width: 6px;
	padding: 2px;
	margin: 2px;
	background-color: #ffffffcf;
}
/* This selects the usb-c-inner div under usb-c.
   This is the actual USB-C 'connector', it uses the border-radius and border
   styles to represent the outer shape of the connector (which is pill-like).
   And is manually aligned inside the usb-c element through styles.
   This  displays children elements centered through the flexbox display*/
div.ioshield div.usb-c div.usb-c-inner {
	height: 70%;
	width: 75%;
	background-color: #2d2d2d;
	border: solid 1px rgb(156, 156, 156);
	box-sizing: border-box;
	margin-left: 14%;
	margin-top: 50%;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* This selects divs under the usb-c-inner div under the usb-c div.
   This is used for the central finger inside the usb-c connector proper
   We set its width and height and background color to represent that. */
div.ioshield div.usb-c div.usb-c-inner div {
	height: 70%;
	width: 25%;
	background-color: #4e4e4e;
}

/* USB Type A Port */
/* This selects the usb-a div under ioshield
   It it used to set the dimensions, margins, background-color, border,
   and box-sizing to convey the main connector body.
   Flex is used to align the sub-div below to represent the contact finger.*/
div.ioshield div.usb-a {
	height: 26px;
	width: 10px;
	margin-top: 2px;
	margin-right: 2px; 
	margin-left: 2px;
	background-color: #1e1e1e;
	box-sizing: border-box;
	border: solid 1px rgb(156, 156, 156);
	display: flex;
	align-items: center;
	justify-content: right;
}
/* This selects the divs under ioshield & usb-a div.
   This sets the width, height, and background color to represent the blue
   contact finger used in USB 3.0 connectors.*/
div.ioshield div.usb-a div {
	height: 75%;
	width: 25%;
	background-color: #0077CC;
	margin-right: 25%;
}

/* TRS Audio Connectors */
/* Flex conainer for hd audio TRS connectors */
/* This selects the ioshield hdaudio div.
   It is used to contain the TRS divs in a flex and draw a border around the box.*/
div.ioshield div.hdaudio {
	border: 1px solid grey;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
}

/* TRS Jack */
/* This selects the trs div under hdaudio. 
   This is used to represent the *circle* circular TRS audio jack, done trough 
   the border-radius property.
   It also displays contents as flex to easily align the hole centrally.
   */
div.hdaudio div.trs {
	box-sizing: border-box;
	height: 12px;
	width: 12px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* This selects the first trs div under hdaudio.
   This is used to set the specific element's background color appropriate for line-in.*/
div.hdaudio div.trs:nth-child(1) {
	background-color: #E68699;
}
/* This selects the second trs div under hdaudio.
   This is used to set the specific slement's background color appropriate for stereo line-out */
div.hdaudio div.trs:nth-child(2) {
	background-color: #A9C47F;
}
/* This selects the third trs div under hdaudio.
   This is used to set the specific slement's background color appropriate for line-in */
div.hdaudio div.trs:nth-child(3) {
	background-color: #6CACE4;
}
/* This selects divs under the hdaudio and trs div. 
   It is used to create the circular hole where the TRS male jack would go.
   Thusly it creates a round element using border-radious and sets the background-color black.*/
div.hdaudio div.trs div {
	height: 50%;
	width: 50%;
	border-radius: 50%;
	background-color: black;
}


/* This selects the fanbox div under the top div.
   This is used to create the base 'box' to hold our fan elements
   specifically a square set height and width, and relative position.
   This also sets the top position down slightly, and gives margin from the ioshield.
   Background-color and a border radius are set for visual effect. */
div.top div.fanbox {
	height: 150px;
	width: 150px;
	position: relative;
	top: 5%;
	margin-left: 16px;
	background-color: #373737;
	box-sizing: border-box;
	border-radius: 2px;
	overflow: hidden;
}
/* Selects the lines divs under fanbox.
   Sets the height and width and absolute position.
   This is used to contain the "line" divs below for rotation. */
div.fanbox div.lines {
	height: 100%;
	width: 100%;
	position: absolute;
}
/* Selects the div lines 3rd child under fanbox.
   This is used to set the rotation of the lines to 136 deg to produce a neat mesh effect.*/
div.fanbox div.lines:nth-child(3) {
	rotate: 135deg;
}
/* This selects all the divs under the line div under fanbox.
   This is used to style all of the divs to create "lines" that make up our mesh above. 
   Background color is used with a height and margin to style the size and thickness of the lines.*/
div.fanbox div.lines div{
	height: 3px;
	margin-top: 3px;
	background-color: #373737;
	width: 100%;
}

/* This selects the fan divs under fanbox.
   This is used hold the fan elements and rotate them for visual effect.
   Its dimensions are set to fill up its parent and position absolutely.
   Background color is set and rounded to represent the fan-hole.
   box-shadow is also used to represent depth.
   The fan is rotated by default to look less "perfectly" positioned. */
div.fanbox div.fan {
	position: absolute;
	height: 100%;
	width: 100%;
	background-color: #1e1e1e;
	border-radius: 50%;
	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.75) inset;
	transform: rotate(28deg);
}
/* This selects the fan div hub div.
   This is the central hub of the fan.
   Positioned absolutely and find the center of the fan using top and left.
   It uses border-radius to make a rounded *circle* element and its
   background-color is set to a distinct (Noctua) color.
   There is a dashed border applied to represent the aerodynamic veins 
   molded into typical fan-hubs.*/
div.fan div.hub {
	position: absolute;
	top: 37.5%;
	left: 37.5%;
	height: 25%;
	width: 25%;
	border-radius: 50%;
	background-color: #8A5A4F;
	border: dashed 2px #ececec1c;
	box-sizing: border-box;
}
/* This selects the fan div fan blades divs.
   This is used to hold blade elements to rotate them with a central-axis.
   Its width and height are set to 100% of its parent which needs to be square.*/
div.fan div.blades {
	height: 100%;
	width: 100%;
	position: absolute;
}
/* This selects the blades div blade div.
   This creates the *non traditional* shape used for the fan-blades using
   border-radius.
   It is positioned and sized relative to the fan hub.
   Its background-color is set the same distinct (Noctua) brown.
   It is also rotated to align to "join" with the fan hub.*/
div.blades div.blade {
	position: absolute;
	height: 30%;
	width: 30%;
	top: 7%;
	left: 35%;
	border-radius: 75% 25% 90% 10% / 100% 0% 100% 0% ;
	background-color: #8A5A4F;
	transform: rotateZ(-45deg);
}

/* These slectors select the n-th blade elements and rotates them into place.
   This is used to create the circular blade pattern around the fan-hub. */
div.fan div.blades:nth-child(1) {
	transform: rotateZ(60deg);
}
div.fan div.blades:nth-child(2) {
	transform: rotateZ(120deg);
}
div.fan div.blades:nth-child(3) {
	transform: rotateZ(180deg);
}
div.fan div.blades:nth-child(4) {
	transform: rotateZ(240deg);
}
div.fan div.blades:nth-child(5) {
	transform: rotateZ(300deg);
}
div.fan div.blades:nth-child(6) {
	transform: rotateZ(360deg);
}

/* This slects the mid (middle) div of the center div.
   This positions it relative to the top, its height, and sets background color
   to represent the back panel chassis. */
div.center div.mid {
	position: relative;
	top: 4px;
	height: 40%;
	background-color: #565656;
}
/* This selects the mid (middle) div expansion div.
   This is used to hold the expansion bay and its covers.
   It sets width to a percentage of its parent, and moves it from the left
   with a relative posotion.
   Background color is set white to shine through if not enough covers are included in the div.
   Min-height is set to prevent the element from totally collapsing without child elements. */
div.mid div.expansion {
	width: 60%;
	min-height: 40%;
	background-color: white;
	left: 2%;
	position: relative;
}
/* This selects slot div descendent of expansion div.
   This sets the slot height, and fills the expansion div width.
   This also gives the border and background color to the slots.
   box-sizing is used to keep the dimensions when using a thicker border.*/
div.expansion div.slot {
	height: 22px;
	width: 100%;
	background-color: grey;
	border: inset 2px #999999ff;
	box-sizing: border-box;
}
/* This selects the cover divs under slot.
   This is used to give structure to the following arrow divs representing
   Triangular holes cut into the covers.
   Flex is used to this end, centering the child elements. */
div.slot div.cover {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
/* This selects the up divs descendent of the cover div.
   This is used to create a downward pointing arrow *triangle*.
   Done using the border property.
   Position is also set relative to center the up and down divs visually.
   */
div.cover div.up {
	position: relative;
	left: 4px;
	bottom: 3px;
	width: 0;
	height: 0;
	border: 8px solid transparent;
	border-bottom: 8px solid rgb(18, 18, 18);
}
/* This selects the down divs descendent of the cover div.
   This is used to create a upward pointing arrow *triangle*.
   Done using the border property.
   Position is also set relative to center the up and down divs visually.
   */
   div.cover div.down {
	position: relative;
	top: 5px;
	left: 4px;
	width: 0;
	height: 0;
	border: 8px solid transparent;
	border-top: 8px solid rgb(18, 18, 18);
}


/* Bottom Segment */
/* This selects the center div bottom divs.
   Used to set position, height, and bg color of the bottom section of the 'tower'.*/
div.center div.bottom {
	position: relative;
	top: 4px;
	height: 23%;
	background-color: #565656;
}
/* This selects the frame divs descendent of the bottom div segment div. 
   This is used to set the frame dimensions, and location inside the bottom div.
   This also applies the background color and an inset border to represent the frame
   which holds the PSU in.*/
div.bottom div.frame {
	height: 90%;
	width: 77%;
	left: 11%;
	position: absolute;
	box-sizing: border-box;
	border: inset 3px black;
	background-color: #262626;
}
/* This selects the screw divs descendent of the frame div. 
   This is used to set the screw position absolutely, at roughly half-way down the parent.*/
div.frame div.screw {
	position: absolute;
	top: 45%;
}
/* This selects the first screw div under frame.
   And positions it a little off the left side of the frame.
   Also a little rotation, for realism.*/
div.frame div.screw:nth-child(1) {
	rotate: 2deg;
	left: -5px;
}
/* This selects the second screw div under frame.
   And positions it a little off the right side of the frame.*/
div.frame div.screw:nth-child(2) {
	right: -5px;
}
/* This selects the grill-mask div under the frame div.
   This is set to the same dimensions its parent with absolute positioning.
   box-sizing is used to keep the border within the specified dimensions.
   There is a border and background color set.
   _Critically_ this element uses overflow:hidden to mask the grill divs its children -
   Which prevents the oversized elements from rendering over the rest of the page.*/
div.frame div.grill-mask {
	height: 100%;
	width: 100%;
	position: absolute;
	overflow: hidden;
	box-sizing: border-box;
	border: solid 2px #262626;
	border-radius: 16px;
	background-color: #151515;
}
/* This selects the line divs descendent the grill-mask and frame div.
   This is used to set the sizing for later rotating its children. */
div.frame div.grill-mask div.lines {
	height: 100%;
	width: 150%;
}
/* This selects the first child in lines under grill-mask under frame.
   This is used to position and rotate the lines div to create the criss-cross grill pattern.*/
div.frame div.grill-mask div.lines:nth-child(1) {
	position: absolute;
	bottom: 50%;
	left: 0;
	rotate: 45deg;
}
/* This selects the second child in lines under grill-mask under frame.
   This is used to position and rotate the lines div to create the criss-cross grill pattern.*/
div.frame div.grill-mask div.lines:nth-child(2) {
	position: absolute;
	top: 50%;
	left: 0%;
	rotate: 135deg;
}
/* This selects the divs under lines under grill-mask under frame.
   This is used to create the actual "lines" from  the divs under lines.
   Achieved through setting the height margin top to create empty space between the divs.
   Background color is set to the grill color.*/
div.frame div.grill-mask div.lines div{
	height: 2px;
	margin-top: 2px;
	background-color: #262626;
	width: 100%;
}
/* This selects the power div descendent frame.
   This is used to contain and draw the power switch/plug div of the PSU.
   The dimensions are set using exact pixel values, with absolute positioning,
   set directly on the right and down roughly half way, using top and right.
   A background color is set which matches the grill color.*/
div.frame div.power {
	height: 48px;
	width: 64px;
	background-color: #373737;
	position: absolute;
	right: 0%;
	top: 26%;
}
/* This selects the c14 div descendent the power div.
   Dimensions are set exactly and the position is relative with top and left.
   The background color defines the body of the outlet.
   Rotate is used to turn the outlet to the correct 90 degree orientation.*/
div.power div.c14 {
	background-color: #5e5e5e;
	height: 29px;
	width: 44px;
	rotate: 90deg;
	top: 19%;
	position: relative;
	left: 19px;
}
/* This slects the body div descendent the c14 div
   This is used to hold the elements that define the visual hole.
   Dimensions and position properties are set to this end.*/
div.c14 div.body {
	position: absolute;
	height: 24px;
	width: 39px;
	top: 2px;
	left: 2px;
}
/* This selects the corner div under body under c14.
   This uses a border and border-bottom to draw a rectangle that is mitered at the corners
   for the bottom part of the c14 connector.
   Dimensions and position are also set to that end. */
div.c14 div.body div.corner {
	border: 8px solid transparent;
	border-bottom: 8px solid #202020;
	height: 0;
	width: 23px;
	top: -8px;
	position: absolute;
	left: 0px;
}
/* This selects the center div under body under c14.
   This draws the rectangular component of the c14 outlet adjacent to the mitered component.
   To this end it has its dimensions and position set.
   The background color is set and must match the border-color of the corner element.*/
div.c14 div.body div.center {
	background-color: #202020;
	height: 16px;
	width: 39px;
	position: absolute;
	top: 8px;
}

/* This selectsh the hole div descendent of the c14 div.
   This is used to contain the prong elements, and uses a flex display
   to position those sub-elements.
   It is positioned and sized in accordance with the rest of the c14 divs.*/
div.c14 div.hole {
	position: absolute;
	height: 24px;
	width: 39px;
	top: 2px;
	left: 2px;
	display: flex;
	justify-content: space-evenly;
}
/* This selects the prong divs descendent of the hole under c14.
   This element is styled to represent the metal prongs in the c14 outlet.
   It is sized and given a background-color to that end.
   The margin distances it from top of the hole div.*/
div.c14 div.hole div.prong {
	height: 9px;
	background-color: #d2d2d2;
	width: 2px;
	margin-top: 28%;
}
/* This selects the 2nd prong div under the hole under c14.
   This changes the margin-top to move this prong closer to the mitered part of the outlet. */
div.c14 div.hole div.prong:nth-child(2) {
	margin-top: 8%;
}

/* This selects the switch div descendent the power div.
   This is used to style the switch frame with a background and border.
   It also displays its content flex column and space-around to position
   its child elements (an | / 0) properly.*/
div.power div.switch {
	position: absolute;
	height: 32px;
	width: 18px;
	background-color: #5e5e5e;
	top: 16%;
	left: 6%;
	box-sizing: border-box;
	border: solid 1px grey;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
}
/* This selects the line div underthe switch div under power.
   This draws a simple white line representing the ON state. */
div.power div.switch div.line {
	height: 10px;
	width: 2px;
	background-color: white;
}
/* This selects the circle div under switch under power.
   This is used to draw a white circle with a transparent center.
   Representing the 0 or OFF state of a PSU switch.
   Box sizing is used to control the visual size of the border.*/
div.power div.switch div.circle {
	width: 10px;
	height: 10px;
	border: solid 2px white;
	border-radius: 50%;
	box-sizing: border-box;
}