/* ==========================================================
   techOdec Typography
   ========================================================== */

html{

    font-size:16px;

}

body{

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

    font-size:var(--fs-body);

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

    line-height:var(--lh-body);

    color:var(--color-text);

    background:var(--color-background);

}

/* ----------------------------------------------------------
   Headings
---------------------------------------------------------- */

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

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

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

    line-height:var(--lh-tight);

    color:var(--color-text);

    letter-spacing:-0.02em;

    margin-bottom:var(--space-md);

}

h1{

    font-size:var(--fs-display);

}

h2{

    font-size:var(--fs-h1);

}

h3{

    font-size:var(--fs-h2);

}

h4{

    font-size:var(--fs-h3);

}

h5{

    font-size:1.25rem;

}

h6{

    font-size:1rem;

}

/* ----------------------------------------------------------
   Paragraph
---------------------------------------------------------- */

p{

    margin-bottom:var(--space-md);

    color:var(--color-text-light);

    max-width:70ch;

}

/* ----------------------------------------------------------
   Links
---------------------------------------------------------- */

a{

    transition:color var(--transition);

}

a:hover{

    color:var(--color-primary);

}

/* ----------------------------------------------------------
   Lists
---------------------------------------------------------- */

ul,
ol{

    margin-bottom:var(--space-md);

}

li{

    margin-bottom:var(--space-xs);

}

/* ----------------------------------------------------------
   Strong
---------------------------------------------------------- */

strong{

    color:var(--color-text);

    font-weight:var(--fw-semibold);

}

/* ----------------------------------------------------------
   Small
---------------------------------------------------------- */

small{

    font-size:var(--fs-small);

}

/* ----------------------------------------------------------
   Blockquote
---------------------------------------------------------- */

blockquote{

    margin:var(--space-xl) 0;

    padding-left:var(--space-lg);

    border-left:4px solid var(--color-primary);

    font-style:italic;

    color:var(--color-text);

}

/* ----------------------------------------------------------
   Code
---------------------------------------------------------- */

code{

    padding:2px 6px;

    border-radius:6px;

    background:#efe9df;

    font-size:.9em;

}

/* ----------------------------------------------------------
   Selection
---------------------------------------------------------- */

::selection{

    background:var(--color-primary);

    color:#fff;

}