*{
    margin: 0%;
    padding: 0%;
}
html{
    scroll-behavior: smooth;
}
.header{ 
    text-align: center;
    font-size: 6vh;
    background-color:rgb(95, 153, 230) ;
    background: rgba(8, 85, 99, 0.445);
    font-family:Georgia, 'Times New Roman', Times, serif;
    color:rgb(255, 255, 255);
   width: 100vw;
   background: url(
    https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQPPzukpMVY3Zj7lNSmsUun-_7NnqfcviFJZg&usqp=CAU
)
}
.menu{
    height: 8vh;
    width: 100vw;
    font-family:cursive;
    font-size: 3vh;
    background: url(
        https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQPPzukpMVY3Zj7lNSmsUun-_7NnqfcviFJZg&usqp=CAU
    )
}
.menu ul{
    width: 100vw;
    display: flex;
    justify-content: space-evenly;
    height: 8vh;
    align-items:center;
}
.menu ul a{
    color:rgb(255, 255, 255);
    text-decoration: none;
    font-family: "Handlee";
}

.menu ul a:hover{
    color:#FFFFFF  ;
}
img{
    width: 13vw;
    height: 13vw;
    max-width: 25vh;
    max-height: 25vh;
    object-fit: cover;
    border-radius: 50%;
    border: 0.5vh solid #0c94b6;
    display: block;
    margin: auto;
    margin-top: 1vh;
}
body{
    background: url(
        https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSkmJk-SnAXPjGrx-XO88AAZY-zvGYBGhpd3w&usqp=CAU
    );
    background-size: 100%;
    background-attachment: scroll;
}
.bloque{
    background: linear-gradient(rgb(196, 241, 255),#4863af (180, 166, 181, 0.5));
    margin-left: 5vh;
    margin-right: 5vh;
    margin-top: 4vh;
    padding-bottom: 3vh;
}

.section{
    margin: 5vh 0;
}




p{
    padding-left: 2vh;
    font-size: 2.5vh;
    margin-top: 1vw;
    font-family: "Kalam";
    color: #e2e7ec;
   background-color: cadetblue;
}

.myButton {
	box-shadow:inset 0px 1px 0px 0px #363636;
	background:linear-gradient(to bottom, #0f7280 5%, #12669e 100%);
	background-color:#1e84ac;
	border-radius:6px;
	border:1px solid #181717;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Georgia, 'Times New Roman', Times, serif;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffffff;
}
.myButton:hover {
	background:linear-gradient(to bottom, #0b5977 5%, #1d63b4 100%);
	background-color:#1978a3;
}

    
 .pie{
    background-color:#157da7 ;
    text-align: center;

}
.galeria {
    position: relative;
    width: 80%; /* Ancho a ocupar por la galería sobre el total disponible */
    overflow: hidden;
    margin: 20px auto;
    background-color: #000;
    box-shadow: 1px 1px 6px #000;
    }
    .galeria:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(https://mail.google.com/mail/u/0?ui=2&ik=7a66d31091&attid=0.3&permmsgid=msg-a:r-2991927931425809643&th=17bf531851956532&view=att&disp=safe&realattid=17bf531553d60cbf811); /* Fondo por defecto */
    -moz-background-size: cover;-webkit-background-size: cover;background-size: cover;
    ;
    }
    .imagen {
    position: relative;
    width: 15%; /* Ancho de la miniatura sobre el ancho total de la galería */
    padding-bottom: 15%; /* Idéntico al anterior para miniaturas cuadradas */
    background-position: 50% 50%;
    -moz-background-size: cover;-webkit-background-size: cover;background-size: cover;
    cursor: pointer;
    }
    .imagen:nth-of-type(1) {
    background-image: url(https://mail.google.com/mail/u/0?ui=2&ik=7a66d31091&attid=0.3&permmsgid=msg-a:r-4086439158972551374&th=17bf532d958a5425&view=att&disp=safe&realattid=17bf532a44efa6ccfd35);
    }
    .imagen:nth-of-type(2) {
    background-image: url(https://mail.google.com/mail/u/0?ui=2&ik=7a66d31091&attid=0.5&permmsgid=msg-a:r-2991927931425809643&th=17bf531851956532&view=att&disp=safe&realattid=17bf531555d46fe447f3);
    }
    .imagen:nth-of-type(3) {
    background-image: url(https://mail.google.com/mail/u/0?ui=2&ik=7a66d31091&attid=0.6&permmsgid=msg-a:r-2991927931425809643&th=17bf531851956532&view=att&disp=safe&realattid=17bf53155aeab568c608);
    }
    .imagen:nth-of-type(4) {
    background-image: url(https://mail.google.com/mail/u/0?ui=2&ik=7a66d31091&attid=0.4&permmsgid=msg-a:r-4086439158972551374&th=17bf532d958a5425&view=att&disp=safe&realattid=17bf532a49576ffb50d9);
    }
    .imagen:before {
    content: "";
    position: absolute;
    top: -700%; /* ((Nºimágenes*2)-1)*100*/
    left: 100%;
    width: 566%; /* (10000/ancho_imagen)-100 */
    height: 400%; /* Nºimagenes*100 */
    background-image: inherit;
    -moz-background-size: cover;-webkit-background-size: cover;background-size: cover;
    -moz-transition: all .8s ;-webkit-transition: all .8s ;transition: all .8s ;
    }
    .imagen:hover:nth-of-type(1):before {
    top: 0%; /* (Nº.nth-1)*(-100) */
    }
    .imagen:hover:nth-of-type(2):before {
    top: -0%; /* (Nº.nth-1)*(-100) */
    }
    .imagen:hover:nth-of-type(3):before {
    top: -200%; /* (Nº.nth-1)*(-100) */
    }
    .imagen:hover:nth-of-type(4):before {
    top: -300%; /* (Nº.nth-1)*(-100) */
    }
    
    