/* ==========================================================
   TypingTutor.Online
   typography.css
   Version: 1.0
========================================================== */


/* ==========================================================
   BODY
========================================================== */

body{

    font-family:var(--font-body);

    font-size:var(--font-md);

    font-weight:var(--weight-normal);

    color:var(--text);

    background:var(--background);

    line-height:1.6;

}



/* ==========================================================
   HEADINGS
========================================================== */

h1,h2,h3,h4,h5,h6{

    font-family:var(--font-heading);

    font-weight:var(--weight-bold);

    line-height:1.2;

    color:var(--text);

}

h1{

    font-size:2rem;

}

h2{

    font-size:1.75rem;

}

h3{

    font-size:1.5rem;

}

h4{

    font-size:1.25rem;

}

h5{

    font-size:1.125rem;

}

h6{

    font-size:1rem;

}



/* ==========================================================
   HEADER
========================================================== */

.logo h1{

    font-size:1.8rem;

    letter-spacing:-0.5px;

}

.tagline{

    display:block;

    margin-top:4px;

    color:var(--text-light);

    font-size:.9rem;

}



/* ==========================================================
   LESSON
========================================================== */

#lessonTitle{

    font-size:1.15rem;

    font-weight:600;

    color:var(--primary);

    margin-bottom:10px;

}

#lessonText{

    font-family:var(--font-mono);

    font-size:2.25rem;

    font-weight:600;

    line-height:1.8;

    text-align:center;

    letter-spacing:1px;

}



/* ==========================================================
   STATISTICS
========================================================== */

.stat{

    text-align:center;

}

.stat .label{

    display:block;

    font-size:.85rem;

    text-transform:uppercase;

    letter-spacing:1px;

    color:var(--text-light);

}

.stat span:last-child{

    display:block;

    margin-top:6px;

    font-size:2rem;

    font-weight:700;

}



/* ==========================================================
   BUTTON
========================================================== */

button{

    font-family:var(--font-body);

    font-size:.95rem;

    font-weight:600;

}



/* ==========================================================
   CODE
========================================================== */

code,
pre{

    font-family:var(--font-mono);

}



/* ==========================================================
   LINKS
========================================================== */

a{

    transition:color var(--transition-fast);

}

a:hover{

    color:var(--primary);

}



/* ==========================================================
   FOOTER
========================================================== */

#footer{

    font-size:.9rem;

    color:var(--text-light);

}



/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:1024px){

    #lessonText{

        font-size:2rem;

    }

}


@media (max-width:768px){

    .logo h1{

        font-size:1.5rem;

    }

    #lessonText{

        font-size:1.6rem;

    }

    .stat span:last-child{

        font-size:1.5rem;

    }

}


@media (max-width:576px){

    #lessonText{

        font-size:1.3rem;

        line-height:1.7;

    }

}