/*fuentes para las letras */
@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&family=Patrick+Hand&display=swap');


/*color de fondo*/
body{background-color:  #39a2db /* lightgreen (viejo color utilizado) */;}
/*caracteristicas de la letra */
header{
    font-family: 'Patrick Hand', cursive;
    text-align: center  ;
    font-size: 30px;
}
h1{ /* titulo */
    font-size:  60px;;
    text-align:center;
    color:rgb(64, 28, 75);
    font-family: 'Indie Flower', cursive;
}
.alinear_flex{
    display:flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    margin-top: 1px;
}
main{ /* tanto imagen como texto */
    width: 80vw;
    display: flex;
    flex-direction: row;
     flex-wrap: nowrap; 
    justify-content: space-evenly; /* el espaccio entre conjuntos, o sea imagen y texto */
    align-items: center;    
    margin: auto;}
p{ /* texto pàrrafo */
    font-family: 'Patrick Hand', cursive;
    font-size: 25px;
    font-weight: 4vmin;
    width: 85%;
    
}
    footer { /* el 6to 1ra */
        font-family: 'Patrick Hand', cursive;
        font-size: 25px;
        align-items: center;
        display: flex;
        justify-content: center;
        bottom: 50px;
        /* margin-top: 100px;
        margin-left: 650px; */
    }
 .boton{
     font-size: 25px;
 }
     /* From uiverse.io by @Mike11jr */
.btn {
    width: 170px;
    height: 40px;
    font-size: 1.6em;
    cursor: pointer;
    background-color: #171717;
    color: #fff;
    border: none;
    border-radius: 5px;
    transition: all .4s;
    font-family: 'Patrick Hand', cursive;
   }
   
   .btn:hover {
    border-radius: 5px;
    transform: translateY(-10px);
    box-shadow: 0 7px 0 -2px #f85959,
     0 15px 0 -4px #39a2db,
     0 16px 10px -3px black;
   }
   
   .btn:active {
    transition: all 0.2s;
    transform: translateY(-5px);
    box-shadow: 0 2px 0 -2px #f85959,
     0 8px 0 -4px #39a2db,
     0 12px 10px -3px black;
   }
/* tamaño de la imagen*/
img{  /* imagen mía */
    width:35%; 
    height:50%;
    border-radius: 10px;
    border: 5px solid salmon;

}