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

body { 
    font-family: 'Fredoka', sans-serif; /* Round and cute font */
    background-color: #fff9e6; 
    margin: 0; 
    padding: 0; 
    cursor: url('https://cdn-icons-png.flaticon.com/32/2664/2664531.png'), auto; /* Fun Cursor */
}

header { 
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%); 
    padding: 40px; 
    text-align: center; 
    color: white; 
    border-bottom: 8px solid #fff;
    box-shadow: 0 10px 0 #ffebf0;
}

header h1 { font-size: 3rem; text-shadow: 2px 2px #ff6b6b; margin: 0; }

nav { 
    background: #fff; 
    padding: 20px; 
    text-align: center; 
    border-radius: 0 0 40px 40px;
    margin-bottom: 20px;
}

nav a { 
    text-decoration: none; 
    color: #ff6b6b; 
    font-weight: 600; 
    margin: 0 12px; 
    padding: 12px 25px; 
    border-radius: 30px; 
    background: #fff0f3;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: inline-block;
}

nav a:hover { 
    background: #4facfe; 
    color: white; 
    transform: scale(1.2) rotate(3deg); /* Fun pop effect */
}

.container { display: flex; justify-content: center; flex-wrap: wrap; padding: 20px; }

.card { 
    background: white; 
    border-radius: 35px; /* Extra rounded corners */
    border: 5px solid #fff;
    box-shadow: 0 15px 35px rgba(255, 107, 107, 0.1); 
    margin: 20px; 
    padding: 20px; 
    width: 320px; 
    transition: 0.4s;
    position: relative;
    overflow: hidden;
}

.card:hover { transform: translateY(-15px); box-shadow: 0 25px 45px rgba(0,0,0,0.1); }

/* Cartoonish Border for Video */
.video-box { 
    border: 8px solid #ffeaa7;
    border-radius: 25px; 
    overflow: hidden;
}

h2 { color: #48c6ef; font-size: 1.5rem; text-align: center; }

/* Add floating bubbles in background */
body::before {
    content: "🎈"; position: fixed; top: 10%; left: 5%; font-size: 40px; opacity: 0.3; animation: float 6s infinite ease-in-out;
}
body::after {
    content: "🌟"; position: fixed; bottom: 10%; right: 5%; font-size: 40px; opacity: 0.3; animation: float 8s infinite ease-in-out;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-30px); }
}