* {
    box-sizing: border-box;
}


body {

    margin:0;

    min-height:100vh;

    padding:20px;

    font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

    color:white;

    background:
    radial-gradient(
        circle at top,
        #1d4ed8,
        #020617 70%
    );

}



#app {

    max-width:900px;

    margin:auto;

    opacity:0;

    animation:
    appReveal 1.2s ease forwards;

    animation-delay:4.2s;

}





/* -----------------
LOADING SCREEN
----------------- */


#loadingScreen {

    position:fixed;

    inset:0;

    z-index:1000;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    background:

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

    animation:

    loadingExit 1.3s
    cubic-bezier(.4,0,.2,1)
    forwards;

    animation-delay:4s;

}



.backgroundGlow {

    position:absolute;

    width:500px;

    height:500px;

    background:
    radial-gradient(
        circle,
        rgba(96,165,250,.35),
        transparent 70%
    );

    animation:

    glowMove 8s infinite;

}




.loadingContent {

    text-align:center;

    position:relative;

    z-index:2;

}




.loadingNavi {

    width:180px;

    animation:

    naviEnter 1.5s ease,
    naviFloat 5s infinite ease-in-out;

}



.loadingContent h1 {

    font-size:52px;

    margin:15px 0 5px;

    letter-spacing:-2px;

}



.loadingContent p {

    color:#cbd5e1;

    font-size:18px;

}





.loadingBar {

    width:260px;

    height:8px;

    background:

    rgba(255,255,255,.15);

    border-radius:20px;

    margin:30px auto;

    overflow:hidden;

}



.loadingBar div {

    height:100%;

    width:40%;

    background:

    linear-gradient(
        90deg,
        #60a5fa,
        #facc15
    );

    border-radius:20px;

    animation:

    loadProgress 3.5s ease;

}







/* -----------------
HEADER
----------------- */


header {

    display:flex;

    justify-content:space-between;

    align-items:center;

}



header p {

    color:#94a3b8;

}



.stats {

    display:flex;

    gap:15px;

    font-size:22px;

}







/* -----------------
CARDS
----------------- */


.card {

    margin-top:22px;

    padding:25px;

    border-radius:30px;

    background:

    rgba(255,255,255,.08);

    border:

    1px solid rgba(255,255,255,.12);

    backdrop-filter:

    blur(25px);

    box-shadow:

    0 20px 50px
    rgba(0,0,0,.25);

}





.hero {

    display:flex;

    justify-content:space-between;

    align-items:center;

}




/* -----------------
nAvi
----------------- */


.navi {

    width:150px;

    animation:

    naviFloat 5s infinite
    cubic-bezier(.45,.05,.55,.95);

}



.navi:hover {

    transform:
    scale(1.05);

}






/* -----------------
LESSONS
----------------- */


.lesson {

    display:flex;

    align-items:center;

    gap:20px;

    padding:18px;

    margin:15px 0;

    border-radius:22px;

    background:

    rgba(0,0,0,.18);

    cursor:pointer;

    transition:.35s;

}



.lesson:hover {

    transform:

    translateX(10px);

    background:

    rgba(255,255,255,.15);

}



.lessonIcon {

    font-size:35px;

}



.locked {

    opacity:.45;

}




button {

    width:100%;

    border:none;

    border-radius:20px;

    padding:16px;

    margin-top:15px;

    font-size:18px;

    font-weight:600;

    color:white;

    cursor:pointer;

    background:

    linear-gradient(
        135deg,
        #2563eb,
        #3b82f6
    );

    transition:.3s;

}



button:hover {

    transform:

    translateY(-3px);

}



button:active {

    transform:

    scale(.97);

}





input {

    width:100%;

    padding:16px;

    border-radius:18px;

    border:none;

    font-size:18px;

    margin-top:15px;

}




.hidden {

    display:none;

}






/* -----------------
ANIMATIONS
----------------- */



@keyframes appReveal {

    from {

        opacity:0;

        transform:
        translateY(30px);

    }

    to {

        opacity:1;

        transform:
        translateY(0);

    }

}



@keyframes loadingExit {

    to {

        opacity:0;

        transform:
        scale(1.08);

        pointer-events:none;

    }

}



@keyframes naviEnter {

    from {

        opacity:0;

        transform:
        scale(.7);

    }

    to {

        opacity:1;

        transform:
        scale(1);

    }

}



@keyframes naviFloat {

    0%,100% {

        transform:
        translateY(0);

    }

    50% {

        transform:
        translateY(-8px);

    }

}



@keyframes glowMove {

    50% {

        transform:
        translate(80px,40px);

    }

}



@keyframes loadProgress {

    from {

        width:0;

    }

    to {

        width:100%;

    }

}




@media(max-width:600px){

    body {

        padding:15px;

    }


    header,
    .hero {

        flex-direction:column;

        gap:20px;

        align-items:flex-start;

    }


    .navi {

        width:120px;

    }


}