:root {
    --primary-color: #000000;
    --primary-color-hover: ##cccccc;
    --social-icon-fill: #7d4437;
    --background-color: #fcfcfc;
}


*::-webkit-scrollbar {
    width: 16px;
}

*::-webkit-scrollbar-track {
    background: rgba(155, 155, 155, 20%);
    border-radius: 10px;
}

*::-webkit-scrollbar-thumb {
    background-color: #8f54a0;
    border-radius: 10px;
    border: 3px solid #ffffff;
}

body {
    background-color: var(--background-color);
    font-family: "Montserrat", sans-serif;
}

a, h1, h2, h3, h4 {
    color: var(--primary-color);
}

.btn-brown {
    background-color: var(--primary-color);
    color: white;
}

.btn-brown:hover {
    background-color: var(--primary-color-hover);
    color: white;
}

.footer-container {
    color: var(--primary-color);
    margin-top: 50px;

    h3 {
        font-weight: 700;
    }

    ul {
        list-style-type: none;
    }

    ul li {
        margin-top: 1.15rem;
    }

    a {
        text-decoration: none;
        font-weight: 600;
    }

    .footer-social-icon {
        background-color: #02010100;
        transition: all 200ms ease-in-out 200ms;
        display: block;
        padding: 0.25rem 0;
        width: 100%;
        height: 100%;

        svg {
            fill: var(--primary-color);
            width: 5em;
            height: 5em;
        }
    }

    .footer-social-icon:hover {
        svg {
            fill: var(--social-icon-fill);
            transform: scale(1.1);
        }
    }
}