body {
  font-family: "Montserrat", sans-serif;
  color: #454545;
  margin: 0px;
  padding: 0px;
  /*background-color: #f8f8f8 #4f2999;*/
  /*background-image: url('bkgd2.png');
  background-size: cover;*/
	display: flex;
	justify-content: center;
	align-items: flex-start;
}
.page {
	display: flex;
	flex-flow: column;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	min-width: 300px;
  max-width: 700px;
	background: radial-gradient( #4f2999 10%, transparent 70%);
	border-radius: 10%;
	padding: 10vw;
  position: absolute;
}
.ball, .button {
  margin: 0 auto;
  position:relative; 
  width:100%;
}

.ball {
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
}

.ball img {
	width: 100%;
	margin: 0;
	padding: 0;
}

.answer {
  position: absolute;
  width:16%;
	height: 20%;
  top:24%;
  left:39%;
	padding: 5%;
  /*margin-top:-60px;
  margin-left:-65px;*/
  font: 12px 'Open Sans', Helvetica, Arial, sans-serif;
  color: #222;
  text-transform: uppercase;
	background: radial-gradient(#ddd, transparent 70%);
	border-radius: 50%;
	display: flex;
	align-items:center;
	justify-content: center;
	color: #fff;
	
}

.button {
	display: flex;
	justify-content: center;
	align-content: center;
	margin: 0;
}

#questionButton {
  font: 20px 'Montserrat', Helvetica, Arial, sans-serif;
  border-radius: 5px;
  border: none;
  color: #f8f8f8;
  background-color: #00ccf5;
  padding: 10px ;
  display: block;
	margin-top: 10px;
  margin-bottom: 20px;
}

#questionButton{
	outline: none;
}

#questionButton:hover {
	background-color:#14d6fc;
}

#questionButton:active {
	transform: translateY(2px);
	background-color: #00d5ff;
}

header {
  padding-top: 0.25em;
  text-align: center;
	color: #444;
}
header span {
	color: #8043fa;	
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Montserrat", sans-serif;
}

h1 {
	margin: 0;
}

footer p {
  font-family: "Montserrat", sans-serif;
  text-align: center;
  text-transform: uppercase;
  font-size: 12px;
}

/*======================= TABLET STYLES ==============================*/

@media only screen and (min-width:768px) {
	.answer {
		font-size: 20px;
		top: 23%;
	}
	.page {
		top: -30px;
		
	}
}

/*======================= DESKTOP STYLES ==============================*/

@media only screen and (min-width:1200px) {
	.page {
		top: -60px;
	}
}