.logo {
  display: flex;
  margin: 50px auto 30px;
  flex-direction: row;
  justify-content: center;
}

.logo-box {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.logo-box-circle {
  top: 30%;
  left: 50%;
  width: 85px;
  height: 85px;
  position: absolute;
  transform: translate(-50%, -50%);
  background-color: var(--decoration-3);
  border-radius: 50%;
  z-index: -1;

  clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
  animation: bounceInCircle 0.5s ease;
}

.logo-box-circle-variant {
  top: 35%;
  left: 55%;
  width: 85px;
  height: 85px;
  position: absolute;
  transform: translate(-50%, -50%);
  background-color: var(--decoration-2);
  border-radius: 50%;
  z-index: -2;

  clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
  animation: bounceInCircleVariant 0.5s ease;
}

.logo-box-img {
  width: 48px;
  margin: auto;
  position: relative;

  clip-path: polygon(0% 0%, 100% 0%, 95% 85%, 50% 100%, 5% 85%, 0% 85%);
  animation: bounceIn 0.5s ease;
}

.logo-box-title {
  margin: 8px auto 0px;

  overflow: hidden;
  white-space: nowrap;
  font-family: "Bukhari Script", sans-serif;

  border-right: 0.15em solid var(--decoration-3);
  color: var(--letter);
  text-shadow:
    2px 2px 0px var(--decoration-2),
    1px 1px 1px var(--decoration-3);
  animation:
    typing 3.5s steps(40, end),
    cursor-pointer 0.75s step-end infinite;
}

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes cursor-pointer {
  from,
  to {
    border-color: transparent;
  }
  50% {
    border-color: var(--decoration-3);
  }
}

@keyframes bounceIn {
  0% {
    transform: scale(0.1);
    opacity: 0;
  }
  60% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

@keyframes bounceInCircle {
  0% {
    transform: translate(-40%, -40%), scale(0.1);
    opacity: 0;
  }
  60% {
    transform: translate(-45%, -45%), scale(1.5);
  }
  100% {
    transform: translate(-50%, -50%), scale(1);
    opacity: 1;
  }
}

@keyframes bounceInCircleVariant {
  0% {
    transform: translate(-40%, -40%), scale(0.1);
    opacity: 0;
  }
  60% {
    transform: translate(-55%, -55%), scale(1.5);
  }
  100% {
    transform: translate(-50%, -50%), scale(1);
    opacity: 1;
  }
}
