/* ==========================================================
   TYPOGRAPHY
========================================================== */

/* Base */

body{

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

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

    color:var(--text);

    line-height:1.8;

}

/* ==========================================
   Headings
========================================== */

h1{

    font-size:56px;

    font-weight:800;

    line-height:1.15;

    color:var(--secondary);

    margin-bottom:24px;

}

h2{

    font-size:40px;

    font-weight:700;

    line-height:1.25;

    margin-bottom:20px;

}

h3{

    font-size:30px;

    font-weight:700;

    margin-bottom:18px;

}

h4{

    font-size:24px;

    font-weight:600;

    margin-bottom:16px;

}

h5{

    font-size:20px;

    font-weight:600;

    margin-bottom:14px;

}

h6{

    font-size:18px;

    font-weight:600;

    margin-bottom:12px;

}

/* ==========================================
   Paragraph
========================================== */

p{

    margin-bottom:20px;

    color:var(--text-light);

    font-size:18px;

    line-height:1.9;

}

/* ==========================================
   Lists
========================================== */

ul,

ol{

    margin:20px 0 20px 30px;

}

li{

    margin-bottom:12px;

    line-height:1.8;

}

/* ==========================================
   Links
========================================== */

a{

    color:var(--primary-dark);

    transition:var(--transition);

}

a:hover{

    color:var(--primary);

}

/* ==========================================
   Strong
========================================== */

strong{

    color:var(--secondary);

    font-weight:700;

}

/* ==========================================
   Small
========================================== */

small{

    color:var(--text-muted);

}

/* ==========================================
   Code
========================================== */

code{

    background:#F3F4F6;

    padding:3px 8px;

    border-radius:6px;

    font-family:Consolas,monospace;

    font-size:15px;

}

pre{

    background:#0F172A;

    color:#F8FAFC;

    padding:24px;

    border-radius:16px;

    overflow-x:auto;

    margin:25px 0;

}

pre code{

    background:none;

    color:inherit;

    padding:0;

}

/* ==========================================
   Blockquote
========================================== */

blockquote{

    margin:30px 0;

    padding:20px 25px;

    border-left:5px solid var(--primary);

    background:#F8FAFC;

    font-size:18px;

    font-style:italic;

}

/* ==========================================
   Tables
========================================== */

table{

    width:100%;

    border-collapse:collapse;

    margin:30px 0;

}

th{

    background:var(--primary);

    color:#fff;

    padding:16px;

    text-align:left;

}

td{

    padding:16px;

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

}

tbody tr:nth-child(even){

    background:#F8FAFC;

}

/* ==========================================
   Lesson Images
========================================== */

.lesson-image{

    margin:40px auto;

    border-radius:16px;

    overflow:hidden;

}

.lesson-image img{

    width:100%;

}

/* ==========================================
   Responsive
========================================== */

@media(max-width:768px){

h1{

font-size:38px;

}

h2{

font-size:30px;

}

h3{

font-size:24px;

}

p{

font-size:16px;

}

}