<style id="jsbin-css0">
#profile-container {background: none;}

body {
  align-items:center;
  justify-content: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='images/pattern.png' width='36' height='72' viewBox='0 0 36 72'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%2392fff3' fill-opacity='0.62'%3E%3Cpath d='M2 6h12L8 18 2 6zm18 36h12l-6 12-6-12z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/*fonts*/
@font-face {font-family: PressStart;
  src: url(https://dl.dropbox.com/s/vdpjlyuwp6qfrhc/PressStart2P-Regular.ttf?dl=0);
}
@font-face {font-family: Lobster;
  src: url(https://dl.dropbox.com/s/fkfobbxhp75qv0p/Lobster-Regular.ttf?dl=0);
}

p {color: white; margin-right: 5px; font-family: PressStart; font-size: 10px;}
strong{font-family: PressStart; font-size: 11px;}
h1 {font-family: Lobster;
  position: relative; margin-top: -470px; top: 5%; font-size: 70px; color: #a9a9c6;
  text-shadow: 3px 5px #31323a;
}
h2{font-family: Lobster;
  color:white; text-shadow: 1px 1px #414047; margin: 0px; background-color: #ff6d91;
  font-size: 20px;
}

/* boxes */

.left {
  width:250px;
  height: 250px;
  background-color: #2b2d44;
overflow: hidden;
  position: relative;
    margin-top: 200px; margin-left:  00px;
}
.leftB {
  width:290px;
  height: 275px;
  background-color: #85f7ed;
overflow: hidden;
  position: absolute;
    margin-top: -12px; margin-left:  -10px;
  color: #85f7ed;
}
.text{overflow: auto; width: 75%; height: 80%;
  margin-top: 5px; margin-left: 5px;
}

.right{
    width:250px;
  height: 250px;
  background-color: #2b2d44;
    position: relative;
  margin-top: -255px; margin-left:  527px;
  text-align: right;
  overflow:hidden;
}
.rightB{
width:290px;
  height: 275px;
  background-color: #ff6d91;
overflow: hidden;
  position: absolute;
    margin-top: -266px; margin-left:  480px;
  color: #ff6d91;
}
.stat {width: 100%; height: 11%; margin-left: 0%; margin-top: 0px;margin-bottom: 0px; overflow: hidden;}
.stat p{margin-top: 7px;    font-family: PressStart;}
.slide {
  width: 99%; height: 11%;
  background-color: #a9a9c6;
  border: solid 2px #31323a;
  color: #31323a;
  position: absolute;
  overflow: hidden;
  transition: 0.2s;
  margin-left:
    font-family: PressStart;
} 
.stat:hover .slide{transform: translate(0, -20px); height: 0px; border: 0px;}




/* center stuff. DO NOT CHANGE. AT. ALL.*/
.center {
  margin-top: -310px; margin-left: 198px;
  position: relative; width: 350px; height: 350px;
    background-color: #62f3b0;
border-radius: 50%;
  border: solid #62f3b0 15px;

}
.center img{
  width: 100%;
  position: absolute;
  transition: 0.5s;
}

.t {
  width: 350px; height: 350px; overflow: hidden; z-index: 1;opacity: 1;
  margin-top: 0px; margin-left: 0px; border-radius: 50%;
  background-color: blue; position: absolute;transition: 0.5s;
  -webkit-clip-path: polygon(0 0, 50% 50%, 100% 0);
clip-path: polygon(0 0, 50% 50%, 100% 0);
}

.l {
  width: 350px; height: 350px; overflow: hidden; z-index: 2;opacity: 1;
  margin-top: 0px; margin-left: 0px; border-radius: 50%;
  background-color: red; position: absolute;transition: 0.5s;
  -webkit-clip-path: polygon(0 0, 0% 100%, 50% 50%);
clip-path: polygon(0 0, 0% 100%, 50% 50%);
}


.r {
  width: 350px; height: 350px; overflow: hidden; z-index: 3;opacity: 1;
  margin-top: 0px; margin-left: 0px;border-radius: 50%;
  background-color: green; position: absolute;transition: 0.5s;
  -webkit-clip-path: polygon(50% 50%, 100% 100%, 100% 0%);
clip-path: polygon(50% 50%, 100% 100%, 100% 0%);
}

.b {
  width: 350px; height: 350px; overflow: hidden; z-index: 4;opacity: 1;
  margin-top: 0px; margin-left: 0px; border-radius: 50%;
  background-color: yellow; position: absolute;transition: 0.5s;
  -webkit-clip-path: polygon(0 100%, 100% 100%, 50% 50%);
clip-path: polygon(0 100%, 100% 100%, 50% 50%);
}


/*dup effect effect */



.center:hover .t:nth-child(4) {
  opacity: 1;
  animation: up1 2.5s infinite;
  animation-timing-function: linear;
}
.center:hover .t:nth-child(3) {
    opacity: .8;
  animation: up2 2.5s infinite;
  animation-timing-function: linear;
}
.center:hover .t:nth-child(2) {
    opacity: .6;
  animation: up3 2.5s infinite;
  animation-timing-function: linear;
}
.center:hover .t:nth-child(1) {
    opacity: .4;
  animation: up4 2.5s infinite;
  animation-timing-function: linear;
}

.center:hover .l:nth-child(8) {
animation: left1 2.5s infinite;
  animation-timing-function: linear;
  opacity: 1;
}
.center:hover .l:nth-child(7) {
animation: left2 2.5s infinite;
  animation-timing-function: linear;
    opacity: .8;
}
.center:hover .l:nth-child(6) {
animation: left3 2.5s infinite;
  animation-timing-function: linear;
    opacity: .6;
}
.center:hover .l:nth-child(5) {
animation: left4 2.5s infinite;
  animation-timing-function: linear;
    opacity: .4;
}

.center:hover .r:nth-child(12) {
animation: right1 2.5s infinite;
  animation-timing-function: linear;
  opacity: 1;
}
.center:hover .r:nth-child(11) {
animation: right2 2.5s infinite;
  animation-timing-function: linear;
    opacity: .8;
}
.center:hover .r:nth-child(10) {
animation: right3 2.5s infinite;
  animation-timing-function: linear;
    opacity: .6;
}
.center:hover .r:nth-child(9) {
animation: right4 2.5s infinite;
  animation-timing-function: linear;
    opacity: .4;
}

.center:hover .b:nth-child(16) {  animation: down1 2.5s infinite;
  animation-timing-function: linear;
  opacity: 1;
}
.center:hover .b:nth-child(15) {  animation: down2 2.5s infinite;
  animation-timing-function: linear;
    opacity: .8;
}
.center:hover .b:nth-child(14) {  animation: down3 2.5s infinite;
  animation-timing-function: linear;
    opacity: .6;
}
.center:hover .b:nth-child(13) {  animation: down4 2.5s infinite;
  animation-timing-function: linear;
    opacity: .4;
}

@keyframes up1 {
  0% { transform: translate(0, 0); }
  25% { transform: translate(0px, -75px);}
  50% { transform: translate(0, 0);}
  75% { transform: translate(0, 0);}
  100% { transform: translate(0, 0);}

  }

@keyframes up2 {
  0% { transform: translate(0, 0); }
  25% { transform: translate(0px, -50px);}
  50% { transform: translate(0, 0);}
  75% { transform: translate(0, 0);}
  100% { transform: translate(0, 0);}

  }

@keyframes up3 {
  0% { transform: translate(0, 0); }
  25% { transform: translate(0px, -25px);}
  50% { transform: translate(0, 0);}
  75% { transform: translate(0, 0);}
  100% { transform: translate(0, 0);}

  }

@keyframes up4 {
  0% { transform: translate(0, 0); }
  25% { transform: translate(0, 0px);}
  50% { transform: translate(0, 0);}
  75% { transform: translate(0, 0);}
  100% { transform: translate(0, 0);}

  }

@keyframes down1 {
  0% { transform: translate(0, 0); }
  25% { transform: translate(0px, 75px);}
  50% { transform: translate(0, 0);}
  75% { transform: translate(0, 0);}
  100% { transform: translate(0, 0);}

  }

@keyframes down2 {
  0% { transform: translate(0, 0); }
  25% { transform: translate(0px, 50px);}
  50% { transform: translate(0, 0);}
  75% { transform: translate(0, 0);}
  100% { transform: translate(0, 0);}

  }

@keyframes down3 {
  0% { transform: translate(0, 0); }
  25% { transform: translate(0px, 25px);}
  50% { transform: translate(0, 0);}
  75% { transform: translate(0, 0);}
  100% { transform: translate(0, 0);}

  }

@keyframes down4 {
  0% { transform: translate(0, 0); }
  25% { transform: translate(0, 0px);}
  50% { transform: translate(0, 0);}
  75% { transform: translate(0, 0);}
  100% { transform: translate(0, 0);}

  }


@keyframes left1 {
  0% { transform: translate(0, 0); }
  25% { transform: translate(0px, 0px);}
  50% { transform: translate(-0, 0);}
  75% { transform: translate(-75px, 0);}
  100% { transform: translate(0, 0);}

  }

@keyframes left2 {
  0% { transform: translate(0, 0); }
  25% { transform: translate(0px, 0px);}
  50% { transform: translate(-0, 0);}
  75% { transform: translate(-50px, 0);}
  100% { transform: translate(0, 0);}

  }

@keyframes left3 {
  0% { transform: translate(0, 0); }
  25% { transform: translate(0px, 0px);}
  50% { transform: translate(0, 0);}
  75% { transform: translate(-25px, 0);}
  100% { transform: translate(0, 0);}

  }

@keyframes left4 {
  0% { transform: translate(0, 0); }
  25% { transform: translate(0, 0px);}
  50% { transform: translate(0, 0);}
  75% { transform: translate(0, 0);}
  100% { transform: translate(0, 0);}

  }

@keyframes right1 {
  0% { transform: translate(0, 0); }
  25% { transform: translate(0px, 0px);}
  50% { transform: translate(-0, 0);}
  75% { transform: translate(75px, 0);}
  100% { transform: translate(0, 0);}

  }

@keyframes right2 {
  0% { transform: translate(0, 0); }
  25% { transform: translate(0px, 0px);}
  50% { transform: translate(-0, 0);}
  75% { transform: translate(50px, 0);}
  100% { transform: translate(0, 0);}

  }

@keyframes right3 {
  0% { transform: translate(0, 0); }
  25% { transform: translate(0px, 0px);}
  50% { transform: translate(0, 0);}
  75% { transform: translate(25px, 0);}
  100% { transform: translate(0, 0);}

  }

@keyframes right4 {
  0% { transform: translate(0, 0); }
  25% { transform: translate(0, 0px);}
  50% { transform: translate(0, 0);}
  75% { transform: translate(0, 0);}
  100% { transform: translate(0, 0);}

  }



/* link ghost */
.link {position: absolute; width: 50px; height: 50px; margin-top: 80%; margin-left: 90%;}
.strip {position: absolute; width: 50px; height: 50px; margin-top: 0%; margin-left: 0%; overflow: hidden; border-radius: 50%; transition: .4s;}
.strip img{max-width: 100%;}
.link:hover .strip:nth-child(1) {
  opacity: .7;
  animation: u1 2s infinite;
  animation-timing-function: linear;
}
.link:hover .strip:nth-child(2) {
    opacity: .7;
  animation: u2 2s infinite;
  animation-timing-function: linear;
}
.link:hover .strip:nth-child(3) {
    opacity: .7;
  animation: u3 2s infinite;
  animation-timing-function: linear;
}
.link:hover .strip:nth-child(4) {
    opacity: .7;
  animation: u4 2s infinite;
  animation-timing-function: linear;
}

.link:hover .strip:nth-child(5) {
  animation: d1 2s infinite;
  animation-timing-function: linear;
  opacity: .7;
}

.link:hover .strip:nth-child(6) {
animation: l1 2s infinite;
  animation-timing-function: linear;
  opacity: .7;
}
.link:hover .strip:nth-child(7) {
animation: l2 2s infinite;
  animation-timing-function: linear;
    opacity: .7;
}
.link:hover .strip:nth-child(8) {
animation: l3 2s infinite;
  animation-timing-function: linear;
    opacity: .7;
}



@keyframes u1 {
  0% { transform: translate(0, 0); }
    5% { transform: translate(0, -15);}
  10% { transform: translate(0px, -30px);opacity: .7;}
  12% { transform: translate(0, -25px);opacity: .6;}
  14% { transform: translate(0, -20px);opacity: .5;}
  16% { transform: translate(0, -15px);opacity: .4;}
  18% { transform: translate(0, -10px);opacity: .3;}
  20% { transform: translate(0, 0); opacity: 0;}
  }

@keyframes u2 {
  10% { transform: translate(0, 0); }
  15% { transform: translate(10px, -10px);}
  20% { transform: translate(20px, -20px);opacity: .7;}
  22% { transform: translate(16px, -16px);opacity: .6;}
  24% { transform: translate(12px, -12px);opacity: .5;}
  26% { transform: translate(8px, -8px);opacity: .4;}
  28% { transform: translate(4px, -4px);opacity: .3;}
  30% { transform: translate(0, 0); opacity: 0;}
  }

@keyframes u3 {
  20% { transform: translate(0, 0); }
    25% { transform: translate(15px, 0);}
  30% { transform: translate(30px, 0px);opacity: .7;}
  32% { transform: translate(25px, 0);opacity: .6;}
  34% { transform: translate(20px, 0);opacity: .5;}
  36% { transform: translate(15px, 0);opacity: .4;}
  38% { transform: translate(10px, 0);opacity: .3;}
  40% { transform: translate(0, 0); opacity: 0;}
  }

@keyframes u4 {
  30% { transform: translate(0, 0); }
  35% { transform: translate(10px, 10px);}
  40% { transform: translate(20px, 20px);opacity: .7;}
  42% { transform: translate(16px, 16px);opacity: .6;}
  44% { transform: translate(12px, 12px);opacity: .5;}
  46% { transform: translate(8px, 8px);opacity: .4;}
  48% { transform: translate(4px, 4px);opacity: .3;}
  50% { transform: translate(0, 0); opacity: 0;}
  }

@keyframes d1 {
  40% { transform: translate(0, 0); }
  45% { transform: translate(0px, 15px);}
  50% { transform: translate(0px, 30px);opacity: .7;}
  52% { transform: translate(0px, 25px);opacity: .6;}
  54% { transform: translate(0px, 20px);opacity: .5;}
  56% { transform: translate(0px, 15px);opacity: .4;}
  54% { transform: translate(0px, 10px);opacity: .3;}
  60% { transform: translate(0, 0); opacity: 0;}
  }

@keyframes l1 {
  50% { transform: translate(0px, 0px); }
  55% { transform: translate(-10px, 10px);}
  60% { transform: translate(-20px, 20px);opacity: .7;}
  62% { transform: translate(-16px, 16px);opacity: .6;}
  64% { transform: translate(-12px, 12px);opacity: .5;}
  66% { transform: translate(-8px, 8px);opacity: .4;}
  68% { transform: translate(-4px, 4px);opacity: .3;}
  70% { transform: translate(0px, 0px); opacity: 0;}
  }

@keyframes l2 {
  60% { transform: translate(0, 0); }
  65% { transform: translate(-15px, -0);}
  70% { transform: translate(-30px, 0px);opacity: .7;}
  72% { transform: translate(-25px, -0px);opacity: .6;}
  74% { transform: translate(-20px, -0px);opacity: .5;}
  76% { transform: translate(-15px, -0px);opacity: .4;}
  78% { transform: translate(-10px, -0px);opacity: .3;}
  80% { transform: translate(0, 0); opacity: 0;}
  }

@keyframes l3 {
  70% { transform: translate(0, 0); }
  75% { transform: translate(-10px, -10px);}
  80% { transform: translate(-20px, -20px);opacity: .7;}
  82% { transform: translate(-16px, -16px);opacity: .6;}
  84% { transform: translate(-12px, -12px);opacity: .5;}
  86% { transform: translate(-8px, -8px);opacity: .4;}
  88% { transform: translate(-4px, -4px);opacity: .3;}
  90% { transform: translate(0, 0); opacity: 0;}
  }
</style>
