/*   ======================== VARIAVEIS CSS ========================  */

:root {
    /*   =================== COLORS ===================  */
    --linear-gradient-sidebar: linear-gradient(90deg, #FEEE56 9.27%, #25C07D 54.92%, #002BE7 90.68%);
    --text-header: hsla(0, 0%, 100%, 1);
    --button-whats: hsla(141, 63%, 51%, 1);
    --background-hover: hsla(12, 100%, 50%, 1);
    --background-scroll: rgb(153, 42, 14);
    --button-whats-icon: hsla(131, 100%, 81%, 1);
    --border-button: hsla(131, 95%, 19%, 1);
    --background-card: hsla(38, 96%, 60%, 1);
    --icon-card: hsla(26, 87%, 45%, 1);
    --text-card: hsla(0, 0%, 0%, 1);
    --text-gray: hsla(202, 11%, 46%, 1);
    --text-screen: hsla(220, 17%, 49%, 1);
    --accordion: hsla(211, 46%, 7%, 1);
    --footer: hsla(210, 44%, 7%, 1);
    --modal: hsl(12, 100%, 50%);
    --card-net: hsl(48, 92%, 69%);
}


/* ====================== SCROLL BAR ====================== */

::-webkit-scrollbar {
    width: .6rem;
    border-radius: .5rem;
    background-color: hsla(12, 100%, 50%, 1);
}

::-webkit-scrollbar-thumb {
    width: .6rem;
    height: 16rem;
    border-radius: .1rem;
    background-color: rgb(247, 198, 113);
}

::-webkit-scrollbar-thumb:hover {
    background-color: hsl(195, 2%, 42%);
}


/*   ======================== BASE ========================  */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html::-webkit-scrollbar-thumb {
    background: var(--second-color);
    border-radius: 5rem;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 20px;
    background-color: #ece7e7;
}

body {
    font-family: "Inter Tight", serif;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

object,
embed,
video,
iframe,
iframe[style] {
    max-width: 100%;
    height: auto;
}

b,
strong {
    font-weight: bold;
}

.container {
    max-width: 1570px;
    margin: 0 auto;
    padding-inline: 1.8rem;
}