sidemenu_style.css

.sidemenu_icon{
    border-radius: 100%;
    width:50px;
    height:50px;
    position: absolute;
    bottom:5%;
    left:2%;
    background-color: lightblue;
    z-index: 1;
}
.sidemenu_social{
    border-radius: 0 0 0 100%;
    width:160px;
    height:160px;
    position: absolute;
    top:-100%;
    right:0%;
    background-color: lightblue;
    transition: 1s;
    z-index: 2;
}
.sidemenu_about{
    border-radius: 0 100% 0 0;
    width:65%;
    height: 300px;
    position: absolute;
    bottom:0%;
    left:-100%;
    background-color: #58d867;
    transition: 1s;
    z-index: 2;
}

.sidemenu_social a i{
    font-size:44px;
}
.sidemenu_social a:nth-child(1) i{
    position: absolute;
    top: 10px;
    left: 15px;
}
.sidemenu_social a:nth-child(2) i{
    position: absolute;
    top: 60px;
    left: 50px;
}
.sidemenu_social a:nth-child(3) i{
    position: absolute;
    top: 95px;
    left: 100px;
}
.sidemenu_about ul{
    list-style-type: none;
    font-family: "Abril Fatface";
    font-size: 30px;
    position: relative;
    left:-5%;
    top:10%;
    color:white;
}
.sidemenu_about ul li{
 margin-bottom: 20px;
}
.sidemenu_blurbg{
    filter: blur(5px);
    height: 100%;
    width: 100%;
    z-index:2;
    }
    /*layout adjustment for pc and tablet*/
    @media (min-width: 768px) and (max-width: 1024px) {
  .sidemenu_about{
    width:35%;
    height:350px;
  }
   .sidemenu_about ul{
    top:20%;
  }
  .sidemenu_about ul li{
 margin-bottom: 20px;
}

}
@media screen and (min-width:1024px ) {
  .sidemenu_about{
    width:20%;
    height:350px;
  }
  .sidemenu_about ul{
    top:20%;
  }
  .sidemenu_about ul li{
 margin-bottom: 20px;
}
}