/* fuentes */
@import url('https://fonts.googleapis.com/css2?family=Staatliches&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Calistoga&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cantora+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap');
a{
    color:black
}
/*formato del header*/
header{
 color:rgb(42, 118, 190);
font-family:'Lobster';
font-size: 2.9vw;
text-align: center;
border-style:solid;
border-color: rgb(24, 10, 145);
border-width: 0.3vw;
background-size:cover;
border-radius:2vw;
padding: 0.7vw;
}

/* configuración del nav*/
nav{
    display: flex;
    justify-content: space-around;
    
    }
/*formato del menú*/
 .item{
    font-family: 'Staatliches';
	background-color:#36b8c2;
	border-radius:2vw;
	font-size:2vw;
	padding:1.2vw 1vw;
	text-decoration:none;
    display: inline-block;
    list-style-type: none;
	cursor:pointer;
    position: relative;
    text-align: center;
    margin-right:5vw;
 }

/*botón para volver*/
.botonparavolver {
	font-family: 'Staatliches';
    font-size:1.5vw;
	background-color:#36b8c2;
	border-radius:3vw;
	display:inline-block;
	cursor:pointer;
	padding:0.5vw 1vw;
    position:fixed;
    bottom: 0;
    right: 0;
	margin-right: 1vw;
    margin-bottom: 2vw;
}

/*configuración del cuerpo de la página*/

/*imagen de fondo*/
body{
    background-image: url(../img/fondo.png);
    background-size:cover;
}
/*formato de presentación*/
h1{
    font-family: 'Calistoga';
    font-size:2vw;
    text-decoration-line: underline;
    text-decoration: underline rgb(211, 115, 190);
    font-style: oblique;
}
/*formato de los párrafos*/
p { 
    font-family:'Indie Flower';
    font-size: 1.6vw;
    color:black;
    font-weight: bold;
    
}
/*galería de fotos*/
img{
    width: 30%;
    margin:.5% auto;
    vertical-align: middle;
    transition: all 2s, transform .5s, box-shadow .5s; 
    cursor:pointer;
}
img:hover{
    box-shadow: 10px 10px 15px rgba(0,0,0,0.5);
    transform: scale(1.01);
}

img:focus{
    width:35%;
    transform: none;
    
}
@media only screen and (max-width:866px)
{
img{
width:40%;
}
img:focus{
width:45%;
}
}
@media only screen and (max-width:541px)
{
img{
width:100%;
margin: 20px 0;
}
img:focus
{
width:100%;
}
}
/*formato de intereses y contacto*/

.interesesycontactos
{font-size: 1.8vw; 
font-family: 'Fjalla One', sans-serif;   
text-decoration: underline;
text-decoration-style:double;
text-decoration-color: cornflowerblue;}

.redes{
    font-family:'Indie Flower';
    font-size: 1.6vw;
    color:black;
    font-weight: bold;
    margin-left:none;
    margin:0;
    padding: 0;
}

/*parrafos en misma columna: sobre mi*/
.box {
    overflow: hidden;
}
.content {
    line-height: 2vw;
    padding: 0 3vw;
    text-align: justify;
}
.left {
    float: left;
    width: 50%;
}
.left .content {
    border-right: 0.5vw solid #38a5e4;
}
.right {
    float: right;
    width: 50%;
}


/*footer*/
footer{
    background-color:rgb(228, 217, 70);
    text-align: center;
    font-family:'Lobster';
    font-size: 1.6vw;
}

/*formato imagen presentación*/
.fotodepresentacion
{width: 25vw;
}

/*formato collage futuro*/
.collagefuturo 
{width: 30vw;
display: block; 
margin: auto;
margin-bottom: 1vw;
}
/*formato hipervínculos*/
a:link, a:visited, a:active
{
    text-decoration:none;
}