@import url(https://fonts.googleapis.com/css?family=Lato:400,300,700);
body {
  background:#cbc9e8; 
  overflow:hidden;
  font-family: 'Lato', sans-serif;
}
#card {
  overflow:hidden;
  text-align:center;
  width:320px;
  height:535px;
  background: url(https://tr.rbxcdn.com/180DAY-d82100926b125cf1cfd433f1b49f0adb/1440/456/Image/Png/noFilter);
  background-size:cover;
  background-position:center center;
  position:absolute;
  top:0; left:0; right:0; bottom:0;
  margin:auto;
  box-shadow: 
    0px 30px 30px -20px rgba(0,0,0,1), 
    inset 0 0 0 1000px rgba(67,52,109,.6);
  transition: all .4s cubic-bezier(.37,.26,.35,1)
}
#card:hover { 
  box-shadow: 
    0px 30px 30px -20px rgba(0,0,0,.9), 
    inset 0 0 0 1000px rgba(67,52,109,.2);
}
#card:hover #avatar {
  -webkit-animation:none;
          animation:none;
  box-shadow:0;
  width:200px; 
  height:200px;
}

#card:hover #profile{
  opacity:1;
  bottom:0;
}
#profile {
  transition: all .5s cubic-bezier(.37,.26,.35,1);
  opacity:0;
  position:absolute; 
  bottom:20px; 
  width:100%;
}
#profile h1 {
  color:#fff;
  padding:0;
  margin:0;
}

#profile h3 {
  color:#aaa;
  padding:0;
  margin:5px 0 40px 0; 
  font-size:.9em
}
#avatar {
  transition: all .4s cubic-bezier(.37,.26,.35,1);
  -webkit-animation: circleAn 4s infinite;
          animation: circleAn 4s infinite;
  width:150px; height:150px;
  position:absolute;
  top:0; left:0; right:0; bottom:0;
  margin:auto;
  background:url(https://tr.rbxcdn.com/180DAY-677e3988227e8b8efd6b70f90162ec5c/150/150/Image/Webp/noFilter);
  background-size:cover;
  background-position:center center;
  border-radius:100%;
  box-shadow:0px 30px 30px -25px rgba(0,0,0,0.6);
}
@-webkit-keyframes circleAn {
  0%   { 
    box-shadow:
      0px 30px 30px -25px rgba(0,0,0,0.6), 
      0px 0px 0px 0px rgba(102,52,105,1), 
      0px 0px 0px 0px rgba(102,52,105,.7),
      0px 0px 0px 0px rgba(102,52,105,.5);
  }
 100% { 
   box-shadow:
     0px 30px 30px -25px rgba(0,0,0,0.6), 
     0px 0px 0px 70px rgba(102,52,105,0),
     0px 0px 0px 200px rgba(102,52,105,0),
     0px 0px 0px 300px rgba(102,52,105,0);
  }
}
@keyframes circleAn {
  0%   { 
    box-shadow:
      0px 30px 30px -25px rgba(0,0,0,0.6), 
      0px 0px 0px 0px rgba(102,52,105,1), 
      0px 0px 0px 0px rgba(102,52,105,.7),
      0px 0px 0px 0px rgba(102,52,105,.5);
  }
 100% { 
   box-shadow:
     0px 30px 30px -25px rgba(0,0,0,0.6), 
     0px 0px 0px 70px rgba(102,52,105,0),
     0px 0px 0px 200px rgba(102,52,105,0),
     0px 0px 0px 300px rgba(102,52,105,0);
  }
}