.rotate-center {
    -webkit-animation: rotate-center 0.6s ease-in-out both;
            animation: rotate-center 0.6s ease-in-out both;
}

@-webkit-keyframes rotate-center {
    0% {
        -webkit-transform: rotate(0);
                transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
    }
    }
    @keyframes rotate-center {
    0% {
        -webkit-transform: rotate(0);
                transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}

@keyframes rotate-scale-up {
    0% {
        transform: scale(1) rotateZ(0);
    }
    50% {
        transform: scale(2) rotateZ(180deg);
    }
    100% {
        transform: scale(1) rotateZ(360deg);
    }
}

.rotate-scale-up {
    animation: rotate-scale-up 0.65s linear both;
}

.flip-horizontal-bottom {
	animation: flip-horizontal-bottom 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}

@keyframes flip-horizontal-bottom {
    0% {
      transform: rotateX(0);
    }
    100% {
      transform: rotateX(-360deg);
    }
  }

.flip-scale-up-ver {
	animation: flip-scale-up-ver 0.5s linear both;
}

@keyframes flip-scale-up-ver {
    0% {
        transform: scale(1) rotateY(0);
    }
    50% {
        transform: scale(2.5) rotateY(90deg);
    }
    100% {
        transform: scale(1) rotateY(360deg);
    }
}

.flip-scale-down-ver {
	animation: flip-scale-down-ver 0.5s linear both;
}

@keyframes flip-scale-down-ver {
    0% {
      transform: scale(1) rotateY(0);
    }
    50% {
      transform: scale(0.4) rotateY(-90deg);
    }
    100% {
      transform: scale(1) rotateY(-360deg);
    }
  }

.flip-scale-up-diag-1 {
	animation: flip-scale-up-diag-1 0.5s linear both;
}

@keyframes flip-scale-up-diag-1 {
    0% {
      transform: scale(1) rotate3d(1, 1, 0, 0deg);
    }
    50% {
      transform: scale(2.5) rotate3d(1, 1, 0, 90deg);
    }
    100% {
      transform: scale(1) rotate3d(1, 1, 0, 360deg);
    }
  }

.flip-scale-2-ver-right {
	animation: flip-scale-2-ver-right 0.5s linear both;
}

@keyframes flip-scale-2-ver-right {
    0% {
      transform: translateX(0) rotateY(0) scale(1);
      transform-origin: 100% 50%;
    }
    50% {
      transform: translateX(50%) rotateY(-90deg) scale(2);
      transform-origin: 50% 50%;
    }
  }

  .flip-scale-2-hor-bottom {
	animation: flip-scale-2-hor-bottom 0.5s linear both;
}

@keyframes flip-scale-2-hor-bottom {
  0% {
    transform: translateY(0) rotateX(0) scale(1);
    transform-origin: 50% 100%;
  }
  50% {
    transform: translateY(50%) rotateX(90deg) scale(2);
    transform-origin: 50% 50%;
  }
  100% {
    transform-origin: 50% 0%;
  }
}

.slide-left {
	animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes slide-left {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100px);
    }
  }
  

.slide-tl {
	animation: slide-tl 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes slide-tl {
    0% {
      transform: translateY(0) translateX(0);
    }
    100% {
      transform: translateY(-100px) translateX(-100px);
    }
  }

  @keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

body {
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradient 5s ease infinite;
	height: 100vh;
}


.image {
    width: 50%;
    height: 50%;
    z-index: 20;
    position: relative;
}
  
.face {
    position: absolute;
    width: 50%;
    height: 50%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 10px;
    text-align: center;
    background: #2dccb8;
    z-index: 20;
    font-family: mainFont;
    text-size-adjust: 80%;
    font-size: 210px;
    display: flex;
  justify-content: center;
  flex-direction: column;
}

@font-face {
    font-family: mainFont;
    src: url(fonts/LuckiestGuy-Regular.ttf);
 }
  

.center {    
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }