*{margin: 0; padding: 0; box-sizing: border-box;}
.main{
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(240, 240, 240);
}
.icon{
    width: 100px;
    height: 100px;
    border-radius: 100px;
    background: #fff;
    margin: 20px;
    text-align: center;
    font-size: 50px;
    line-height: 100px;
    font-family: sans-serif;
    overflow: hidden;
    box-shadow: 5px 10px 20px rgba(150, 150, 150, .3);
    transition: all .3s ease-out;
    
}
.icon a{
    text-decoration: none;
    color: #fff;
}

.icon:hover{
    width: 400px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    color: #fff;
    
}

.icon:hover a{
    text-decoration: none;
    color: #fff;
    
}


.icon:hover i{
    color: #fff;
}
.icon .fa-facebook-f{
    color: #1A6ED8;
}
.fb:hover{
    background: #1A6ED8;
}
.icon .fa-twitter{
    color: #6200ff;
}
.twt:hover{
    background: #6200ff;
}
.icon .fa-linkedin-in{
    color: #974f8b;
}
.lnk:hover{
    background: #974f8b;
}
.icon .fa-github{
    color: #000;
}
.git:hover{
    background: #000;
}
.icon .fa-youtube{
    color: #FE0000;
}
.yt:hover{
    background: #FE0000;
}

/* responsive */
@media only screen and (min-width: 320px) and (max-width: 991px) {
    .main{
        flex-direction: column;
    }
}