app.css

  /* --------------------------------------------------------------------
  
    Import font here from Google Fonts
    https://fonts.google.com/
    
  ----------------------------------------------------------------------- */
  @import url(https://fonts.googleapis.com/css?family=Open+Sans:700,600,400,300);

  /* --------------------------------------------------------------------
  
        Variables for colors and fonts:
        --> Modify these values to suit your style
  
  ---------------------------------------------------------------------- */
  :root {
      --color-lightest: #ffcdcd;
      --color-light: #ee6c6c;
      --color: #EC6565;
      --color-dark: #ca4e4e;
      --font: "Open Sans", Helvetica, sans-serif;
  }

  /* -------------------------------------------------------------------
 
                    DO NOT EDIT BELOW THIS LINE
            (Here there be dragons, you've been warned!)
 
 ----------------------------------------------------------------------- */

  :root {
      --image-size: 240px;
  }

  body {
      background: var(--color-light);
      background: linear-gradient(to top right, var(--color-light) 0%, var(--color-dark) 100%);
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
  }

  .frame {
      position: relative;
      width: 400px;
      height: 400px;
      border-radius: 2px;
      box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.3);
      background: #fff;
      font-family: var(--font);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overflow: hidden;
  }

  .center {
      position: absolute;
      left: calc(400px / 2 - var(--image-size) / 2);
  }

  .center .image {
      position: relative;
      width: var(--image-size);
      height: var(--image-size);
      margin: 50px auto 0 auto;
  }

  .center .image .circle-1,
  .center .image .circle-2 {
      position: absolute;
      box-sizing: border-box;
      width: calc(var(--image-size) + 8px);
      height: calc(var(--image-size) + 8px);
      top: -4px;
      left: -4px;
      border-width: 1px;
      border-style: solid;
      border-color: var(--color-dark) var(--color-dark) var(--color-dark) transparent;
      border-radius: 50%;
      transition: transform 1.5s ease-in-out;
  }

  .center .image .circle-2 {
      width: calc(var(--image-size) + 16px);
      height: calc(var(--image-size) + 16px);
      top: -8px;
      left: -8px;
      border-color: var(--color-dark) transparent var(--color-dark) var(--color-dark);
  }

  .center .image img {
      display: block;
      border-radius: 50%;
      max-width: 100%;
  }

  .center .image:hover {
      cursor: pointer;
  }

  .center .image:hover .circle-1,
  .profile .image:hover .circle-2 {
      transform: rotate(360deg);
  }

  .center .image:hover .circle-2 {
      transform: rotate(-360deg);
  }

  .center .name {
      font-size: 25px;
      font-weight: 400;
      margin-top: 20px;
      color: var(--color-dark);
      text-align: center;
  }

  .image .overlay {
      position: absolute;
      border-radius: 50%;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: #000;
      opacity: 0;
      transition: opacity 0.6s ease-in-out;
  }

  .image .plus {
      position: absolute;
      width: 50px;
      height: 50px;
      top: 50%;
      left: 50%;
      margin: -25px 0 0 -25px;
      background: var(--color);
      border-radius: 50%;
      box-shadow: 2px 4px 10px 0 rgba(0, 0, 0, 0.5);
      transition: transform 0.4s ease-in-out;
      opacity: 0;
      transform: scale(2);
      pointer-events: none;
  }

  .image .plus:before {
      position: absolute;
      content: "";
      width: 14px;
      height: 2px;
      top: 24px;
      left: 18px;
      background: #fff;
  }

  .image .plus:after {
      position: absolute;
      content: "";
      width: 2px;
      height: 14px;
      top: 18px;
      left: 24px;
      background: #fff;
  }

  .image:hover .plus {
      opacity: 1;
      transform: scale(1) translate3d(0, 0, 0);
  }

  .image:hover .overlay {
      opacity: 0.4;
  }

  .carousel {
      position: relative;
      width: 100%;
      text-align: center;
      font-size: 25px;
      line-height: 45px;
      height: 45px;
  }

  .carousel .pre {
      position: absolute;
      top: 0;
      right: 65%;
      height: 45px;
      text-shadow: 1px 1px 2px var(--color);
  }

  .carousel .change_outer {
      position: absolute;
      top: 0;
      left: 38%;
      text-align: left;
      height: 45px;
      overflow: hidden;
  }

  .carousel .change_outer .change_inner {
      position: relative;
      -webkit-animation: rotate 8s ease-in-out infinite;
      animation: rotate 8s ease-in-out infinite;
  }

  .carousel .change_outer .element {
      display: block;
      font-weight: 700;
      text-shadow: 1px 1px 2px var(--color);
  }

  @-webkit-keyframes rotate {

      0%,
      20% {
          transform: translateY(0);
      }

      25%,
      45% {
          transform: translateY(-45px);
      }

      50%,
      70% {
          transform: translateY(-90px);
      }

      75%,
      95% {
          transform: translateY(-135px);
      }

      100% {
          transform: translateY(-180px);
      }
  }

  @keyframes rotate {

      0%,
      20% {
          transform: translateY(0);
      }

      25%,
      45% {
          transform: translateY(-45px);
      }

      50%,
      70% {
          transform: translateY(-90px);
      }

      75%,
      95% {
          transform: translateY(-135px);
      }

      100% {
          transform: translateY(-180px);
      }
  }

  .profile,
  .stats {
      position: absolute;
      z-index: 2;
      background: #fff;
      pointer-events: none;
      height: 400px;
      transition: all 1s ease-in-out;
      box-shadow: 1px 0px 3px rgba(0, 0, 0, 0.3);
  }

  .profile {
      left: -280px;
      width: 280px;
      text-align: center;
  }

  .profile .image {
      position: relative;
      width: calc(var(--image-size) * 2 / 3);
      height: calc(var(--image-size) * 2 / 3);
      margin: 38px auto 0 auto;
  }

  .profile .image .circle-1,
  .profile .image .circle-2 {
      position: absolute;
      box-sizing: border-box;
      width: calc(var(--image-size) * 2 / 3 + 6px);
      height: calc(var(--image-size) * 2 / 3 + 6px);
      top: -3px;
      left: -3px;
      border-width: 1px;
      border-style: solid;
      border-color: var(--color-dark) var(--color-dark) var(--color-dark) transparent;
      border-radius: 50%;
      transition: all 1.5s ease-in-out;
  }

  .profile .image .circle-2 {
      width: calc(var(--image-size) * 2 / 3 + 12px);
      height: calc(var(--image-size) * 2 / 3 + 12px);
      top: -6px;
      left: -6px;
      border-color: var(--color-dark) transparent var(--color-dark) var(--color-dark);
  }

  .profile .image img {
      display: block;
      border-radius: 50%;
      max-width: 100%;
  }

  .profile .image:hover .circle-1,
  .profile .image:hover .circle-2 {
      transform: rotate(360deg);
  }

  .profile .image:hover .circle-2 {
      transform: rotate(-360deg);
  }

  .profile .name {
      font-size: 18px;
      font-weight: 600;
      margin-top: 20px;
  }

  .profile .job {
      font-size: 12px;
      line-height: 15px;
  }

  .profile .actions {
      margin-top: 33px;
  }

  .profile .actions .btn {
      display: block;
      width: 120px;
      height: 30px;
      margin: 0 auto 10px auto;
      background: none;
      border: 1px solid var(--color-dark);
      border-radius: 15px;
      font-size: 12px;
      font-weight: 600;
      box-sizing: border-box;
      transition: all 0.3s ease-in-out;
      color: var(--color-dark);
  }

  .profile .actions .btn:hover {
      background: var(--color-dark);
      color: #fff;
  }

  .stats {
      position: absolute;
      right: -120px;
      z-index: 2;
      background: #fff;
      pointer-events: none;
  }

  .stats .box {
      box-sizing: border-box;
      width: 120px;
      height: 100px;
      background: var(--color-lightest);
      text-align: center;
      padding-top: 28px;
      transition: all 0.4s ease-in-out;
  }

  .stats .box:hover {
      background: var(--color-light);
  }

  .stats .box:nth-child(2),
  .stats .box:nth-child(3) {
      margin: 1px 0;
  }

  .stats span {
      display: block;
  }

  .stats .value {
      font-size: 18px;
      font-weight: 600;
  }

  .stats .parameter {
      font-size: 11px;
  }

  .open {
      pointer-events: all;
  }

  .profile.open {
      left: 0;
  }

  .stats.open {
      right: 0;
  }

  .open #close {
      transform: rotate(45deg) translate3d(0, 0, 0);
      transition: background 0.3s ease-in-out, transform 0.6s ease-out 0.6s;
  }

  #close {
      position: absolute;
      z-index: 3;
      width: 50px;
      height: 50px;
      top: 10px;
      left: 10px;
      background: var(--color);
      border-radius: 50%;
      transition: background 0.3s ease-in-out, transform 0.5s ease-in;
      transform: rotate(45deg) translate3d(-105%, -105%, 0);
      cursor: pointer;
  }

  #close:before {
      position: absolute;
      content: "";
      width: 14px;
      height: 2px;
      top: 24px;
      left: 18px;
      background: #fff;
      transition: all 0.3s ease-in-out;
  }

  #close:after {
      position: absolute;
      content: "";
      width: 2px;
      height: 14px;
      top: 18px;
      left: 24px;
      background: #fff;
      transition: all 0.3s ease-in-out;
  }

  #close:hover {
      background: #fff;
  }

  #close:hover:after,
  #close:hover:before {
      background: var(--color);
  }