*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

font-family:'Quicksand',sans-serif;

background:linear-gradient(180deg,#ffeef5,#fff7fb,#fffafc);

color:#75556a;

overflow-x:hidden;

}

/* خلفية */

body::before{

content:"";

position:fixed;

inset:0;

background-image:
radial-gradient(#ffd7ea 2px,transparent 2px),
radial-gradient(#fff 2px,transparent 2px);

background-size:70px 70px;

opacity:.35;

pointer-events:none;

}

/* الحاوية */

.container{

max-width:1100px;

margin:auto;

padding:40px 20px;

}

/* الهيدر */

header{

background:white;

border-radius:30px;

padding:35px;

text-align:center;

box-shadow:0 10px 30px rgba(255,181,208,.35);

margin-bottom:35px;

}

header h1{

font-size:48px;

margin-bottom:10px;

color:#ff74a9;

}

header p{

font-size:18px;

margin-bottom:25px;

}

nav{

display:flex;

justify-content:center;

gap:15px;

flex-wrap:wrap;

}

nav a{

background:#ffd9ea;

text-decoration:none;

padding:12px 22px;

border-radius:999px;

font-weight:700;

color:#7a5772;

transition:.25s;

}

nav a:hover{

background:#ffb6d4;

transform:translateY(-3px);

}

/* الأقسام */

.hero{

display:grid;

grid-template-columns:2fr 1fr;

gap:25px;

margin-bottom:30px;

}

.card{

background:white;

border-radius:28px;

padding:30px;

box-shadow:0 8px 25px rgba(255,184,215,.25);

margin-bottom:25px;

transition:.3s;

}

.card:hover{

transform:translateY(-5px);

}

.card h2{

color:#ff72a8;

margin-bottom:15px;

}

.card p{

line-height:1.8;

}

.card ul{

padding-left:20px;

line-height:2;

}

.bunny{

display:flex;

justify-content:center;

align-items:center;

font-size:65px;

}

/* الموسيقى */

audio{

width:100%;

margin-top:15px;

}

/* الفوتر */

footer{

margin-top:40px;

text-align:center;

padding:25px;

font-size:15px;

}

/* النجوم */

.sparkles{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

pointer-events:none;

overflow:hidden;

}

.sparkles span{

position:absolute;

font-size:18px;

animation:float 10s linear infinite;

opacity:.7;

}

@keyframes float{

0%{

transform:translateY(100vh) rotate(0);

opacity:0;

}

10%{

opacity:1;

}

100%{

transform:translateY(-120vh) rotate(360deg);

opacity:0;

}

}

/* الجوال */

@media(max-width:800px){

.hero{

grid-template-columns:1fr;

}

header h1{

font-size:34px;

}

nav{

gap:10px;

}

nav a{

padding:10px 18px;

}

.card{

padding:22px;

}
.youtube-player{
width:350px;
height:350px;
margin:auto;
overflow:hidden;
border-radius:20px;
}

.youtube-player iframe{
width:100%;
height:100%;
border:none;
}
}