html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* *********************************************************************** */


html,body {
	background-color: #D0A9F5;
	font-size: 2.25vh;
	height: 100vh;
	margin: 0;
	padding: 0;
}


/* *********************************************************************** */
/* ************CONTENT AREAS************ */

div#circuit-content {
	height: 100vh;
	width: 100vw;
}
div#circuit-header-content {
	height: 10vh; //8
}
div#circuit-body-content {
	height: 68vh; //70
}
div#circuit-footer-content {
	height: 10vh;
	margin-top: 2vh;
}






/* *********************************************************************** */
/* ************CONTAINERS************ */

div#circuit-container {
	background-color: none;
	border: 1px solid black;
	position: absolute;
	height: 70vh;
	left: 2vw;
	width: 70vw;
	top: 10vh; //8
}

div#button-container {
	position: absolute;
	background-color: white;
	left: 3vw;
	top: 1vw;
	height: 12vw;
	width: 15vw; 
}

div#button-2-container {
	position: absolute;
	background-color: white;
	left: 36vw;
	top: 1vw;
	height: 12vw;
	width: 15vw; 
}

div#button-3-container {
	position: absolute;
	background-color: white;
	border: 1px solid black;
	left: 52vw;
	top: 3vw;
	height: 10vw;
	width: 15vw; 
}

div#button-wiring-container {
	position: absolute;
	left: 1vw;
	top: 12vw;
	height: 12vw;
	width: 15vw;
}

div#button-wiring-container-2 {
	position: absolute;
	left: 36vw;
	top: 12vw;
	height: 12vw;
	width: 15vw;
}

div#ground-symbol-container, div#ground-symbol-container-2  {
	position: absolute;
	top: 12vw;
}
div#ground-symbol-container {
	left: 6.25vw;
}
div#ground-symbol-container-2 {
	left: 7.75vw;
}

div#chip-container {
	position: absolute;
	background-color: black;
	left: 13vw;
	top: 20vw; 
	height: 8vw;
	width: 30vw; 
}

div#chip-pins-top-row-container {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	height: 2vw;
	top: -1.7vw;
}
div#chip-pins-bottom-row-container {
	position: absolute;
	box-sizing: border-box;
	width: 100%;
	height: 2vw;
	bottom: -1.7vw;
}


div#led-container {
	position: absolute;
	left: 20vw;
	top: 2vw;
	height: 9vw;
	width: 6vw;
}

div#led-2-container {
	position: absolute;
	left: 28vw;
	top: 2vw;
	height: 9vw;
	width: 6vw;
}

div#lcd-container {
	position: absolute;
	left: 39.75vw;
	top: 21vw;
	height: 15vw;
	width: 30vw;
}


div#logo-container {
	position: fixed;
	bottom: 0;
	left: 0;
	margin: 0;
	border: 0;
	padding: 0;
}

/* *********************************************************************** */

img#logo {
	height: 12vh;
	width: auto;
}


/* *********************************************************************** */
/* ************WIRES************ */

div.wire {
	position: absolute;
	border: 0.5vw solid black;
}

/* *********BUTTON WIRES********* */

div#button-to-chip-wire, div#button-to-chip-wire-2 {
	border-top: 0 solid black;
	border-bottom: 0 solid black;
	border-right: 0 solid black;
	top: 0vw;
	height: 7vw;
	width: 1vw;
}
div#button-to-chip-wire {
	left: 12.75vw;
}
div#button-to-chip-wire-2 {
	left: 3.75vw;
}

div#ground-top-line, div#ground-top-line-2 {
	border-left: 0 solid black;
	border-right: 0 solid black;
	border-bottom: 0 solid black;
	top: 0vw;
	left: 0vw;
	height: 1vw;
	width: 3vw;
}
div#ground-middle-line, div#ground-middle-line-2 {
	border-left: 0 solid black;
	border-right: 0 solid black;
	border-bottom: 0 solid black;
	top: 1vw;
	left: 0.5vw;
	height: 1vw;
	width: 2vw;
}
div#ground-bottom-line, div#ground-bottom-line-2 {
	border-left: 0 solid black;
	border-right: 0 solid black;
	border-bottom: 0 solid black;
	top: 2vw;
	left: 1vw;
	height: 1vw;
	width: 1vw;
}

div#wire-to-ground-wire, div#wire-to-ground-wire-2 {
	border-bottom: 0 solid black;
	top: 5vw;
	height: 7vw;
	width: 5vw;
}
div#wire-to-ground-wire {
	border-right: 0 solid black;
	left: 7.5vw;
}
div#wire-to-ground-wire-2 {
	border-left: 0 solid black;
	left: 4vw;
}

div#button-to-5V-wire, div#button-to-5V-wire-2 {
	border-top: 0 solid black;
	top: 0vw;
	left: 5.5vw;
	height: 3vw;
	width: 5vw;
}
div#button-to-5V-wire {
	border-left: 0 solid black;
}
div#button-to-5V-wire-2 {
	border-right: 0 solid black;
}

