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: 8vh;
}
div#circuit-body-content {
	height: 70vh;
}
div#circuit-footer-content {
	height: 10vh;
	margin-top: 2vh;
}



/* *********************************************************************** */
/* ************SELECT************ */

select {
	position: relative;
	top: 0.5vh;
	left: 0.5vh;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 110%;
}

/* *********************************************************************** */
/* ************INSTRUCTIONS************ */

span#instructions-container {
	display: inline-block;
}
span#instructions-block {
	margin-top: 0.5vh;
	margin-left: 2vw;
	margin-right: 2vw;
}
span.instructions {
	display: inline;
	position: relative;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 120%;
	font-weight: bold;
	color: #0B0B3B;
}


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

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

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

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

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

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

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: 28vw;
	top: 2vw;
	height: 9vw;
	width: 6vw;
}

div#timing-diagram-container {
	background-color: white;
	position: absolute;
	left: 50vw;
	width: 48vw;
	top: 8vh;
	height: 45vh;
}

div#button-graph-container, div#led-1-graph-container, div#led-2-graph-container {
	border-left: 0.5vh solid black;
	border-bottom: 0.5vh solid black;
	position: relative;
	right: -1vw;
	margin-bottom: 1vh;
	margin-left: 1vh;
	height: 10vh;
	width: 44vw;
	box-sizing: content-box;
	overflow: hidden;
}

/* GRAPH PIXEL CONTAINERS */
div.top-row, div.bottom-row {
	position: absolute;
	height: 3vh;
	width: 100%;
	will-change: transform;
}
div.top-row {
	border-top: 1px solid red;
	top: 2vh;
}
/* graph pixels */
div.bottom-row {
	border-bottom: 1px solid blue;
	top: 5vh;
}

div#button-graph-container {

}
div#led-1-graph-container {
	margin-top: 2vh;
}
div#led-2-graph-container {

}



div#code-container {
	background-color: #F2F5A9;
	position: absolute;
	top: 53vh;
	left: 50vw;
	height: 47vh;
	width: 48vw;
}

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 {
	border-top: 0 solid black;
	border-bottom: 0 solid black;
	border-right: 0 solid black;
	top: 0vw;
	left: 12.75vw;
	height: 7vw;
	width: 1vw;
}

div#ground-top-line {
	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 {
	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 {
	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 {
	border-bottom: 0 solid black;
	border-right: 0 solid black;
	top: 5vw;
	left: 7.5vw;
	height: 7vw;
	width: 5vw;
}

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

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

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

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

div.resistor {
	position: absolute;
	background-color: #886A08;
	border-radius: 20%;
	border: 1px solid black;
	top: 20%;
	left: -0.75vw;
	height: 3vw;
	width: 1vw;
	box-sizing: border-box;
}

div#led-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.5vw;
}
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 {
	background-color: darkgrey;
}

div#led-ball {
	position: absolute;
	border-radius: 50%;
	border: 1px solid black;
	height: 6vw;
	width: 6vw;
	box-sizing: border-box;
}
div#led-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 {
	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 {
	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 {
	position: absolute;
	top: 4vw;
	left: 1.75vw;
	height: 14vw;
	width: 1.5vw;
	border-bottom: 0vw solid black;
}

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


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

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

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

@keyframes shrink-button-animation {
	from {transform: scale(1,1);}
	to {transform: scale(1,0.25);}
}

@keyframes grow-button-animation {
	from {transform: scale(1,0.25);}
	to {transform: scale(1,1);}
}

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

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

img#hand-pic {
	width: auto;
	height: 10vh;
}

@keyframes rotate-hand-down-animation {
	from {transform: rotate(0deg);}
	to {transform: rotate(25deg);}
}

@keyframes rotate-hand-up-animation {
	from {transform: rotate(25deg);}
	to {transform: rotate(0deg);}
}

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


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


/* *********************************************************************** */
/* ************GRAPH ELEMENTS************ */

div.graph-pixel {
	float: left;
	top: 0vh;
	left: 0vw;
	height: 100%;
	width: 4.1666667%;
	box-sizing: border-box;
}

@keyframes move-graph-pixels-animation-1 {
	from {transform: translate(0%);}
	to {transform: translate(-4.1666667%); }
}

@keyframes move-graph-pixels-animation-2 {
	from {transform: translate(0%);}
	to {transform: translate(-4.1666667%); }
}

div.move-graph-pixel-1 {
	animation-name: move-graph-pixels-animation-1;
	animation-duration: 0.25s;
	//animation-delay: 0.125s;
	animation-direction: normal;
	animation-iteration-count: infinite;
	animation-fill-mode: forwards;
	animation-timing-function: linear;
	//animation-timing-function: ease-in-out;
	box-sizing: border-box;
}
div.move-graph-pixel-2 {
	animation-name: move-graph-pixels-animation-2;
	animation-duration: 0.25s;
	//animation-delay: 0.125s;
	animation-direction: normal;
	animation-iteration-count: infinite;
	animation-fill-mode: forwards;
	animation-timing-function: linear;
	//animation-timing-function: ease-in-out;
	box-sizing: border-box;
}


/* ************GRAPH TEXT************ */
div#timing-diagram-label {
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
}

div#button-graph-label, div#led-1-graph-label, div#led-2-graph-label {
	position: absolute;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
}
div#button-graph-label {
	left: -3.5vw;
	top: 7vh;
}
div#led-1-graph-label {
	left: -3vw;
	top: 18.5vh;
}
div#led-2-graph-label {
	left: -3vw;
	top: 30vh;
}


div.hi-V, div.lo-V {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 80%;
	position: absolute;
	left: 0.25vw;	
}

div.hi-V {
	color: red;
}
div#button-5V {
	top: 5.75vh;
}
div#led-1-5V {
	top: 18vh;
}
div#led-2-5V {
	top: 29.5vh;
}

div.lo-V {
	color: black;
}
div#button-0V {
	top: 12vh;
}
div#led-1-0V {
	top: 24vh;
}
div#led-2-0V {
	top: 35.5vh;
}


/* ************LINES************ */

div#now-line {
	position: absolute;
	bottom: 4.5vh;
	left: 42.5vw;
	height: 37vh;
	border-left: 0.15vw dashed black;
}

div#now-label {
	position: absolute;
	bottom: -1.5vh;
	left: -1.5vw;
}


/* *********************************************************************** */
/* ************CODE EXPLANATIONS************ */

div#code-explanation {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
	padding: 0.75vw;
}

div#code-explanation p {
	margin-bottom: 0.75vw;
}


/* *********************************************************************** */
/* ************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;	
}


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