* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; 
    font-family: "Inter", sans-serif;
    text-decoration: none;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.app {
    display: flex; 
    flex-direction: column;
    gap: 42px;
    
        & .perfil {
            display: flex;
            flex-direction: column;
            gap: 12px;
            text-align: center;
            align-items: center;
        
                & img {
                    width: 250px;
                    height: 250px;
                    border-radius: 100%;       
                    object-fit: cover; /* Desachatar imagem*/ 
                }
        }
        & .btns {
            display: flex;
            flex-direction: column;
            gap: 17px;

            & a {
                background-color: blueviolet;
                color: white;
                padding: 20px;
                border-radius: 100px;
                text-align: center;
                font-size: 24px;
                border: 1px solid black;
                box-shadow:  4px 4px 0 black;
                transition: .3s;
            }
             /* Botões giram no hover */
            & a:hover {
                transform: translateX(4px) translateY(4px);
                box-shadow: none;
                animation: girarInfinito 1s linear infinite;
            }
        }
    }
/* Settings da animação */
@keyframes girarInfinito {
    from { transform: rotate(0deg) ;}
    to {transform: rotate(360deg);}
}