/* *********WIRE TEXT********* */

div#button-to-5V-label, div#button-to-5V-label-2 {
	position: absolute;
	top: 2.5vw;
}
div#button-to-5V-label {
	left: -2vw;
}
div#button-to-5V-label-2 {
	right: -2vw;
}

/* *********RESISTORS********* */

div.resistor, div.resistor-right {
	position: absolute;
	background-color: #886A08;
	border-radius: 20%;
	border: 1px solid black;
	top: 20%;

	height: 3vw;
	width: 1vw;
	box-sizing: border-box;
}
div.resistor {
	left: -0.75vw;
}
div.resistor-right {
	right: -0.75vw;
}

div#led-resistor, div#led-2-resistor {
	top: 40%;
}

div.resistor-stripe-1, div.resistor-stripe-2, div.resistor-stripe-3 {
	position: absolute;
	left: 0vw;
	height: 0.3vw;
	width: 100%;
	border-radius: 0%;
}
div.resistor-stripe-1 {
	top: 20%;
}
div.resistor-stripe-2 {
	top: 40%;
}
div.resistor-stripe-3 {
	top: 60%;
}

/* 0, muliply by 1 */
div.black-stripe {
	background-color: black;
}
/* 1, muliply by 10 */
div.brown-stripe {
	background-color: #61210B;
}
/* 2, muliply by 100 */
div.red-stripe {
	background-color: red;
}
/* 3, muliply by 1000 */
div.orange-stripe {
	background-color: orange;
}
/* 4, muliply by 10,000 */
div.yellow-stripe {
	background-color: yellow;
}
/* 5, muliply by 100,000 */
div.green-stripe {
	background-color: green;
}
/* 6, muliply by 1,000,000 */
div.blue-stripe {
	background-color: blue;
}
/* 7, muliply by 10,000,000 */
div.purple-stripe {
	background-color: purple;
}
/* 8, muliply by 100,000,000 */
div.grey-stripe {
	background-color: grey;
}
/* 9, muliply by 1,000,000,000 */
div.white-stripe {
	background-color: white;
}

/* *********RESISTOR TEXT********* */

div.resistor-label-right, div.resistor-label-left {
	color: black;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 80%;
	position: absolute;
	top: 40%;	
}
div.resistor-label-left {
	right: 1.45vw;
}
div.resistor-label-right {
	left: 1.25vw;
}

/* *********************************************************************** */
/* ************CHIP ELEMENTS************ */

div#chip {
	color: white;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 110%;
	position: absolute;
	top: 45%;
	left: 35%;	
}

div.chip-pin {
	float: left;
	margin-left: 0.5vw;
	margin-right: 0.5vw;
	border: 1px solid black;
	background-color: grey;
	height: 100%;
	width: 1vw;
	box-sizing: border-box;
}


/* ************PIN TEXT************ */

div#button-pin-1-label, div#button-pin-2-label, div#led-pin-1-label, div#led-pin-2-label {
	font-family: Arial, Helvetica, sans-serif;
	color: white;
	position: relative;
	bottom: -2vw;
	left: 0vw;
	transform: rotate(80deg);
}

div.top-pin-text {
	font-family: Arial, Helvetica, sans-serif;
}
div.bottom-pin-text {
	font-family: Arial, Helvetica, sans-serif;
}


/* *********************************************************************** */
/* ************LED ELEMENTS************ */



div.led, div.led-2 {
	background-color: darkgrey;
}

div#led-ball, div#led-2-ball {
	position: absolute;
	border-radius: 50%;
	border: 1px solid black;
	height: 6vw;
	width: 6vw;
	box-sizing: border-box;
}
div#led-glow, div#led-2-glow {
	position: absolute;
	border-radius: 50%;
	border: 0 solid black;
	height: 8vw;
	width: 8vw;
	top: -1vw;
	left: -1vw;
	box-sizing: border-box;
	background-color: transparent;
	filter: blur(2vw);
	opacity: 0.8;
}

div#led-shank, div#led-2-shank {
	position: absolute;
	border-left: 1px solid black;
	border-right: 1px solid black;
	border-bottom: 1px solid black;
	top: 3vw;
	height: 6vw;
	width: 6vw;
	box-sizing: border-box;
}

div#filament, div#filament-2 {
	position: absolute;
	border-top: 0.5vw solid #4f4f4f;
	border-left: 0.5vw solid #4f4f4f;
	border-right: 0.5vw solid #4f4f4f;
	border-bottom: 0vw solid #4f4f4f;
	top: 4vw;
	left: 1.75vw;
	height: 4.48vw;
	width: 1.5vw;
}

div#led-wires, div#led-2-wires {
	position: absolute;
	top: 4vw;
	left: 1.75vw;
	height: 14vw;
	width: 1.5vw;
	border-bottom: 0vw solid black;
}

div#led-label, div#led-2-label {
	position: absolute;
	top: -1.5vw;
	width: 100%;
	text-align: center;
}


