/***** basic styles *****/
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.feedback{
	color: red;
}

.hide{
	display: none;
}

.show{
	display: block;
	animation: show 1s;
}

video, img{
	max-width: 100%;
}


/***** text styles *****/

*, body{
	font-family: 'Open Sans', Arial, sans-serif;
	font-weight: 400;
}
body{
	background: black url('../img/tech.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	position: relative;
}
h1, h2, .number, button, .feedback, #status{
	font-family: 'Share Tech Mono', 'Open Sans', monospace;
}
h1{
	font-size: 50px;
	color: green;
}
h1, h2{
	padding: 15px 0;
}

label{
	margin-right: 10px;
}

/***** page styles *****/
.wrapper{
	background: white;
	padding: 50px;
	width: 60%;
	position: absolute;
	right: 20%;
	left: 20%;
	top: 200px;
	margin-bottom: 200px;
	box-shadow: 0 0 30px 1px black;

}

/***** button styles *****/
button{
	display: inline-block;
	padding: 10px;
	margin-top: 30px;
	margin-bottom: 30px;
	background: white;
	transition-duration: .5s;
	border: 1px solid green;
	color: green;
}
#play-again{
	margin-right: 10px;
}
/***** question styles *****/
div[class*='question-']{
	margin: 50px 0;
	padding-top: 1px;
	padding-bottom: 5px;
}
.number{
	font-size: 30px;
	background: black;
	color: white;
	padding: 10px;
	margin-right: 10px;
}
#page-two h3{
	margin: 20px 0;
}


/***** effects *****/
button:hover{
	background: green;
	color: white;
}
input[type=text]:focus, input[type=email]:focus{
	border: 1px solid black;
}
.invalid{
	border: 1px solid red;
}

input[type=radio]:checked + label {
	font-weight: 700;
}
.incomplete{
	border-left: 3px solid red;
	background: rgba(255,0,0,.1);
}

#fireworks{
	margin-top: 20px;
}



@keyframes show{
	from { opacity: 0; margin-top: -300px; }
	to { opacity: 1; margin-top: initial; }
}