/* Rounded Gothic Font */
body {
  font-family: 'Rounded Mplus 1c', 'M PLUS Rounded 1c', -apple-system, BlinkMacSystemFont, 'Hiragino Maru Gothic ProN', 'Hiragino Sans', 'BIZ UDPGothic', 'Meiryo', sans-serif;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f4eee0;
}

::-webkit-scrollbar-thumb {
  background: #e75556;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #d44445;
}

/* Details/Summary styling */
details summary {
  list-style: none;
  position: relative;
  padding-right: 30px;
}

details summary::-webkit-details-marker {
  display: none;
}

details summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 0;
  font-size: 24px;
  font-weight: bold;
  color: #e75556;
  transition: transform 0.3s;
}

details[open] summary::after {
  transform: rotate(45deg);
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.6s ease-out;
}

/* Colorful gradient backgrounds */
.gradient-pink {
  background: linear-gradient(135deg, #ffb3ba 0%, #ffdfba 100%);
}

.gradient-blue {
  background: linear-gradient(135deg, #bae1ff 0%, #baffc9 100%);
}

.gradient-yellow {
  background: linear-gradient(135deg, #ffffba 0%, #ffdfba 100%);
}

.gradient-green {
  background: linear-gradient(135deg, #baffc9 0%, #bae1ff 100%);
}

.gradient-purple {
  background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%);
}

.gradient-orange {
  background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%);
}