/* Importe de las fuentes */
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600&family=Merriweather:ital,wght@1,300&family=Ms+Madi&family=Updock&display=swap');
@import url('https://fonts.googleapis.com/css2? family= Dancing+Script:wght@600 & family= Merriweather:ital,wght@1,300 & family= Ms+Madi & family= Teko & family= Updock & display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600&family=Ms+Madi&family=Updock&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cookie&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cookie&family=Macondo&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Arima+Madurai:wght@100&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Supermercado+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@1&display=swap');

/*Formato general*/
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    color: #1a374d ;
    font-size: 1em;
    background-color: #b1d0e0;
    font-family: 'Merriweather', serif;
    text-align: justify;
}

/*Formato del header*/
header {
    background-color: #1a374d;
    color: #b1d0e0;;
    text-align: center;
    margin-bottom: 1em;
    padding: 1vh;
    font-family: 'DM Serif Display', serif;
    font-size: 3vh;
    position: fixed;
    width: 100vw;
    top: 0;
}

/* Diseño de la nav */
nav{
    margin-top: 10vh;
    margin-bottom: 3vh;
    padding: 1vh;
}

.botones {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    align-content: center;
    color: #1a374d;
    /*line-height: 1vh;*/
    font-family: 'Teko', sans-serif;
}

h1 {
    color: #1a374d;
    text-align: center;
    /* font-size: 13vh; */
    font-size: 13vmin;
    font-family: 'Great Vibes', cursive;
}


/* From uiverse.io by @satyamchaudharydev */
/* === removing default button style ===*/
.button {
    margin: 0;
    background: transparent;
    padding: 0;
    border: none;
  }
  
  /* button styling */
  .button {
    --border-right: 6px;
    --text-stroke-color: #1a374d;
    --animation-color: #1a374d;
    --fs-size: 1em;
    letter-spacing: 2px;
    text-decoration: none;
    font-size: var(--fs-size);
    font-family: "Arial";
    position: relative;
    text-transform: uppercase;
    color: transparent;
    -webkit-text-stroke: 1px var(--text-stroke-color);
  }
  /* this is the text, when you hover on button */
  .hover-text {
    position: absolute;
    box-sizing: border-box;
    content: attr(data-text);
    color: #1a374d;
    width: 0%;
    inset: 0;
    border-right: var(--border-right) solid var(--animation-color);
    overflow: hidden;
    transition: 0.5s;
    -webkit-text-stroke: 1px var(--animation-color);
  }
  /* hover */
  .button:hover .hover-text {
    width: 100%;
    filter: drop-shadow(0 0 23px var(--animation-color))
  }



main{
    margin: 2vw;
}

/* Diseño texto e imagen */
.presentacion {
    width: auto;
    display: flex;
    margin: auto;
    align-items: flex-end;
    justify-content: space-between;
}
h2 {
    color: #406882;
    text-align: left;
    /*font-size: 8vh; */
    font-size: 8vmin;
    font-family: 'Supermercado One', cursive;
}
.primer_parrafo, .segundo_parrafo, .tercer_parrafo, .cuarto_parrafo {
    color: #1a374d;
    font-family: 'Cookie', cursive;
    font-family: 'Arima Madurai', cursive;
    font-weight: bold;
    /* font-size: 2.7vh; */
    font-size: 2.7vmin;
}

/*  ORGANIZAR */
.texto_personal {
    width: 85vw;
    margin: auto;
    display: flex;
    flex-direction:row-reverse;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    margin-bottom: 1vh;
/*     padding: 6vh;
 */    overflow: auto;
}

/*Formato de la foto personal*/
.foto_personal {
    width: 20%;
}

.img_foto{
    width: 95%;
    max-width: 95%;
    height: auto;
}

/*texto personal*/
.personal{
    width: 80%;
}

/*Formato del pie de página*/
.pie_de_pagina {
    position: fixed;
    bottom: 0;
    width: 100vw;
    background-color: #1a374d;
    color:#b1d0e0;
    text-align: center;
    margin-top: 1vh;
    padding: 1vh;
    font-size: 2vh;
    font-family: 'DM Serif Display', serif;
}