:root {
    --yellon: #FAD929;
    --green: #81BD4F;
    --blue: #5FB4EF;
    --violet: #7B57A7;
    --pink: #D85D8D;
    --orange: #FF862E;
}

body {
    margin: 5vw;   
    background-color: black; 
    color: var(--yellon);
}

header {
    display: flex;
    flex-direction: column;
    text-align: center;
}

img.perfil {
    margin: 0 auto 20px auto;
}

.perfil {
    width: 10vw;
    border: 5px solid var(--yellon);
    border-radius: 50%;
    opacity: 80%
}

.perfil:hover {
    border: 5px solid var(--blue);
    opacity: 100%;
}

main img {
    width: 20vw;
    border-radius: 50px;
    box-shadow: 4px 4px var(--yellon);
    opacity: 80%;
}

main img:hover {
    transform: scale(1.2);
    transition: 0.5s;
    box-shadow: 4px 4px var(--blue);
    opacity: 100%;
}

.container {
    display: flex;
    flex-direction: column;
    text-align: center;
    margin: 10px 0 0 0;
}

a {
    padding: 10px;
}

.copyright {
    margin: 10px auto;
    text-align: center;
    padding: 30px 0 0 0;
}

@media (max-width: 1000px) {

    .perfil {
        width: 20vw;
    }    

    main img {
        width: 35vw;
    }

}

@media (max-width: 500px) {

    .perfil {
        width: 40vw;
    }    

    main img {
        width: 65vw;
    }

}