/* *********************************************************************** */
/* ************BUTTON AND HAND************ */

/* ************BUTTON************ */
div#button, div#button-2 {
	position: absolute;
 	height: 2vw;
	width: 4vw;
	bottom: 2vw;
	background-color: red;
	border: 1px solid black;
	transform-origin: 100% 100%;
	will-change: transform;
}
div#button {
	right: 3vw;
}
div#button-2 {
	right: 8vw;
}


div#button-base, div#button-2-base {
	position: absolute;
	bottom: 1vw;
	width: 8vw;
	height: 1vw;
	color: white;
	text-align: center;
	background-color: black;
}
div#button-base {
	right: 1vw; 
}
div#button-2-base {
	right: 6vw;
}

@keyframes change-button-animation {
	0%   { transform: scale(1,1); }
	50%  { transform: scale(1,0.25); }
	100% { transform: scale(1,1); }
}

@keyframes change-button-animation-again {
	0%   { transform: scale(1,1); }
	50%  { transform: scale(1,0.25); }
	100% { transform: scale(1,1); }
}

div.change-button {
	animation-name: change-button-animation;
	animation-duration: 0.5s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	animation-timing-function: linear;
}

div.change-button-again {
	animation-name: change-button-animation-again;
	animation-duration: 0.5s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	animation-timing-function: linear;
}


/* ************HAND************ */
div#hand, div#hand-2 {
	z-index: 5;
	position: absolute;
	bottom: 4vw;
	will-change: transform;
}
div#hand {
	right: 4vw; 
}
div#hand-2 {
	left: 4vw; 
}

img#hand-pic, img#hand-2-pic, img#hand-3-pic {
	width: auto;
	height: 10vh;
}
img#hand-2-pic {
	transform: scaleX(-1);
}

img#hand-3-pic {
	position: absolute;
	left: 4.5vh;
	top: 9vh;
}


/* ***ANIMATION FOR HAND 1*** */
@keyframes change-hand-animation {
	0%   {transform: rotate(0deg);}
	50%  {transform: rotate(25deg);}
	100% {transform: rotate(0deg);}
}

@keyframes change-hand-animation-again {
	0%   {transform: rotate(0deg);}
	50%  {transform: rotate(25deg);}
	100% {transform: rotate(0deg);}
}

div.change-hand {
	animation-name: change-hand-animation;
	animation-duration: 0.5s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	animation-timing-function: linear;
}

div.change-hand-again {
	animation-name: change-hand-animation-again;
	animation-duration: 0.5s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	animation-timing-function: linear;
}

/* ***ANIMATION FOR HAND 2*** */
@keyframes change-hand-2-animation {
	0%   {transform: rotate(0deg);}
	50%  {transform: rotate(-25deg);}
	100% {transform: rotate(0deg);}
}

@keyframes change-hand-2-animation-again {
	0%   {transform: rotate(0deg);}
	50%  {transform: rotate(-25deg);}
	100% {transform: rotate(0deg);}
}

div.change-hand-2 {
	animation-name: change-hand-2-animation;
	animation-duration: 0.5s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	animation-timing-function: linear;
}

div.change-hand-2-again {
	animation-name: change-hand-2-animation-again;
	animation-duration: 0.5s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	animation-timing-function: linear;
}



/* ************BUTTON TEXT************ */
div#button-text, div#button-2-text, div#button-3-text {
	text-align: center;
}





/* *********************************************************************** */
/* ************TEXT ELEMENTS************ */

div.small-label {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;	
}
div.medium-label {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 110%;
	font-weight: bold;
	padding: 1vh;
}
div.large-label {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 130%;
	font-weight: bold;	
}

div#page-title {
	margin-top: 1vh;
	margin-left: 1vh;
}

div#page-explainer {
	margin-left: 1vh;
}


/* *********************************************************************** */
/* ***************LCD ELEMENTS******************* */

div#lcd-frame {
	position: absolute;
	background-color: darkgreen;
	height: 19.75ch;
	width: 38.5ch;
	left: 8vw;
	top: 0ch;
	border: 1px solid black;
}

div#lcd-frame-label {
	position: absolute;
	top: 1ch;
	left: 16ch;
	color: white;
}

div#lcd-screen {
	position: absolute;
	background-color: lightgrey;
	border: 0.5ch solid black;
	height: 11.25ch;
	width: 30ch;
	left: 3.75ch;
	top: 3.75ch;
}

div.lcd-text {
	position: float;
	width: 100%;
	height: auto;
	font-color: black;
	font-size: 2.8125ch;
	margin: 0.75ch;
	font-family: "Lucida Console", Courier, monospace;
}

div#lcd-line-1 {
	left: 0;
	top: 0;
}
div#lcd-line-2 {
	left: 0;
	top: 50%;
}

div#chip-to-lcd-wire {
	position: absolute;
	top: 7.5vw;
	left: 2vw;
	height: 2vw;
	width: 6vw;
	border-top: 0vw solid black;
	border-right: 0vw solid black;	
}


/* *********************************************************************** */