/*==================================================
    RESET
==================================================*/

/*==============================================
    UNIVERSAL
==============================================*/

*,
*::before,
*::after{

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



/*==============================================
    ROOT
==============================================*/

html{

    scroll-behavior: smooth;

    font-size: 100%;

}



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

body{

    min-height: 100vh;

    overflow-x: hidden;

    background: var(--color-background);

    color: var(--color-text);

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

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

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

}



/*==============================================
    CONTAINER
==============================================*/

.container{

    width: min(var(--container-small), calc(100% - 40px));

    margin-inline: auto;

}



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

img{

    display: block;

    max-width: 100%;

    height: auto;

}



/*==============================================
    VIDEO
==============================================*/

video{

    display: block;

    width: 100%;

    height: auto;

}



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

a{

    text-decoration: none;

    color: inherit;

}



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

ul,
ol{

    list-style: none;

}



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

button{

    border: none;

    background: transparent;

    cursor: pointer;

    font: inherit;

}



/*==============================================
    INPUTS
==============================================*/

input,
textarea,
select{

    font: inherit;

    border: none;

    outline: none;

    background: transparent;

}



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

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

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

    line-height: 1.1;

    font-weight: 600;

}



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

p{

    line-height: 1.8;

}



/*==============================================
    SECTION
==============================================*/

section{

    position: relative;

    padding: 120px 0;

}



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

::selection{

    background: var(--color-primary);

    color: var(--color-white);

}



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

::-webkit-scrollbar{

    width: 10px;

}

::-webkit-scrollbar-track{

    background: var(--color-black);

}

::-webkit-scrollbar-thumb{

    background: var(--color-primary);

    border-radius: 999px;

}