body
{
    background-color: #fff4f6;
     height: 100vh;
}
section
{
    width: 100%;
    height: 60vh;
    white-space: nowrap;
    margin-top: 10%;
}
section>div
{
    display: inline-block;
}
.avatar
{
    background-size: contain;
    background-repeat: no-repeat;
    height: 100%;
}
.divAvatar
{
    display: inline-block;
    height: 100%;
    text-align: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center top;
    /* background-color: green; */
}
.buttonsAvatar
{
}

.buttonsAvatar button
{
    width: 100%;
    /* min-width: 150px; */
    background-size: contain;
    padding: 4%;
    font-size: 25px;
}
.img
{
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
}
.avatar1
{
    background-image: url("../images/avatar1.png");
}
.avatar2
{
    background-image: url("../images/avatar2.png");
}

@media screen and (max-width: 990px) {
    .buttonsAvatar button
    {
        font-size: 20px;
        padding: 3%;
    }
}



@media screen and (max-width: 700px) {
    .buttonsAvatar button
    {
        font-size: 18px;
        padding: 3%;
    }
}

@media screen and (max-width: 600px) {
    .buttonsAvatar button
    {
        font-size: 15px;
        padding: 2%;
    }
}
@media screen and (max-width: 560px) {
    .buttonsAvatar button
    {
        font-size: 12px;
        padding: 2%;
    }
}