body.light{
    background:#111;
    color:#fff;
}

/* Navbar */
body.light .logo,
body.light .nav-links a{
    color:#fff;
}

body.light .nav-links a:hover{
    color:#89b4fa;
}

/* Hero */
body.light .hero h1,
body.light .hero p,
body.light .auto-text{
    color:#fff;
}

/* Features */
body.light .features h2{
    color:#fff;
}

/* Cards */
body.light .card{
    background:#4b2e0a;
}

body.light .card h3,
body.light .card p{
    color:#fff;
}

/* Stats */
body.light .stat-box{
    background:#4b2e0a;
}

body.light .stat-box h2,
body.light .stat-box p{
    color:#fff;
}

/* Footer */
body.light footer{
    border-top:1px solid #666;
}

body.light footer h3,
body.light footer p,
body.light footer small{
    color:#fff;
}

/* Typing test pages */
body.light .container,
body.light .result-container{
    background:#624016;
    color:#fff;
}

body.light .result-container{
    border:2px solid #ccc;
}

body.light .text-box{
    background:#4b2e0a;
    color:#fff;
}

body.light .input-box{
    background:#513009;
    color:#fff;
    border:2px solid #fff;
}

body.light table{
    background:#624016;
}

body.light th,
body.light td{
    color:#fff;
    border-bottom:1px solid #fff;
}

body.light #stats{
    background:#624016;
    color:#fff;
    border:2px solid #fff;
    padding:15px;
    border-radius:10px;
}


/* Typing Test Dark Mood*/

body.light .typing-container{
    color:#fff;
}

body.light .title{
    color:#fff;
}

body.light .stat-box{
    background:#2b2b2b;
}

body.light .stat-box h2{
    color:#fff;
}

body.light .label{
    color:#cfcfcf;
}

body.light #typing-box{
    background:#2b2b2b;
}

body.light #text-display{
    color:#fff;
}

body.light #text-display span{
    color:#777;
}

body.light .correct{
    color:#4caf50 !important;
}

body.light .incorrect{
    color:#ff4d4d !important;
}

body.light .current::after{
    background:#fff;
}

body.light .result-card{
    background:#2b2b2b;
}

body.light .result-card h2,
body.light .result-row,
body.light .result-row b{
    color:#fff;
}


/* ================= DARK MODE ================= */

body.light{
    --bg:#111111;
    --bg-soft:#1b1b1b;

    --brown-900:#ffffff;
    --brown-800:#f2f2f2;
    --brown-700:#dddddd;
    --brown-600:#cfcfcf;
    --brown-500:#bdbdbd;
    --brown-400:#9f9f9f;
    --brown-300:#8b8b8b;

    --cream:#2a2a2a;

    --gold:#89b4fa;

    --good:#6dd57f;
    --bad:#ff6b6b;

    --shadow:0 12px 28px rgba(0,0,0,.45);
}

/* Backgrounds */

body.light .keyboard{
    background:#1b1b1b;
    box-shadow:inset 0 0 0 2px #3d3d3d,var(--shadow);
}

body.light .key{
    background:#3a3a3a;
    color:#fff;
}

body.light .key.dim{
    background:#262626;
    color:#888;
}

body.light .key.home,
body.light .key.target-row{
    background:var(--gold);
    color:#111;
}

body.light section.card{
    border-color:#333;
}

body.light .timer-bar{
    background:#333;
}

body.light #typedInput{
    border-color:#555;
}

body.light #typedInput::placeholder{
    color:#999;
}

body.light .target-text span.pending{
    color:#777;
}

body.light .info-item span,
body.light .section-sub,
body.light .prompt-label{
    color:#cfcfcf;
}

/* Theme Toggle Button */

#theme-toggle{
    background:#805004;
    color:#fff;
    border:none;
}

#theme-toggle:hover{
    background:#5c3d00;
}

/* Dark Mode */

body.light #theme-toggle{
    background:#805004;
    color:#ffffff;
}

body.light #theme-toggle:hover{
    background:#a06f1a;
}