html {
  scroll-behavior: smooth;
}

body {
  font-family: "Zen Maru Gothic", serif;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.45), transparent 28%),
    linear-gradient(180deg, #ffd5db 0%, #ffe6ea 38%, #ffdfe4 100%);
}

[data-theme="ymp"] {
  color-scheme: light;
  --color-base-100: #fffdfb;
  --color-base-200: #ffd5db;
  --color-base-300: #fff8f6;
  --color-base-content: #2e2a2a;
  --color-primary: #bdffef;
  --color-primary-content: #2e2a2a;
  --color-secondary: #ffd5db;
  --color-secondary-content: #2e2a2a;
  --color-accent: #faedc8;
  --color-accent-content: #6a5a3a;
  --color-neutral: #5a5053;
  --color-neutral-content: #fffdfb;
  --color-info: #cfeef6;
  --color-info-content: #23404a;
  --color-success: #ccefd8;
  --color-success-content: #1f4d32;
  --color-warning: #faedc8;
  --color-warning-content: #6a5a3a;
  --color-error: #efc0c5;
  --color-error-content: #5a1f2b;
  --radius-selector: 1rem;
  --radius-field: 1rem;
  --radius-box: 1.5rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 0;
  --noise: 0;
}

.font-script {
  font-family: "Dancing Script", cursive;
  font-weight: 600;
}

.btn {
  letter-spacing: 0.01em;
}

.btn-primary {
  box-shadow: 0 10px 24px rgba(123, 194, 174, 0.22);
}

.drawer-side .menu li > a {
  border-radius: 9999px;
}

.drawer-side .menu li > a:hover {
  background-color: var(--color-base-100);
}