/* ==========================================
   RhythmiX Advanced CSS Design
   Created by Emily
   Elegant Rhythmic Gymnastics Theme
========================================== */


/* ---------- Variables ---------- */

:root {

    --lavender: #e8d8ff;
    --pink: #ffd9e8;
    --blue: #d9f5ff;
    --mint: #dff7e8;
    --royal-blue: #355caa;
    --purple: #5b3b8c;
    --text: #34304a;

}



/* ---------- Universal Styling ---------- */


* {

    box-sizing:border-box;

    scroll-behavior:smooth;

}



body {


    margin:0;

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

    color:var(--text);

    line-height:1.7;


    background:

    linear-gradient(
        -45deg,
        #fdf4ff,
        #eef8ff,
        #f0fff6,
        #fff1f7
    );

    background-size:400% 400%;

    animation:backgroundMove 12s ease infinite;


}



@keyframes backgroundMove {


    0% {

        background-position:0% 50%;

    }


    50% {

        background-position:100% 50%;

    }


    100% {

        background-position:0% 50%;

    }


}





/* ---------- Headings ---------- */


h1,h2,h3 {


    font-family:"Playfair Display", serif;

    color:var(--purple);

}



h1 {


    font-size:4rem;

    animation:titleDrop 1s ease;


}



@keyframes titleDrop {


from {

    opacity:0;

    transform:translateY(-40px);

}


to {

    opacity:1;

    transform:translateY(0);

}


}




h2 {


    text-align:center;

    font-size:2.4rem;

    position:relative;


}



h2::after {


    content:"";

    display:block;

    width:80px;

    height:4px;

    background:linear-gradient(
        90deg,
        #ff9fc7,
        #82cfff
    );


    margin:15px auto;

    border-radius:10px;


}




/* ---------- Header ---------- */


header {


    text-align:center;

    padding:70px 20px;


    background:

    linear-gradient(
        135deg,
        #e8d8ff,
        #ffd9e8,
        #d9f5ff
    );


    border-bottom:5px solid #8fb8ff;


}




.tagline {


    font-size:1.5rem;

    color:var(--royal-blue);

    font-weight:700;

    letter-spacing:2px;


}



/* ---------- Navigation ---------- */


nav {


    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:15px;


    padding:18px;


    position:sticky;

    top:0;

    z-index:100;


    background:

    rgba(255,255,255,0.75);


    backdrop-filter:blur(12px);


    box-shadow:

    0 8px 25px rgba(80,70,120,.15);


}





nav a {


    color:var(--purple);

    text-decoration:none;

    font-weight:bold;


    padding:10px 18px;


    border-radius:30px;


    transition:

    all .35s ease;


}




nav a:hover {


    background:#b8e8ff;


    color:#244b9b;


    transform:

    translateY(-5px)

    scale(1.05);


    box-shadow:

    0 8px 15px rgba(53,92,170,.25);


}





/* ---------- Sections ---------- */


main {


    width:90%;

    max-width:1200px;

    margin:auto;


}




section {


    margin:45px 0;


    padding:35px;


    border-radius:30px;


    background:

    rgba(255,255,255,.75);


    backdrop-filter:blur(10px);


    box-shadow:

    0 15px 35px rgba(90,70,130,.12);


    transition:.4s ease;


}



section:hover {


    box-shadow:

    0 20px 45px rgba(90,70,130,.2);


}



/* ---------- Hero ---------- */


.hero {


    text-align:center;


    background:

    linear-gradient(
        135deg,
        #e8d8ff,
        #ffe0eb
    );


}




.hero h2 {


    font-size:3rem;

}




.button {


    display:inline-block;


    margin-top:25px;


    padding:15px 40px;


    border-radius:50px;


    background:

    linear-gradient(
        90deg,
        #355caa,
        #7c4dbd
    );


    color:white;


    font-weight:bold;


    text-decoration:none;


    transition:.4s;


    box-shadow:

    0 10px 20px rgba(53,92,170,.3);


}


.button:hover {


    transform:

    translateY(-7px)

    scale(1.08);


    box-shadow:

    0 15px 30px rgba(53,92,170,.45);


}

/* ---------- Cards ---------- */


.cards {


    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:25px;


}


.card {


    width:300px;


    padding:25px;


    text-align:center;


    border-radius:25px;

    background:

    linear-gradient(
        145deg,
        #fff1f7,
        #edf8ff
    );

    border:3px solid #dccbff;


    transition:.45s;


}


.card:hover {

    transform:

    translateY(-15px)

    rotate(1deg);


    border-color:#82cfff;


    box-shadow:

    0 15px 30px rgba(90,70,130,.25);

}

/* ---------- Apparatus Cards ---------- */

.apparatus-card {


    background:#f9f2ff;


    border-left:10px solid #8b6fc7;


    transition:.4s;


}

.apparatus-card:hover {


    transform:

    translateX(10px);


    background:#f1e7ff;


}


/* ---------- Gymnast Cards ---------- */


.gymnast-card {


    background:#fff5fa;


    border:3px solid #ffc7dd;


    border-radius:25px;


    transition:.4s;

}



.gymnast-card:hover {


    transform:

    scale(1.02);
}

.gymnast-card img {


    width:250px;

    height:300px;

    object-fit:cover;


    border-radius:20px;


    transition:.5s;

}


.gymnast-card img:hover {


    transform:

    scale(1.08);


    filter:

    brightness(1.1);

}

/* ---------- Gallery ---------- */


.gallery {

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:25px;

}

figure {


    overflow:hidden;

    border-radius:20px;

    transition:.4s;


}


figure:hover {


    transform:

    translateY(-10px);


}


.gallery img {


    width:260px;

    height:220px;

    object-fit:cover;


    transition:.5s;

}
.gallery img:hover {


    transform:

    scale(1.15);

}
figcaption {


    text-align:center;

    font-weight:bold;

    padding:10px;

    color:var(--purple);

}
/* ---------- Tables ---------- */
table {
  width:100%;

    border-collapse:collapse;

}

th {
    background:var(--purple);

    color:white;

    padding:15px;

}

td {


    padding:15px;

    border:1px solid #ddd;


}



tr:hover {


    background:#f5efff;


}





/* ---------- Footer ---------- */


footer {


    background:var(--purple);


    color:white;


    text-align:center;


    padding:30px;


}



/* ---------- Mobile ---------- */


@media(max-width:768px){


h1{

font-size:2.8rem;

}


nav{


flex-direction:column;

align-items:center;


}


section{


padding:20px;


}


}