@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@400;700&family=Outfit:wght@400;600;700;800&display=swap');

/* GLOBAL KAWAII GRID BACKGROUND */
body {
    background-color: #fff0f5; /* Very soft pink */
    background-image: 
        linear-gradient(rgba(255, 182, 193, 0.4) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 182, 193, 0.4) 1px, transparent 1px);
    background-size: 20px 20px;
    color: #2d2d2d;
    font-family: 'Outfit', sans-serif;
    overflow-x: hidden;
    animation: scrollGrid 15s linear infinite;
}

@keyframes scrollGrid {
    0% { background-position: 0px 0px; }
    100% { background-position: 40px 40px; }
}

h1, h2, h3, h4, h5, h6, .font-kalam {
    font-family: 'Kalam', cursive;
}

/* KAWAII CARDS (Clean borders, rounded corners, solid shadows) */
.kawaii-card {
    background-color: #ffffff;
    border: 3px solid #2d2d2d;
    border-radius: 20px;
    box-shadow: 6px 6px 0px 0px rgba(255, 182, 193, 1); /* Pink shadow */
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.kawaii-card:hover {
    transform: translateY(-4px);
    box-shadow: 10px 10px 0px 0px rgba(255, 182, 193, 1);
}

.kawaii-card-blue {
    box-shadow: 6px 6px 0px 0px #a2d2ff;
}
.kawaii-card-blue:hover { box-shadow: 10px 10px 0px 0px #a2d2ff; }

.kawaii-card-yellow {
    box-shadow: 6px 6px 0px 0px #fdfd96;
}
.kawaii-card-yellow:hover { box-shadow: 10px 10px 0px 0px #fdfd96; }

.kawaii-card-black {
    box-shadow: 6px 6px 0px 0px #2d2d2d;
}
.kawaii-card-black:hover { box-shadow: 10px 10px 0px 0px #2d2d2d; }

/* KAWAII BUTTONS & TAGS */
.kawaii-tag {
    display: inline-block;
    padding: 4px 12px;
    border: 2px solid #2d2d2d;
    border-radius: 9999px;
    font-weight: 700;
    box-shadow: 3px 3px 0px 0px #2d2d2d;
    transition: transform 0.2s;
}
.kawaii-tag:hover {
    transform: scale(1.05);
}

/* COLORS */
.text-kawaii-pink { color: #ff8fab; }
.text-kawaii-blue { color: #a2d2ff; }
.text-kawaii-purple { color: #cdb4db; }
.bg-kawaii-pink { background-color: #ff8fab; }
.bg-kawaii-blue { background-color: #a2d2ff; }
.bg-kawaii-purple { background-color: #cdb4db; }
.bg-kawaii-yellow { background-color: #fdfd96; }

/* STICKER STYLES */
.sticker {
    background: white;
    padding: 8px;
    border: 3px solid #2d2d2d;
    border-radius: 50%;
    box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.1);
}

/* HIGHLIGHTS */
.cute-highlight {
    background: linear-gradient(180deg, transparent 50%, #fdfd96 50%);
    display: inline-block;
}
.cute-highlight-pink {
    background: linear-gradient(180deg, transparent 50%, #ffc2d1 50%);
    display: inline-block;
}

/* PHOTO FRAME */
.cute-frame {
    border: 4px solid #2d2d2d;
    border-radius: 30px;
    padding: 8px;
    background: white;
    box-shadow: 8px 8px 0px 0px #ffb3c6;
}
.cute-frame img {
    border-radius: 20px;
    border: 2px solid #2d2d2d;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 14px; }
::-webkit-scrollbar-track { background: #fff0f5; border-left: 2px solid #ffb3c6; }
::-webkit-scrollbar-thumb { background: #ff8fab; border-radius: 10px; border: 2px solid #fff; }

/* Floating Particles Animation */
@keyframes floatUp {
    0% { transform: translateY(10vh) rotate(0deg); opacity: 0; }
    10% { opacity: 0.6; }
    90% { opacity: 0.6; }
    100% { transform: translateY(-110vh) rotate(360deg); opacity: 0; }
}
.animate-float-up {
    animation: floatUp 12s linear infinite;
}