:root {
    --bodyBG: #f5f5f5;
    --bodyFont :#2b3445;
    --blue :#9fc5ef ;
    --icons:#40464d ;
    --blue-button: #1976d2;
    --red-button: #e41d43;
    --footer-bg: #212529;
    --white: #fff;
}

body {
    background-color: var(--bodyBG);
    color: var(--bodyFont);
}
.dark {
    --bodyBG: black;
        --bodyFont: white;
}


.border {
    border: 4px solid red;
}
.flex {
    display: flex;
    align-items: center;
    
}

*{
    margin: 0;
    padding: 0;
}
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap");
html {
    font-family: system-ui, -apple-system, "Roboto", sans-serif;
    box-sizing: border-box;
    scroll-behavior: smooth;

}


::-webkit-scrollbar {
    width: 0.88rem;
}

::-webkit-scrollbar-track {
    border: 7px solid #292c3b;
    box-shadow: inset 0 0 2.5px 2px rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    background-color: #d4d4d8;
}

::-webkit-scrollbar-thumb {
    background: #999;
    border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

html {
    scrollbar-color: #9e4673 #3d4a59;
}
main {
    width: 80%;
    margin-inline: auto;
}

@media (width < 600px) {
main {
width: 100%;
}
}
main h1.recommended {
margin: 2.3rem 0 2rem 2%;
}

a,button {
    all:unset;
    display: inline-block;
    transition: 0.2s;

}
button:active ,a:active {
    scale: 0.9;
}
button:hover , a:hover {
    cursor: pointer;
}
button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    /* scale: 1; */
}
li {
    margin-left: 2rem;
    list-style: none;
}

.fa-solid {
    color:var(--icons) ;
}