* {
    box-sizing: border-box;
}
html{
    height: 100%;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #738ee9;
    padding: 10px;
    height: 100%;
}


/* Header/Blog Title */
.header {
    padding-top: 5px;
    text-align: center;
    background: #f6efda;
}

.header h1 {
    font-size: 60px;
}



/* Imagenes */

@media only screen and (max-width: 649px){
    .cab_img{
        width: auto;
        height: 50px;
    }
    .grid-container {
        display: grid;
        grid-template-columns: 20% 65% 15%;
    }
}

@media only screen and (min-width:650px) and (max-width: 760px){
    .cab_img{
        width: auto;
        height: 100px;
    }
    .grid-container {
        display: grid;
        grid-template-columns: 20% 65% 15%;
    }
}

@media only screen and (min-width:761px) and (max-width: 1107px){
    .cab_img{
        height: 150px;
    }
    .grid-container {
        display: grid;
        grid-template-columns: 20% 70% 10%;
    }
}

@media only screen and (min-width: 1108px){
    .cab_img{
        width: auto;
        height: 200px;
    }
    .grid-container {
        display: grid;
        grid-template-columns: 30% 60% 10%;
    }
}


/* Style the top navigation bar */


.topnav {
    overflow: hidden;
    background-color: #333;
    height: 46px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.topnav .active {
    background-color: #ddd;
}
.topnav .active a{
    color: black;
}
@media screen and (max-width: 706px) {
    .topnav {
        flex-direction: column;
        align-items: flex-start;
        height: 322px;
    }

    .topnav .active a {
        width: 100%; /* Para que ocupen todo el ancho */
        box-sizing: border-box;
    }
    }
/* Style the topnav links */
.topnav label {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* Change color on hover */
.topnav label:hover {
    background-color: #ddd;
    color: black;
}

.topnav label a{
    color: white;
}
.topnav label:hover a{
    color: black;
}


/* Style the side navigation general*/
.sidenav {
    height: auto;
    margin-top: 10px;
    background-color: #111;
}

/* Side navigation links */
.sidenav a {
    color: white;
    padding: 16px;
    text-decoration: none;
    display: block;
}

@media screen and (max-width: 1020px) {
    .sidenav {
        flex-direction: column;
        align-items: flex-start;
    }

    .sidenav a {
        width: 100%; /* Para que ocupen todo el ancho */
        box-sizing: border-box;
    }
}

@media screen and (min-width: 1021px) {
    .sidenav {
        width: 10%;
        min-width: 111px;
        position: absolute;
    }
}



/* Change color on hover, sidenav */
.sidenav a:hover {
    background-color: #ddd;
    color: black;
}

/* Side navigation links */
.sidenav label {
    color: white;
    padding: 16px;
    text-decoration: none;
    display: block;
}

/* Change color on hover, sidenav2 */
.sidenav label:hover {
    background-color: #ddd;
    color: black;
}

/* Style the content */


@media only screen and (max-width: 445px){
    .footer{
        height: 342px;
    }
}
@media only screen and (min-width: 446px) and (max-width: 711px){
    .footer{
        height: 204px;
    }
}
@media only screen and (min-width: 712px) and (max-width: 863px){
    .footer{
        height: 158px;
    }
}
@media only screen and (min-width: 864px) and (max-width: 1550px){
    .footer{
        height: 112px;
    }
}
@media only screen and (min-width: 1551px){
    .footer{
        height: 66px;
    }
}

/* @media only screen and (min-width: 1108px){
    .content {
        margin-left: 10.5%;
    }
}

@media only screen and (max-width: 1107px){
    .content{
        margin-left: 112px;
    }

    
} */


form {
    max-width: 300px;
    margin: auto;
    }

    input, button {
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    }

    #mensaje-error {
    color: red;
    margin-top: 10px;
    }


.content {
    padding-top: 10px;
}

.entrada{
    width:100%;
    overflow:auto;
    background-color: #f6efda;
}

.entr_img{
    float:center;
    padding: 10px;

}

.backimg{
    width: 100%;
    height: 100%;
    padding: 20px;
    display: flex;
    justify-content: center;
    gap: 20px;
    align-items: center;
}

@media only screen and (max-width: 649px){
    .backimg img{
        /* display: block;  Ensure block-level behavior */
        margin-left: auto;
        margin-right: auto;
        height: 150px;
        border-radius: 10px;
    }
}

@media only screen and (min-width: 650px){
    .backimg img{
        /* display: block;  Ensure block-level behavior */
        margin-left: auto;
        margin-right: auto;
        height: 200px;
        border-radius: 10px;
    }
}

.entr_text{
    /* margin: auto; */
    background-color: #f6efda;
    padding: 1px 10px;
}

.entr_text h2,h1{
    text-align: center;
    font-family: "Times New Roman", Times, serif;
}

.entr_text h4{
    padding-left: 10%;
    font-family: "Times New Roman", Times, serif;

}

.entr_text p{
    text-indent: 20px;
    text-align: center;
    padding-left: 20%;
    padding-right: 20%;
    line-height: 1.2;
    word-spacing: 2px;
    font-family: "Times New Roman", Times, serif;
}


.fakeimg {
    background-color: #f6efda;
    width: 100px;
    height: 500px;
    padding: 20px;
}


/*estilo de los videos de youtube*/
.video-container {
    max-width: 800px;
    margin: 40px auto;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.video-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
}


/* Footer */
.footer {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 20px;
    /* Tiene que tener el mismo color que el sideNav */
    background-color: #111;
    bottom: 0;
}

.footer label{
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-family: "Times New Roman", Times, serif;
}

/* Change color on hover */
.footer label:hover {
    background-color: #ddd;
    color: black;
}

.footer label a{
    color: white;
}
.footer label:hover a{
    color: black;
}

/*Estilo del mapa */
.mapa-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
iframe {
    border: 0;
    border-radius: 10px;
}