.bg-sakura {
    background-color: #f5b1ca;
}

  .text-sakura {
    color: #f5b1ca;
}

.bg-lightblue {
background-color: #91C5F7;
}

.text-lightblue {
color: #91C5F7;
    
}

.subcategory-enter,
.subcategory-leave-to {
opacity: 0;
transform: translateY(-10px);
  }
  
.subcategory-enter-active,
.subcategory-leave-active {
transition: opacity 300ms, transform 300ms;
  }
  
.subcategory-leave {
opacity: 1;
transform: translateY(0);
  }

.subcategory-leave-active {
transition: opacity 300ms, transform 300ms;
  }

@keyframes fadeIn {
from {
    opacity: 0;
}
to {
    opacity: 1;
}
}

.fade-in {
animation: fadeIn 0.3s forwards;
}

.fade-out {
    animation: fade-out 0.3s forwards;
  }
  
@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.move-center {
  transition: all 0.5s ease;
}
  
@media (min-width: 768px) {
  .move-center {
    transform: translateX(-50%);
  }
}

#back-to-top {
  transition: transform 0.3s, opacity 0.3s;
}

#back-to-top {
  transition-property: transform, opacity;
}

#back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
}

#back-to-top.invisible {
  opacity: 0;
  transform: translateY(100%);
}