@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');

html{
	font-family: 'Oswald';
}

body {
	margin:0;
}

h1 {
	text-align: center;
	padding: 2vh;
	font-size: 250%;
}

h2 {
	font-family: Lato;
	font-size: 200%
}

.content{
	position: relative;
	min-height: 100vh;
}

.juego {
	display:flex;
	position: relative;
}

.cartel {
	background: #f8d90f;
	width:100%;
	font-family: Lato;
	padding:2%;
	margin-top: 3%
}

.questions{
	width:50%;
	/*background:#35b8ca;*/
	padding:2%;
	height: min-content;
	position:sticky;
	top:0;
	text-align:center;
	display:grid;
}

.pregunta {
	width:100%;
	border: 1px solid #35b8ca;
	background:transparent;
	padding:2%;
	margin:1%;
	transition:.5s;
	cursor:pointer;
	font-family: Lato;
	font-weight: lighter;
	font-size: 120%;
}

.pregunta:hover{
	background: #35b8ca;
	color:white;
}

.preguntaacierto {
	width:100%;
	border: 1px solid #d3dd18;
	background:#d3dd18;
	padding:2%;
	margin:1%;
	transition:.5s;
	cursor:pointer;
	font-family: Lato;
	font-weight: lighter;
	font-size: 120%;
}

.preguntaerror {
	width:100%;
	border: 1px solid #FE7A15;
	background:#FE7A15;
	padding:2%;
	margin:1%;
	transition:.5s;
	cursor:pointer;
	font-family: Lato;
	font-weight: lighter;
	font-size: 120%;
}

/**** Comprobar respuesta ****/
.comprobarrespuesta, .descargartexto {
  padding: 2%;
  margin:2%;
  margin-top:3%;
  background: white;
  outline: none !important;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  border: 2px solid #35b8ca;
  z-index: 1;
  width: 30%;
  color:#35b8ca;
  align-self:center;  
  font-weight:bold;
  font-family: Lato;
	font-size: 120%;
	text-decoration:none;
}
.comprobarrespuesta {text-align:right}

.comprobarrespuesta:before,
/*.descargartexto:before,
.comprobarrespuesta:after,*/
.descargartexto:after {
  position: absolute;
  content: " ";
  z-index: -1;
  width: 25%;
  top: 50%;
  height: 2px;
  background: #35b8ca;
  transition: all 0.3s ease;
}
.comprobarrespuesta:before,
.descargartexto:before {
  left: -10%;
}
.comprobarrespuesta:after,
.descargartexto:after {
  right: -10%;
}
.comprobarrespuesta:hover,
.descargartexto:hover {
  background: #35b8ca;
  color: #fff;
}
.comprobarrespuesta:hover:before,
.descargartexto:hover:before {
  left: 0%;
}
.comprobarrespuesta:hover:after,
.descargartexto:hover:after {
  right: 0%;
}

/**** Boton siguiente ****/
.btn-siguiente {
  padding: 2%;
  margin:auto;
  margin-top:3%;
  background: white;
  outline: none !important;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  border: 2px solid #35b8ca;
  z-index: 1;
  width: 50%;
  color:#35b8ca;
  align-self:center;  
  font-weight:bold;
  font-family: Lato;
	font-size: 120%
}

.btn-siguiente:before,
.btn-siguiente:after {
  position: absolute;
  content: " ";
  z-index: -1;
  width: 25%;
  top: 50%;
  height: 2px;
  background: #35b8ca;
  transition: all 0.3s ease;
}
.btn-siguiente:before {
  left: -10%;
}
.btn-siguiente:after {
  right: -10%;
}
.btn-siguiente:hover {
  background: #35b8ca;
  color: #fff;
}
.btn-siguiente:hover:before {
  left: 0%;
}
.btn-siguiente:hover:after {
  right: 0%;
}

.botonesrespuesta{
	display:flex;
	justify-content:center;
}

.text{
	width:50%;
	/*background:#0191b4;*/
	padding:2%;
	font-weight:lighter;
	font-family: Lato;
	display:grid;
}

input {
	border:0;
	border-bottom: 2px solid black;
	font-family:Lato;
	font-size:100%;
	color:#0191b4
}

.error{
	border:0;
	border-bottom: 2px solid #fe7a15;
	color: #fe7a15;
}

.acierto {
	border:0;
	border-bottom: 2px solid #d3dd18;
	color: #d3dd18;
}

.footer{
	text-align:center;
	background: #FE7A15;
	padding:0% 0;
	position: absolute;
	bottom: -3%;
	width:100%;
	color:white;
}

.footer p a{
	color:white;
	transition:.5s;
}

.footer p a:hover{
	color:#F8D90F;
}