<style>
   .flex-column { 
       max-width : 260px;
   }
</style>

<style>
        .container {
            background: #8E44AD;
        }
      
        img {
            margin: 5px;
        }
</style>

<style>
    .footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: rebeccapurple;
    color: white;
    text-align: center;
}
</style>

  *{
 margin:0;
 padding:0;
 text-decoration:none;
}

body{
 background:#f1f1f1;
}

.s-m{
 position: relative;
 top:90%;
 left:90%;
 transform:translate(-50%,-50%);
}

.s-m a{
 display:inline-flex;
 width:40px;
 height:40px;
 background:#2c3e50;
 color:white;
 margin:0 6px;
 border-radius:50%;
 justify-content:center;
 align-items:center;
 transition:0.4s;
 font-size:22px;
}

.s-m a:hover{
 background:#e67e22;
}

.s-m a i{
 transition:0.2s all;
}

.s-m a:hover > i{
 transform:scale(1.2) rotate(25deg);
}