/*fuentes importadas*/ 
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oleo+Script+Swash+Caps&display=swap'); 
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Dancing+Script&family=Oleo+Script+Swash+Caps&display=swap');
/*diseños generales*/ 
*{
    background-color:powderblue;
    color:black;
    font-family:'Oleo Script Swash Caps', cursive; 
}
h1{
    text-decoration: underline;
    text-align:center;
    font-family: 'Dancing Script', cursive; 
    font-size: 70px;
    color:royalblue;
}
/*formato de cabezera*/
.header{
    width: 100vw;
    background-color:aquamarine;
    color: black;
    position: fixed;
    top: 0vh;
}
/*propiedades del pie de pagina*/
footer{
    width: 100vw;
    background-color: aquamarine;
    color: black;
    position: fixed;
    bottom: 0vh;
    z-index: 50;
}
/*diseño nav*/
.botones{
    display:flex; /*organiza el contenido*/
    flex-direction:row; /*distribuye el contenido en linea*/
    width: 100vw; /*ancho del contenedor*/
    justify-content: space-around; /*distribuye el espacio sobrante*/
    align-items: center; /*alinea verticalmente*/}

/* From uiverse.io by @kirzin */
button {
    text-decoration: none;
    position: absolute;
    border: none;
    font-size: 14px;
    font-family: inherit;
    color: #fff;
    width: 9em;
    height: 3em;
    line-height: 2em;
    text-align: center;
    background: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
    background-size: 300%;
    border-radius: 30px;
    z-index: 1;
   }
   
   button:hover {
    animation: ani 8s linear infinite;
    border: none;
   }
   
   @keyframes ani {
    0% {
     background-position: 0%;
    }
   
    100% {
     background-position: 400%;
    }
   }
   
   button:before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    z-index: -1;
    background: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
    background-size: 400%;
    border-radius: 35px;
    transition: 1s;
   }
   
   button:hover::before {
    filter: blur(20px);
   }
   
   button:active {
    background: linear-gradient(32deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
   }



/*organizacion de texto e imagen*/
.presentacion{
    display: flex;
    flex-direction:row;
    width: 80vw;
    margin:auto;
}
.texto{
    /*formato del texto*/
    width:60%; 
    display:block;
    flex-direction:row;
}
.imagen{
    /*formato de la imagen*/
    width:10%;
}
.imagen_propia img{
    width: 100%;
}
.textoyfoto{
    width: 80vw;
    display: flex;
flex-direction: row;
}