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

body{

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

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

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

    line-height:1.6;

    color:var(--text-body);

    background:var(--bg-primary);

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

    text-rendering:optimizeLegibility;

}

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

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

    color:var(--text-title);

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

    line-height:1.2;

    letter-spacing:-0.02em;

}

h1{

    font-size:var(--fs-6xl);

}

h2{

    font-size:var(--fs-4xl);

}

h3{

    font-size:var(--fs-3xl);

}

h4{

    font-size:var(--fs-2xl);

}

h5{

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

}

h6{

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

}

/*==================================================
                    PARAGRAPHS
==================================================*/

p{

    margin:0;

    color:var(--text-body);

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

    line-height:1.8;

}

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

a{

    color:inherit;

    text-decoration:none;

    transition:var(--transition);

}

a:hover{

    color:var(--color-primary);

}

/*==================================================
                    LISTS
==================================================*/

ul,
ol{

    list-style:none;

    margin:0;

    padding:0;

}

/*==================================================
                    IMAGES
==================================================*/

img{

    display:block;

    max-width:100%;

    height:auto;

}

/*==================================================
                    BUTTONS
==================================================*/

button{

    font:inherit;

    color:inherit;

    background:none;

    border:none;

    cursor:pointer;

}

/*==================================================
                    FORM ELEMENTS
==================================================*/

input,
textarea,
select{

    font:inherit;

    color:inherit;

}

textarea{

    resize:vertical;

}

/*==================================================
                    STRONG
==================================================*/

strong{

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

}

/*==================================================
                    SMALL
==================================================*/

small{

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

}

/*==================================================
                    MARK
==================================================*/

mark{

    padding:.15rem .35rem;

    color:var(--color-dark);

    background:rgba(212,175,55,.25);

    border-radius:var(--radius-sm);

}

/*==================================================
                    SELECTION
==================================================*/

::selection{

    color:var(--color-white);

    background:var(--color-primary);

}

/*==================================================
                    SCROLLBAR
==================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:var(--color-gray-100);

}

::-webkit-scrollbar-thumb{

    background:var(--color-primary);

    border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--color-primary-dark);

}

/*==================================================
                    FOCUS
==================================================*/

:focus-visible{

    outline:2px solid var(--color-primary);

    outline-offset:3px;

}

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

@media (max-width:992px){

    h1{

        font-size:5rem;

    }

    h2{

        font-size:3.5rem;

    }

    h3{

        font-size:2.5rem;

    }

}

@media (max-width:768px){

    h1{

        font-size:3.5rem;

    }

    h2{

        font-size:2.75rem;

    }

    h3{

        font-size:2rem;

    }

    h4{

        font-size:1.75rem;

    }

    h5{

        font-size:1.35rem;

    }

    p{

        font-size:0.95rem;

    }

}

@media (max-width:480px){

    h1{

        font-size:2.75rem;

    }

    h2{

        font-size:2.2rem;

    }

    h3{

        font-size:1.75rem;

    }

}