/* RESET */
*,
*::after,
*::before{
    margin: 0;
    padding: 0;
    /* box-sizing: border-box; */
}

/* UTILITY COMPONENTS */
:root{
    font-size:62.5%;

/***** CUSTOM PROPERTIES *****/
    /* main color */
    --primary-color: white;
    /* secondary color */
    --secondary-color: rgb(240, 177, 230);
    /* tipo */
    font-family: Helvetica, sans-serif;
}

body{
    width: 100%;
    height: 100vh;

}
main{
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
     #foto_portada{
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: relative;

     }
     .tipografia{
        position: absolute;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

     }
     h1{
        font-size: calc(2.5rem + 5vw);
        color: var(--primary-color);
        font-weight: 100;

     }  
 
     a{
        font-size: calc(2rem + 6vw);
        color: var(--primary-color);
        font-weight: 700;

        animation: animacion 10S forwards;
        text-decoration: none;
     } 
         a:hover,
         a:active{
             color:var(--secondary-color);

            }
            @keyframes animacion{/* TITULO */
                0%{
                  transform: scale(0.5);
        
                }
                100%{
                  transform: scale(1.5);
                }
        
               }
     a#contact{
        font-size: 1.6rem;
        color: var(--primary-color);
        font-weight: 700;
        animation: none;
        text-decoration:underline;
        margin: 20px;

     } 
        a#contact:hover{
           color:var(--secondary-color);

        }
.social_media{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100px;
}
 .social_media svg{
    height: 20px;
    padding: 12px;
    width: auto;
}
   #icono{
    animation: none;
   }
   .social_media svg:hover{
    height: 25px;

   }