/* =====================================
   PYTHON KIDS LEARNING THEME
   COMPACT VERSION
===================================== */


*{
    box-sizing:border-box;
}
img{
    border-radius: 100px;
      box-shadow:0 0 20px rgba(136, 255, 107, 0.9);
}

body{


margin:0;

font-family:"Segoe UI",Arial;

background:
linear-gradient(
120deg,
#0f2027,
#203a43,
#2c5364
);


color:white;


overflow-x:hidden;


}



body::before{


content:"";


position:fixed;


width:300px;

height:300px;


background:#00ffff;


border-radius:50%;


filter:blur(100px);


top:50px;

left:20px;


animation:
move 10s infinite alternate;


z-index:-1;


}



@keyframes move{


from{

transform:translate(0,0);

}


to{

transform:translate(700px,500px);

}


}




/* HEADER */

header{

background:
linear-gradient(135deg,#667eea,#764ba2,#00c6ff);

padding:60px 20px;

text-align:center;

color:white;

overflow:hidden;

position:relative;

animation:headerMove 5s infinite alternate;

}


@keyframes headerMove{

from{
background-position:left;
}

to{
background-position:right;
}

}



.python-logo{

font-size:100px;

animation:
float 3s infinite ease-in-out;

}



@keyframes float{

0%{
transform:translateY(0px) rotate(0deg);
}


50%{
transform:translateY(-25px) rotate(10deg);
}


100%{
transform:translateY(0px) rotate(0deg);
}


}



header h1{

font-size:100px;

text-shadow:
0 0 10px yellow;

animation:
typing 3s steps(30);


}


@keyframes typing{

from{
width:0;
}

to{
width:100%;
}

}

/* NAVIGATION */

nav{


display:flex;

justify-content:center;

gap:15px;

padding:20px;


background:#111827;


position:sticky;

top:0;

z-index:100;


}



nav a{


padding:12px 25px;


border-radius:30px;


background:
linear-gradient(45deg,#ff9966,#ff5e62);


color:white;


text-decoration:none;


font-weight:bold;


transition:.4s;


}



nav a:hover{


transform:
translateY(-8px)
scale(1.1);


box-shadow:
0 10px 25px cyan;


}





/* MAIN */

main{

    width:95%;

    max-width:1100px;

    margin:auto;

    padding:15px;

}





/* LEARNING BOX */


.learning-box{

    background:#172554;

    border-left:5px solid #FFD43B;

    padding:12px 20px;

    margin-bottom:20px;

    border-radius:10px;

}



.learning-box h2{

    margin:5px 0;

    color:#FFD43B;

}



.learning-box ul{

    margin:5px;

    padding-left:20px;

}



.learning-box li{

    margin:3px;

}







/* CARD */

.card{


margin:40px auto;


max-width:1100px;


background:


rgba(255,255,255,.12);


backdrop-filter:
blur(15px);


border-radius:25px;


padding:30px;


box-shadow:


0 20px 40px rgba(0,0,0,.3);



transition:.5s;


animation:

showCard 1s;


}




.card:hover{


transform:

translateY(-15px)
rotateX(5deg);


box-shadow:

0 30px 60px cyan;


}




@keyframes showCard{


from{

opacity:0;

transform:
translateY(80px);

}


to{

opacity:1;

transform:
translateY(0);

}


}





/* TITLE */


.title{

    background:#3776AB;

    padding:12px 18px;

}



.title h2{

    margin:0;

    color:#FFD43B;

    font-size:21px;

}



.title p{

    margin:3px 0;

    font-size:14px;

}





/* CONTENT */


.content{

    display:grid;

    grid-template-columns:1fr 1fr;

}





.code{


background:

linear-gradient(
135deg,
#1e293b,
#020617
);


border-radius:20px;


padding:20px;


border:

3px solid #22d3ee;



}



.code h3{


color:#38bdf8;


font-size:20px;


}



pre{


border-radius:15px;


font-size:36px;


}


h3{

    margin:5px 0 8px;

    color:#FFD43B;

    font-size:17px;

}





/* PYTHON CODE AREA */


pre{

    margin:0 !important;

    padding:12px !important;

    border-radius:8px !important;

    font-size:14px !important;

    line-height:1.25 !important;

    background:#0D1117 !important;

}



code{

    line-height:1.25 !important;

}






/* TERMINAL OUTPUT */


.terminal{

    background:#000;

    color:#00FF66;

    padding:12px;

    border-radius:8px;

    font-family:Consolas,monospace;

    font-size:14px;

    line-height:1.25;

}


.terminal p{

    margin:3px 0;

}



.terminal hr{

    border:0;

    border-top:1px solid #555;

    margin:6px 0;

}



.result{

    color:#FFD43B;

    font-size:18px;

    font-weight:bold;

}





/* CHALLENGE BOX */


.challenge{


background:#422006;

border-left:5px solid #FFD43B;

padding:10px;

font-size:14px;

color:#fde68a;


}







/* FOOTER */


footer{

    background:#3776AB;

    text-align:center;

    padding:12px;

    font-size:10px;

}





/* MOBILE */

@media(max-width:800px){


.content{

    grid-template-columns:1fr;

}


header h1{

    font-size:50px;

}


}
@media(max-width:1024px){


    header h1{

        font-size:70px;

    }


    .card{

        padding:20px;

    }


    .content{

        grid-template-columns:1fr;

    }


    nav{

        flex-wrap:wrap;

    }


}






/* MOBILE PHONES */

@media(max-width:600px){


    body{

        overflow-x:hidden;

    }



    header{

        padding:35px 10px;

    }



    header h1{

        font-size:38px;

        word-break:break-word;

    }



    header h2{

        font-size:22px;

    }



    .python-logo{

        font-size:60px;

    }



    img{

        max-width:80%;

        height:auto;

    }





    nav{


        flex-direction:column;

        gap:8px;

        padding:10px;


    }



    nav a{


        width:95%;

        text-align:center;

        padding:10px;


    }






    main{


        width:100%;

        padding:10px;


    }






    .card{


        margin:20px 0;

        padding:15px;

        border-radius:15px;


    }







    .title h2{


        font-size:18px;


    }







    .content{


        grid-template-columns:1fr;


    }







    .code{


        padding:10px;


    }







    pre{


        max-width:100%;

        overflow-x:auto;

        white-space:pre-wrap;

        word-wrap:break-word;


    }







    code{


        font-size:12px !important;


    }







    .terminal{


        overflow-x:auto;

        font-size:12px;


    }







    .learning-box{


        padding:10px;


    }







    .challenge{


        font-size:13px;


    }







    footer{


        font-size:12px;


    }



}







/* SMALL PHONES (320px - 375px) */

@media(max-width:375px){



    header h1{


        font-size:30px;


    }





    header h2{


        font-size:18px;


    }





    nav a{


        font-size:13px;


    }





    .card{


        padding:10px;


    }





    pre code{


        font-size:11px !important;


    }



}