:root {
    /* --color-green-dark: 31 46 38; */
    --color-green-dark: 74 93 35;
    --color-green-light: 138 154 91;
    --color-yellow-light: 212 175 55;  
    --color-yellow-dark: 180 145 35;   
    --color-white: 249 246 238;
    --color-black: 35 35 35;
    --color-red-dark: 157 60 60;
    --color-red-light: 184 84 80;

    --color-gray-dark: 78 76 72;    
    --color-gray-light: 188 184 175; 

    --font-serif: "Cormorant Garamond", serif;
    --font-sans-serif: "Work Sans", sans-serif;
    --font-cursive: "Great Vibes", cursive;
}

/* Firefox */
@-moz-document url-prefix() {
    html {
        scrollbar-color: rgb(var(--color-green-light)) rgb(var(--color-white));
        scrollbar-width: thin;
    }
}

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
    width: 0.625rem;
}

::-webkit-scrollbar-track {
    background: rgb(var(--color-white));
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(
        180deg,
        rgb(var(--color-green-light)),
        rgb(var(--color-green-dark))
    );
    border-radius: 999px;
    border: 1px solid rgb(var(--color-white));
}

::-webkit-scrollbar-thumb:hover {
    background: rgb(var(--color-green-dark));
}

.preload * {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

/* 
@media screen and (max-width: 991px){

}

@media screen and (max-width: 767px){

}

@media screen and (max-width: 575px){

}

@media screen and (max-width: 450px){

}

@media screen and (max-width: 330px){

} 
*/