@charset "UTF-8";


body{
background-color: powderblue;
background-image: url(images/stellame.png) ;
background-size: 30%;

} 

main{
width: 60%;
margin: auto;
}

header{

}

h1{
font-size: 4em;
text-align: center;
font-family: Impact;
background-color:rgba(181, 244, 255, 0.8);
padding: 1%;
 animation-name: dropin;
 animation-duration: 1s;
 animation-timing-function: ease-out;
}

section{
background-color:azure;
padding: 1%;
border:thin beige solid;
}

section img{
width: 40%;
margin-left: 30%;
}

#q2,#q3,#q4,#q5 {
	display: none;
}
#results{
	font-family: Impact;
	background-color: antiquewhite;
	font-size: 2em;
	text-align: center;
	padding: 1%;
}

h2{
font-size: 2em;
font-family: Impact;
text-align: center;
}

button{
font-size: 1.5em;
font-family: monospace;
width: 100%;
padding: 1%;
background-color: rgba(181, 244, 255, 0.8);
}

button:hover {
background-color: palegreen;
}

button:active {
	background-color: azure;
	color: azure;
}

@keyframes dropin{
  0%{
  	transform: translateY(-200%);
  }

  75%{
  	transform: translateY(50%);
  }

100%{
	transform: translateY(0);
}

}