Portfolio Swap Card/style.css
*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
body{
    background: linear-gradient(to right,#2c5364,#203a43,#0f2027);
}
.center{
    display: flex;
    justify-content: center;
    align-items: center;
}
.main{
    height: 100vh;
}
.box{
    width: 250px;
    height: 250px;
    box-shadow:0 10px 20px rgba(0, 0, 0, 0.288);
    border-radius: 23px;
    flex-direction: column;
    color: white;
    position: relative;
    overflow: hidden;
}
.box img{ 
     width: 100px;
    height: 100px; 
    border-radius: 50px; 
 } 
 .user_name{
     margin-bottom:5px;
     font-size: 2rem;
 }
 .skill{
     color: rgba(255, 255, 255, 0.555);
 }
 .arr_container,.cancel{
     position: absolute;
     bottom: 0;
     right: 0;
     height: 50px;
     width: 50px;
     background: white;
     border-radius: 23px 0px 23px 0px;
     color: rgb(70, 70, 70);
     font-size: 1.6rem;
     transition: all 0.4s;
 }
 .arr_container i{
     transform: rotate(45deg);
 }

 .active_arr{
     /* transform: translate(80%,80%); */
 }
 .left_container{
     position: absolute;
     background: #0f2027;
     width: 100%;
     height: 100%;
     border: 23px;
     padding: 40px 0 0 20px;
     transition: all 0.4s;

 }
 .off{
     transform: translate(-80%,-80%) rotate(90deg);
 }
 .active{
     transform: translate(0) rotate(0);
 }
 .left_container p{
     margin-bottom: 15px;
     font-size: 1.2rem;
 }
 .left_container .skill div{
     display: inline-block;
     color: rgb(155, 155, 155);
     border: 1px solid rgb(155, 155, 155);
     padding: 5px 10px;
     font-size: .9rem;
     margin: 4px 4px 4px 0px;

 }
 .left_container .icons{
     font-size:1.6px;
     margin-top:10px;
 }
 .left_container .icons i{
   color: #cfcfcf; 
   cursor: pointer;
   margin-right: 10px;
   transition: all 0.4s;
 }
 .left_container .icons i:hover{
     color: #2c5364;
 }