body {background-image: url('../img/1024x640.jpg');
	background-size: cover;
 	height: 100%;
 	margin: 0;
  padding: 0;
  box-sizing: border-box; 
 	}

html {
  margin: 0;
  padding: 0;
}

@font-face {
  font-family: "Century Gothic";
  src: url('gothic2.ttf') format('truetype');
	}
	
@font-face {
  font-family: "Century Gothic Bold";
  src: url('gothicb.ttf') format('truetype');
	}
       
.container {
  align-items: center;
  height: 95vh;
	}

#tpq {
	opacity:0;
}

.mes {
	display:none;
	width: 100%;
  height: 100vh; 
  height: 100dvh;
  font-size:4vh;
  background: linear-gradient(135deg, #5077fe 0%, #0151eb 100%); /* Visual test */
  color: white;
  display: flex;
 	align-items: center; 
  justify-content: center;
  place-items: center;
  text-align:center;
  }	  

.mes p {
	font-family: "Century Gothic Bold";
	margin:auto;
	padding:12vh 0;
	display: grid;
  justify-content: center;
  place-items: center;
  text-align:center;
}

#mesa {
	display:none;
}

.topbar {
	background:linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 33%,rgba(0,0,0,0.4) 33%, rgba(0,0,0,0.4) 66%, rgba(0,0,0,0) 66%, rgba(0,0,0,0) 100%);
	width:100vw;
	text-align:center;
	overflow:hidden;
	position:absolute;
	top:1vh;
	display:none;
  }

.textbit {
	margin:auto;
	text-align:center;
	padding-top:21vh;
	}

.textbit a {
	color:black;
	text-decoration: none;
	font-weight:bold;
	font-size: 2vw;
  font-family: "Century Gothic Bold";
}

#textbit a {
	color:black;
	text-decoration: none;
	font-weight:bold;
	font-size: 2vw;
  font-family: "Century Gothic Bold";
 }

.controw {
	display:grid;
	justify-content: center;
  align-items: center;
  height:2vh;
  z-index:6;
	}

.buttonbit, .againbit {
  grid-column: 1;
  grid-row: 1;
}

.buttonbit {
	margin:auto;
	padding:2vw;
	display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 2vh;
  justify-content: center;
	text-align:center;
	opacity:0;
	//z-index:1;
	}
	
.buttonbit1, .buttonbit2 {
	display:flex;
	height:12vh;
	opacity:0;
	max-width: fit-content;
  margin-inline: auto;
  text-align: center; 
}

.againbit {
	display:flex;
	text-align:center;
	max-width: fit-content;
  margin-inline: auto;
	height:12vh;
	opacity:0;
	display:none;
	}
		
.button01 {
	height:8vh;
	width:30vw;
	place-self: center;
	}

.button03 {
	height:8vh;
	width:30vw;
	place-self: center;
	}
	
.button02 {
	height:8vh;
	width:30vw;
	place-self: center;
	}

.button04 {
	height:8vh;
	width:30vw;
	place-self: center;
	}

.button05 {
	height:8vh;
	width:30vw;
	place-self: center;
	}
	
.button06 {
	height:8vh;
	width:30vw;
	place-self: center;
	}
		
.bottombar {
	align-content:end;
	position:absolute;
	bottom:0;
	width:100vw;
	overflow:hidden;
	text-align:center;
	background:linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 33%,rgba(0,0,0,0.4) 33%, rgba(0,0,0,0.4) 66%, rgba(0,0,0,0) 66%, rgba(0,0,0,0) 100%);
	display:none;
	}
	
.startbutton {
  height: 6vh;
  width: 7vw;
  font-size: 2vw;
  font-family: "Century Gothic Bold";
  border-radius: 7vh;
  background:linear-gradient(gray,silver);
  color: black;
  border:0;
  position:relative;
  }

.startbutton::before {
  content: '';
  border-radius: 7vh;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background: linear-gradient(silver,gray);
  margin: -5px;
	}

.startbutton:hover {
	background:linear-gradient(silver,gray);
	cursor: pointer;
	}
	
.startbutton:hover:before {
	background:linear-gradient(gray,silver);
	}

.answerbutton {
  height: 8vh;
  width: 25vw;
  font-family: "Century Gothic Bold";
  font-size: 1.5vw;
  border-radius: 8vh;
  background:linear-gradient(gray,silver);
  color: black;
  border:0;
  position:relative;
  margin-bottom:4vh;
	}

.answerbutton::before {
  content: '';
  border-radius: 8vh;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background: linear-gradient(silver,gray);
  margin: -5px;
	}

.answerbutton:hover {
	background:linear-gradient(silver,gray);
	}

.answerbutton:hover:before {
	background:linear-gradient(gray,silver);
	}

.answer2button {
  height: 8vh;
  width: 11vw;
  font-family: "Century Gothic Bold";
  font-size: 1.7vw;
  border-radius: 8vh;
  background:linear-gradient(gray,silver);
  color: black;
  border:0;
  position:relative;
  margin-bottom:4vh;
	}

.answer2button::before {
  content: '';
  border-radius: 8vh;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background: linear-gradient(silver,gray);
  margin: -5px;
	}

.answer2button:hover {
	background:linear-gradient(silver,gray);
	cursor: pointer;
	}

.answer2button:hover:before {
	background:linear-gradient(gray,silver);
	}

.textbit p {
	margin-top:1vh;
	font-size: 2vw;
	padding:1vh 7vw 2vw 7vw;
	color:yellow;
	font-family: "Century Gothic";
	}

.textbit img {
	text-align:center;
	width:28vw;
	}

.button {
  background:linear-gradient(#153772, #1e4cc7);
  border: 3px solid black;
  color: white;
  width:7vw;
  height:7vw;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 2vw;
  font-weight:bold;
  margin: 14px 7px;
  border-radius: 50%;
  font-family: "Century Gothic Bold";
  }

.button:hover {
  background:linear-gradient(#1e4cc7, #153772);
  cursor: pointer;
  color:white;
  border: 3px solid white;
  box-shadow: 0 0 2px 2px #fff, 0 0 4px 4px #b4b2b8, 0 0 7px 7px #7a796e;
  }

.button:focus {background:linear-gradient(#1e4cc7, #153772);
	color:white;
	border: 3px solid white;
	box-shadow: 0 0 2px 2px #fff, 0 0 4px 4px #b4b2b8, 0 0 7px 7px #7a796e;
	}
	
/*@media only screen and (orientation:landscape) {
  #turn { display:none; }
  #textbit { display:block; }	
}

@media only screen and (orientation:landscape) {
  #turn { display:none; }
  #textbit { display:block; }	
}

@media only screen and (orientation:portrait) {
	#turn { display:block; }
  #textbit { display:none; }
}
*/