* {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
}
html {
 font-size: 62.5%;
 background-color: rgb(241, 235, 235);
}
.hidden {
 display: none;
}
.top {
 width: 100%;
 height: 40px;
 background-color: white;
}


.top-ul {
 display: inline-flex;
 width: 100%;
 height: 40px;
 justify-content: center;
 margin: 10px;
}
.top-ul li {
 list-style: none;
}
.top-ul li a {
 text-decoration: none;
 text-decoration: none;
 margin: 10px;
 font-size: 1.5rem;
 opacity: 0.8;
}
.top-ul li a:link {
 color: black;
}
.top-ul li a:visited {
 color: black;
 opacity: 0.8;
}
.intro {
 width: 55%;
 height: auto;
 margin-top: 15px;
 border-radius: 20px;
 margin-left: 30px;
 background-color: white;
 border: 2px solid gainsboro;
 box-shadow: 2.5px 2.5px gainsboro;
 /* margin: 0 auto; */
}
.title-principal {
 text-align: justify;
 font-size: 3rem;
 font-weight: bold;
 margin: 20px;
 padding-top: 10px;
}
.parrafo-descripcion {
 width: 60%;
 margin: 20px;
 font-size: 1.8rem;
 font-weight: 300;
 text-align: justify;
 padding-top: 10px;
 padding-bottom: 20px;
}
.math-contain__in {
 width: 60%;
 height: auto;
}
.math,
.porcentajes,
.estadisticaB {
 width: 95%;
 height: auto;
 /* justify-content: center; */
 margin: 20px auto;
 display: flex;
}
#math{
 display: inline-flex;
 padding-left: 30px;

}
.math img {
 width: 300px;
 height: 300px;
 margin: 0 auto;
}
.porcentaje-contain{
 width: 50%;
}
.porcentaje-img__container {
 width: 500px;
 height: auto;
 display: flex ;
}
.porcentaje-img{
 width: 500px;
 height: 350px;
 
 margin: -20px auto;
}
/* .estadisticaB {
 flex-direction: column;
} */
.img-estadisticas {
 width: 30%;

}
.title-section {
 font-size: 2rem;
 margin: 10px;
}
.subT {
 font-size: 1.8rem;
 margin: 10px;
}
.atajos-geometria {
 margin-bottom: 10px;
}
.atajos-geometria button {
 width: 100px;
 height: 40px;
 font-size: 1.5rem;
 margin: 10px;
 text-decoration: none;
 background-color: white;
 border-color: white;
 border-radius: 10px;

}
.txt-desc {
 font-size: 1.5rem;
 margin-left: 10px;
}

.datos{
 width: 100px;
 height: 30px;
 margin: 10px;
 border-radius: 5px;
 border: 1px solid;
}
.datos::-webkit-inner-spin-button{
 -webkit-appearance: none;
}
.btn-generic {
 min-width: 100px;
 max-width: auto;
 height: 40px;
 margin: 0px 10px;
 border-radius: 10px;
 text-decoration: none;
 border-color: white;
 background-color: white;
}
.btn-generic2 {
 min-width: 100px;
 max-width: auto;
 height: 40px;
 margin: 10px 10px;
 border-radius: 10px;
 text-decoration: none;
 border-color: white;
 background-color: white;
}
.resp {
 margin: 10px;
}
.resp p {
 font-size: 1.5rem;
 margin-bottom: 5px;
}