/* ===========================================
   NUSACODE AI
   Main Style
   Version : Sprint 1B
=========================================== */

/* RESET */

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

/* ROOT COLOR */

:root{

    --bg:#081229;

    --sidebar:#101828;

    --card:rgba(255,255,255,.06);

    --card-hover:rgba(255,255,255,.10);

    --primary:#38BDF8;

    --secondary:#8B5CF6;

    --success:#22C55E;

    --warning:#F59E0B;

    --danger:#EF4444;

    --text:#FFFFFF;

    --text2:#B8C1CC;

    --border:rgba(255,255,255,.08);

    --radius:18px;

    --transition:.35s;

    --shadow:0 10px 30px rgba(0,0,0,.35);

}

/* BODY */

body{

    background:linear-gradient(
        135deg,
        #081229,
        #0F172A,
        #111827
    );

    color:var(--text);

    font-family:
    "Segoe UI",
    Arial,
    sans-serif;

    overflow:hidden;

}

/* PAGE */

.page{

    display:none;

    width:100%;

    height:100vh;

}

.active{

    display:flex;

}

/* TEXT */

h1{

    font-size:42px;

    font-weight:700;

}

h2{

    font-size:32px;

}

h3{

    font-size:20px;

}

p{

    color:var(--text2);

    line-height:1.7;

}

/* BUTTON */

button{

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary)
    );

    border:none;

    color:white;

    padding:15px 35px;

    border-radius:12px;

    cursor:pointer;

    transition:var(--transition);

    font-size:16px;

    font-weight:bold;

}

button:hover{

    transform:translateY(-3px);

    box-shadow:0 0 25px rgba(56,189,248,.35);

}

/* CARD */

.card{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:var(--radius);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    box-shadow:var(--shadow);

    transition:var(--transition);

}

.card:hover{

    background:var(--card-hover);

    transform:translateY(-6px);

}

/* SCROLL */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#0F172A;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:20px;

}

/* PROGRESS */

.progress{

    width:420px;

    height:12px;

    background:#1E293B;

    border-radius:20px;

    overflow:hidden;

    margin-top:20px;

}

#progressBar{

    width:0%;

    height:100%;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary)
    );

}

/* LOGO */

.logo-circle{

    width:120px;

    height:120px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:40px;

    font-weight:bold;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    box-shadow:

    0 0 20px rgba(56,189,248,.5),

    0 0 50px rgba(139,92,246,.35);

}

/* SELECTION */

::selection{

    background:var(--primary);

    color:white;

}