body {
  margin: 0;
  padding: 0;
  background-color: #51355a;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family: "Poppins", sans-serif;
}

.box {
  display: flex;
  font-size: 60px;
  font-weight: bold;
  color: #bcccdf;
  flex-wrap: wrap;
  align-items: center;
  gap: 1px;
}

.slideup {
  display: inline-block;
  transform: translateY(100px);
  opacity: 0;
  animation: slideup 1000ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@keyframes slideup {
  0% { transform: translateY(100px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

.fs {
  display: inline-block;
  font-size: 60px;
  color: #f95959;
  opacity: 0;
  animation:
    rotate-fs 1800ms cubic-bezier(0.5, 1, 0.89, 1) 1 forwards,
    blink-rotate 2s linear 1 forwards;
  transform-origin: center;
  perspective: 600px;
}

@keyframes rotate-fs {
  0% { transform: rotateY(0deg); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: rotateY(360deg); opacity: 1; }
}

@keyframes blink-rotate {
  0%, 100% { color: #f95959; text-shadow: none; }
  50% { color: #ff0000; text-shadow: 0 0 10px #ff5555; }
}

@media (max-width: 800px) {
  .box { font-size: 40px; }
  .fs, .slideup { font-size: 40px; }
}

@media (max-width: 520px) {
  .box { font-size: 30px; }
  .fs, .slideup { font-size: 30px; }
}