@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,700;0,900;1,900&display=swap");
@import url("https://fonts.googleapis.com/css?family=Cormorant+Garamond:400i");

* {
  padding: 0;
  margin: 0;
}

html,
body {
  min-height: 100% !important;
  height: 100%;
  font-family: "Poppins", sans-serif;
  user-select: none;
  overflow: hidden;
  background-color: #121212;
  position: relative;
  box-sizing: border-box;
}

.container {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.content {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 20;
  cursor: pointer;
}

.title {
  font-size: 2rem;
  color: #33b864;
}

.description {
  font-size: 1.2rem;
  color: #8c92ac;
}

.heart {
  position: absolute;
  opacity: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyMHB4IiBoZWlnaHQ9IjE4cHgiIHZpZXdCb3g9IjAgMCAyMCAxOCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5oZWFydDwvdGl0bGU+ICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPiAgICA8ZGVmcz48L2RlZnM+ICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgICAgICAgPGcgaWQ9ImhlYXJ0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNi4wMDAwMDAsIC03LjAwMDAwMCkiIGZpbGw9IiNEMDAyMUIiPiAgICAgICAgICAgIDxwYXRoIGQ9Ik0xNS41MjM4MDk1LDI1IEMxNiwyNSAxNiwyNSAxNi40NzYxOTA1LDI1IEwyNC4wOTUyMzgxLDE3IEMyNi41NDk4Njc5LDE0LjUxMzUwNDIgMjYuNTQ5ODY3OSwxMC45MDAxNDM2IDI0LjA5NTIzODEsOSBDMjIuMTUwOTIzNSw2LjQ0MjgzNjc3IDE4LjU4NDg3NSw2LjQ0MjgzNjc3IDE2LjQ3NjE5MDUsOSBDMTYsOSAxNiw5IDE1LjUyMzgwOTUsOSBDMTMuNDE1MTI1LDYuNDQyODM2NzcgOS44NDkwNzY0Niw2LjQ0MjgzNjc3IDcuOTA0NzYxOSw5IEM1LjQ1MDEzMjA3LDEwLjkwMDE0MzYgNS40NTAxMzIwNywxNC41MTM1MDQyIDcuOTA0NzYxOSwxNyBMMTUuNTIzODA5NSwyNSBaIj48L3BhdGg+ICAgICAgICA8L2c+ICAgIDwvZz48L3N2Zz4=");
  background-repeat: no-repeat;
  height: 22px;
  width: 22px;
}

.animate-topright {
  position: absolute;
  -webkit-animation: movetopRight 6.5s 1s infinite;
  -moz-animation: movetopRight 6.5s 1s infinite;
  -o-animation: movetopRight 6.5s 1s infinite;
  -ms-animation: movetopRight 6.5s 1s infinite;
  animation: movetopRight 6.5s 1s infinite;
}

.animate-bottomright {
  position: absolute;
  -webkit-animation: movebottomRight 4.5s 1.7s infinite;
  -moz-animation: movebottomRight 4.5s 1.7s infinite;
  -o-animation: movebottomRight 4.5s 1.7s infinite;
  -ms-animation: movebottomRight 4.5s 1.7s infinite;
  animation: movebottomRight 4.5s 1.7s infinite;
}

.animate-topleft {
  position: absolute;
  -webkit-animation: movetopLeft 8.5s 5.4s infinite;
  -moz-animation: movetopLeft 8.5s 5.4s infinite;
  -o-animation: movetopLeft 8.5s 5.4s infinite;
  -ms-animation: movetopLeft 8.5s 5.4s infinite;
  animation: movetopLeft 8.5s 5.4s infinite;
}

.animate-bottomleft {
  position: absolute;
  -webkit-animation: movebottomLeft 7.5s 4.8s infinite;
  -moz-animation: movebottomLeft 7.5s 4.8s infinite;
  -o-animation: movebottomLeft 7.5s 4.8s infinite;
  -ms-animation: movebottomLeft 7.5s 4.8s infinite;
  animation: movebottomLeft 7.5s 4.8s infinite;
}

.animate-up {
  position: absolute;
  -webkit-animation: moveup 7.5s 2.2s infinite;
  -moz-animation: moveup 7.5s 2.2s infinite;
  -o-animation: moveup 7.5s 2.2s infinite;
  -ms-animation: moveup 7.5s 2.2s infinite;
  animation: moveup 7.5s 2.2s infinite;
}

.animate-down {
  position: absolute;
  -webkit-animation: movedown 5.5s 5.5s infinite;
  -moz-animation: movedown 5.5s 5.5s infinite;
  -o-animation: movedown 5.5s 5.5s infinite;
  -ms-animation: movedown 5.5s 5.5s infinite;
  animation: movedown 5.5s 5.5s infinite;
}

.animate-left {
  position: absolute;
  -webkit-animation: moveleft 5.5s 2.9s infinite;
  -moz-animation: moveleft 5.5s 2.9s infinite;
  -o-animation: moveleft 5.5s 2.9s infinite;
  -ms-animation: moveleft 5.5s 2.9s infinite;
  animation: moveleft 5.5s 2.9s infinite;
}

.animate-right {
  position: absolute;
  -webkit-animation: moveright 5.5s 3.4s infinite;
  -moz-animation: moveright 5.5s 3.4s infinite;
  -o-animation: moveright 5.5s 3.4s infinite;
  -ms-animation: moveright 5.5s 3.4s infinite;
  animation: moveright 5.5s 3.4s infinite;
}

@keyframes movetopRight {
  0% {
    top: 50%;
    left: 50%;
    opacity: 0;
  }
  15% {
    opacity: 0;
  }
  20% {
    opacity: 0.2;
  }
  40% {
    opacity: 0.85;
  }
  100% {
    top: 10%;
    left: 80%;
    opacity: 0;
  }
}

@keyframes movebottomRight {
  0% {
    top: 50%;
    left: 50%;
    opacity: 0;
  }
  15% {
    opacity: 0;
  }
  20% {
    opacity: 0.2;
  }
  40% {
    opacity: 0.85;
  }
  100% {
    top: 90%;
    left: 90%;
    opacity: 0;
  }
}

@keyframes movetopLeft {
  0% {
    top: 50%;
    left: 50%;
    opacity: 0;
  }
  15% {
    opacity: 0;
  }
  20% {
    opacity: 0.2;
  }
  40% {
    opacity: 0.85;
  }
  100% {
    top: 10%;
    left: 20%;
    opacity: 0;
  }
}

@keyframes movebottomLeft {
  0% {
    top: 50%;
    left: 50%;
    opacity: 0;
  }
  15% {
    opacity: 0;
  }
  20% {
    opacity: 0.2;
  }
  40% {
    opacity: 0.85;
  }
  100% {
    top: 90%;
    left: 5%;
    opacity: 0;
  }
}

@keyframes moveup {
  0% {
    top: 50%;
    left: 50%;
    opacity: 0;
  }
  15% {
    opacity: 0;
  }
  20% {
    opacity: 0.2;
  }
  40% {
    opacity: 0.85;
  }
  100% {
    top: 0%;
    left: 45%;
    opacity: 0;
  }
}

@keyframes movedown {
  0% {
    top: 50%;
    left: 50%;
    opacity: 0;
  }
  15% {
    opacity: 0;
  }
  20% {
    opacity: 0.2;
  }
  40% {
    opacity: 0.85;
  }
  100% {
    top: 100%;
    left: 45%;
    opacity: 0;
  }
}

@keyframes moveleft {
  0% {
    top: 50%;
    left: 50%;
    opacity: 0;
  }
  15% {
    opacity: 0;
  }
  20% {
    opacity: 0.2;
  }
  40% {
    opacity: 0.85;
  }
  100% {
    top: 45%;
    left: 10%;
    opacity: 0;
  }
}

@keyframes moveright {
  0% {
    top: 50%;
    left: 50%;
    opacity: 0;
  }
  15% {
    opacity: 0;
  }
  20% {
    opacity: 0.2;
  }
  40% {
    opacity: 0.85;
  }
  100% {
    top: 45%;
    left: 97%;
    opacity: 0;
  }
}