.poppins-thin {font-family: "Poppins", sans-serif; font-weight: 100; font-style: normal;}
.poppins-extralight {font-family: "Poppins", sans-serif; font-weight: 200;font-style: normal;}
.poppins-light {font-family: "Poppins", sans-serif; font-weight: 300; font-style: normal;}
.poppins-regular {font-family: "Poppins", sans-serif; font-weight: 400; font-style: normal;}
.poppins-medium {font-family: "Poppins", sans-serif; font-weight: 500; font-style: normal;}
.poppins-semibold {font-family: "Poppins", sans-serif; font-weight: 600; font-style: normal;}
.poppins-bold {font-family: "Poppins", sans-serif; font-weight: 700; font-style: normal;}
.poppins-extrabold {font-family: "Poppins", sans-serif; font-weight: 800; font-style: normal;}
.poppins-black {font-family: "Poppins", sans-serif; font-weight: 900; font-style: normal;}
.poppins-thin-italic {font-family: "Poppins", sans-serif; font-weight: 100; font-style: italic;}
.poppins-extralight-italic {font-family: "Poppins", sans-serif; font-weight: 200; font-style: italic;}
.poppins-light-italic {font-family: "Poppins", sans-serif; font-weight: 300; font-style: italic;}
.poppins-regular-italic {font-family: "Poppins", sans-serif; font-weight: 400; font-style: italic;}
.poppins-medium-italic {font-family: "Poppins", sans-serif; font-weight: 500; font-style: italic;}
.poppins-semibold-italic {font-family: "Poppins", sans-serif; font-weight: 600; font-style: italic;}
.poppins-bold-italic {font-family: "Poppins", sans-serif; font-weight: 700; font-style: italic;}
.poppins-extrabold-italic {font-family: "Poppins", sans-serif; font-weight: 800; font-style: italic;}
.poppins-black-italic {font-family: "Poppins", sans-serif; font-weight: 900; font-style: italic;}


body {
	font-family: "Poppins", sans-serif; font-weight: 500; font-style: normal;
	background: rgb(96,17,124);
	background: linear-gradient(180deg, rgba(33,13,57,1) 0%, rgba(96,17,124,1) 100%);
	background-attachment: fixed;
	color: #fff;
	height: 100%;
	width: 100%;
	/*position: fixed;*/
}
main {
	height: 100%;
	width: 100%;
}
main > div {
    min-height: 100vh;
}
@media (max-width: 768px) {
	h1.f50 {font-size:36px;}
}
.container {
	padding: 0;
}
.btn {
    padding: 10px 30px;
    border-radius: 25px;
	color: #fff;
}
.btn:hover {cursor: pointer;}
.btn_morado {background: #E43EFF;}
.btn_morado:hover {background: #210d39;}
a.btn_morado {text-decoration: none !important;}


.inicio {
    height: 100%;
    width: 100%;
    background-image: url(../img/fondo1.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
@media (max-width: 767px) {
	.inicio {padding: 0 2rem !important;}
}
.sombrero {
	max-width: 400px;
	width: 50%;
	margin: 35px;
}
.inicio p {
  max-width: 800px;
  margin: auto;
}
.logo {
	width: 125px;
	margin-bottom:20px;	
}

.preguntas {overflow-y: auto;}
@media (max-width: 767px) {
	.preguntas {
		padding: 0 !important;
		height: 100%;
	}
}
.preguntas .p_titulo {
	color: #5E2C9D;
	margin-bottom: 30px;
}
@media (max-width: 767px) {
	.preguntas .p_titulo {
		font-size: 20px;
	}
}
.preguntas .p_contador {
	border: 2px solid #8B3EFF;
	border-radius: 25px;
	padding: 10px 25px;
	width: auto;
	margin: auto;
}
.row {
	width: 100%;
	margin: 0 !important;
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
@media (max-width: 768px) {
	.div_img {
		padding: 0 0 50px !important;
	}
}
@media (min-width: 768px) {
	.preguntas .img-fluid {border-radius: 25px;}
}
@media (max-width: 768px) {
	.preguntas .text-start {padding: 0 30px !important;}
}
.preguntas .row p {color: #D08AF0;}
.preguntas td {
    vertical-align: baseline;
	font-size: 15px;
	font-weight: 400;
	color: #EFE4FF;
}
.preguntas .alert.alert-danger {
    --bs-alert-color: #ea868f;
    --bs-alert-bg: #2c0b0e;
    --bs-alert-border-color: #842029;
	padding: 10px;
}
@media (max-width: 768px) {
	.preguntas .container-fluid {padding-top: 70px !important;}
}
.resultado {
    height: 100%;
    width: 100%;
	background-attachment: fixed;
}
.resultado.gryffindor {
	background: #7C1111;
	background: linear-gradient(180deg, #390D0D 0%, #7C1111 100%);
}
.resultado.ravenclaw {
	background: #115C7C;
	background: linear-gradient(180deg, #0D1739 0%, #115C7C 100%);
}
.resultado.hufflepuff {
	background: #E5A500;
	background: linear-gradient(180deg, #96460C 0%, #E5A500 100%);
}
.resultado.slytherin {
	background: #305D14;
	background: linear-gradient(180deg, #11240C 0%, #305D14 100%);
}
@media (max-width: 768px) {
	.resultado > div {padding-top: 15px !important;}
	.resultado h2 {margin-bottom:30px;}
}
.resultado .casa {
	max-width: 430px;
	width: 50%;
}
.resultado .tabla_resultados div {
	display: inline;
	margin: 0 10px;
}
.resultado .tabla_resultados div span {
	font-size: 40px;
	vertical-align: sub;
	margin: 0 5px;
}
.resultado .tabla_resultados div span.rojo {color: #FF0000;}
.resultado .tabla_resultados div span.azul {color: #00B3FF;}
.resultado .tabla_resultados div span.amarillo {color: #FFB800;}
.resultado .tabla_resultados div span.verde {color: #0BE06D;}
@media (max-width: 768px) {
	.resultado .btn {margin-top: 30px !important;}
}
.btn_rojo {
	background: #FF3E3E;
	color: #fff;
}
.btn_rojo:hover {background: #390D0D;}
.btn_azul {
	background: #3EA2FF;
	color: #fff;
}
.btn_azul:hover {background: #0D1739;}
.btn_amarillo {
	background: #FFD600;
	color: #000;
}
.btn_amarillo:hover {background: #96460C;}
.btn_verde {
	background: #0BE06D;
	color: #fff;
}
.btn_verde:hover {background: #11240C;}

.resultado .tabla_resultados div.c4 {margin-right: 0;}
.resultado .tabla_resultados div.c1,
.resultado .tabla_resultados div.c1 span {
    margin-left: 0;
}
.c_g {color:#FF0000;}
.c_r {color:#00B3FF;}
.c_h {color:#FFB800;}
.c_s {color:#0BE06D;}

.f14 {font-size: 14px;}
.f15 {font-size: 15px;}
.f18 {font-size: 18px;}
.f20 {font-size: 20px;}
.f30 {font-size: 30px;}
.f50 {font-size: 50px;}
.pb30 {padding-bottom:30px;}
.pb50 {padding-bottom:50px;}
.pb100 {padding-bottom:100px;}
.pt50 {padding-top:50px;}
.pt100 {padding-top:100px;}
.mb20 {margin-bottom: 20px;}
.mt20 {margin-top: 20px;}
.mt50 {margin-top: 50px;}