@import url('fonts.css');

* {
  margin: 0;
}

html {
  height: 100%;
}
#bodyContacts {
  margin: 0;
  height: 100%;
  background: repeating-linear-gradient(-60deg, rgba(45, 211, 18, 0.2) 0 35px, transparent 35px 55px);
}

#mainContacts {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  margin: auto;
}

.animate__lightSpeedInLeft,
.animate__lightSpeedInRight {
  font: 11vw 'Rude';
  text-align: center;
}

p {
  font: bold 2.3vw 'Argesta';
  position: absolute;
  bottom: 3.7%;
  left: 43%;
}

.cake {
  background: url('../assets/media/images/cake.png') center/contain no-repeat;
  height: 100%;
  width: 60%;
}

.cake-wrapper {
  height: 57vh;
}

@keyframes lightSpeedInLeft {
  0% {
    transform: translate3d(-200%, 0, 0) skewX(30deg);
    opacity: 0;
  }
  60% {
    transform: skewX(-20deg);
    opacity: 1;
  }
  80% {
    transform: skewX(5deg);
  }
  to {
    transform: translateZ(0);
  }
}
.animate__lightSpeedInLeft {
  animation-name: lightSpeedInLeft;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}

@keyframes lightSpeedInRight {
  0% {
    transform: translate3d(200%, 0, 0) skewX(30deg);
    opacity: 0;
  }
  60% {
    transform: skewX(-20deg);
    opacity: 1;
  }
  80% {
    transform: skewX(5deg);
  }
  to {
    transform: translateZ(0);
  }
}
.animate__lightSpeedInRight {
  animation-name: lightSpeedInRight;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}

@keyframes lightSpeedInTop {
  0% {
    transform: translate3d(0, 200%, 0) skewX(30deg) rotate(180deg);
    opacity: 0;
  }
  60% {
    transform: skewX(-20deg) rotate(180deg);
    opacity: 1;
  }
  80% {
    transform: skewX(5deg) rotate(180deg);
  }
  to {
    transform: translate3d(0, 0, 0) rotate(180deg);
  }
}
.animate__lightSpeedInTop {
  animation-name: lightSpeedInTop;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
  writing-mode: vertical-lr;
}

@keyframes lightSpeedInBottom {
  0% {
    transform: translate3d(0, -200%, 0) skewX(30deg);
    opacity: 0;
  }
  60% {
    transform: skewX(-20deg);
    opacity: 1;
  }
  80% {
    transform: skewX(5deg);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.animate__lightSpeedInBottom {
  animation-name: lightSpeedInBottom;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
  writing-mode: vertical-lr;
}

@keyframes zoomInDown {
  0% {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.animate__zoomInDown {
  animation-name: zoomInDown;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
  animation-delay: 1s;
}

@keyframes swing {
  0% {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  59% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
  60% {
    transform: rotate(5deg);
  }
  65% {
    transform: rotate(-5deg);
  }
  70% {
    transform: rotate(4deg);
  }
  75% {
    transform: rotate(-4deg);
  }
  80% {
    transform: rotate(3deg);
  }
  85% {
    transform: rotate(-3deg);
  }
  90% {
    transform: rotate(2deg);
  }
  95% {
    transform: rotate(-2deg);
  }
  to {
    transform: rotate(0deg);
  }
}
.animate__swing {
  transform-origin: bottom center;
  animation-name: swing;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}

.circles-background {
  width: 100%;
  height: 100%;
  background: radial-gradient(rgba(45, 211, 18, 0.2) 50px, transparent 0, transparent 0%), radial-gradient(rgba(45, 211, 18, 0.2) 50px, transparent 0, transparent 0%), #fff;
  background-size: 220px 220px;
  background-position: -47px 0px, 58px 111px;
}