@import url('https://fonts.googleapis.com/css2?family=Poiret+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Handlee&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kalam&display=swap');
*{
    margin: 0%;
    padding: 0%;}
html{scroll-behavior: smooth;}
/*cabecera*/
.header{ 
text-align: center;
font-size: 6vh;
background-color: #86216C ;
background: rgba(99, 8, 91, 0.445);font-family:"Poiret One";
color:white;
width: 100vw;}
.menu{
height: 8vh;
width: 100vw;
font-family:"Handlee";
font-size: 3vh;}
.menu ul{
width: 100vw;
display: flex;
justify-content: space-evenly;
height: 8vh;
align-items: center;}
.menu ul a{
color:#86216C;
text-decoration: none;
font-family: "Handlee";}
.menu ul a:hover{
color:#FFFFFF  ;}
/*imagen principal, de presentación*/
img {
width: 13vw;
height: 13vw;
max-width: 25vh;max-height: 25vh;
object-fit: cover;
border-radius: 50%;
border: 0.5vh solid #86216C;
display: block;
margin: auto;
margin-top: 4vh;}
/*cuerpo del anuario*/
body{
background: url(https://img.rawpixel.com/s3fs-private/rawpixel_images/website_content/rm281-nunny-015-f.jpg?w=1000&dpr=1&fit=default&crop=default&q=65&vib=3&con=3&usm=15&bg=F4F4F3&ixlib=js-2.2.1&s=b6d5c6759617dcb1a756a9617c17814b);
background-size: 100%;
background-attachment: scroll;}
.bloque{
background: linear-gradient(#F4E2EF(180, 166, 181, 0.5),#F4E2EF (180, 166, 181, 0.5));
margin-left: 5vh;
margin-right: 5vh;
margin-top: 4vh;
padding-bottom: 3vh;}
.section{
margin: 8vh 0;}
h2{
font-family: "Poiret One";
font-size: 5vh;
color: #F4E2EF;
padding-left: 1vh;
background-color:#86216C;
background: rgba(99, 8, 91, 0.445);
text-decoration: none;
border: solid #F4E2EF 0.2vh; 
text-align: center;}
p{
padding-left: 2vh;
font-size: 2.5vh;
margin-top: 1vw;
font-family: "Kalam";
color: #86216C;
background:rgba(245, 214, 243, 0.685);}
/*acá empieza la galeria de fotos*/
:root { --separa: 0.1vh; }
* { 
box-sizing: border-box;
transition: all 0.3s;}
.galeria {
max-width: 100%;
line-height: 0;
padding: var(--separa);
padding-right: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-around;}
.item {
padding: var(--separa);
width: 45vh;}
.item img {
max-width: 100vh;
height: 100vh;
opacity: 1;}
.item img:hover {
opacity: 1;
cursor: pointer;}
.modal{
display: none;}
.modal:target {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100%;
display: flex;
background-color: rgba(8, 0, 12, 0.562);}
.imagen {
margin: auto;
width: 100vh;
display: flex;
justify-content: center;
align-items: center;}
.imagen a { margin: 0 50vh;}
.imagen img {
max-width : 100%;
max-height: 100%;
width: 100%;
height: 100%;
position: relative;}
/*cruz para salir de la galeria*/
.imagen a:nth-child(2)::after {
content: "X";
width: 10vh; height: 10vh;
line-height: 10vh;
text-align: center;
font-size: 5em;
border: 0.1vh solid hsla(0, 0%, 0%, 0.3);
background: hsla(0, 0%, 0%, 0.5);
color: hsla(0, 100%, 50%, 0.5);
position: absolute;
top: 2vh;left: 2vw;
z-index: 1;}
.imagen a:nth-child(2) {
margin: 0;
height: 100%;}
.ant,.sig {
width  : 10vh; height: 10vh;
border : 5vh solid transparent;}
.ant { border-right: 6vh solid hsla(0, 100%, 100%, 0.8); }
.sig { border-left: 6vh solid hsla(0, 100%, 100%, 0.8); }
.ant:hover { border-right: 6vh solid hsla(295, 65%, 36%, 0.8); }
.sig:hover { border-left: 6vh solid hsla(298, 69%, 30%, 0.8); }
/*acá termina la galería*/
/*imagenes del futuro*/
.neuro {
margin: 5vh;
max-width: 100vh;
max-height: 100vh;
width: 40vh;
height: 40vh;
border color: 3vh;
border-radius: 0;}
.art {
margin: -45vh;
margin-left: 55vh;
max-width: 100vh;
max-height: 100vh;
width: 40vh;
height: 40vh;
border color: 3vh;
border-radius: 0;}
.medi{
margin: 5vh;
margin-left: 105vh;
max-width: 100vh;
max-height: 100vh;
width: 40vh;
height: 40vh;
border color: 3vh;
border-radius: 0;}
.viaje{ 
margin-top: -45vh;
margin-bottom: -50vh;
margin-right: 5vh;
max-width: 100vh;
max-height: 100vh;
width: 40vh;
height: 40vh;
border color: 3vh;
border-radius: 0;}
/*datos personales*/
.myButton {
box-shadow:inset 0px 1px 0px 0px #86216C;
background:linear-gradient(to bottom,#F4E2EF 5%, #F4E2EF 100%);
background-color:#490638;
border-radius:10vh;
border:0.2vh solid #86216C;
display:inline-block;
cursor:pointer;
color:#86216C;
font-family:"kalam";
font-size:2.5vh;
padding: 1.5vh;
margin: 1%;
margin-left: 16%;}
.myButton:hover {
background:linear-gradient(to bottom, #c57eb3 5%,  #ec8ed5 100%);
background-color:#FFFFFF;}
/*cierre del cuerpo*/
/*pie del anuario*/
footer{
background-color:#86216C ;
text-align: center;
margin-top: 50vh;}
/*fin*/