@import './colors.css';

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

body{
    background-color: var(--gray-50);
}

.navbar-container {
    display: flex;
    align-items: center;
    padding: 1rem;

    background-color: var(--gray-900);
    color: var(--gray-100);

    & .logo-container {
        flex: 1;

        & a {
            display: flex;
            align-items: center;
            gap: .5rem;

            text-decoration: none;

            & .logo-img {
                width: 2rem;
            }

            & .logo-name {
                font-size: 1.5rem;
                color: var(--orange-400);
            }
        }
    }

    & .nav-links-container {
        display: flex;
        list-style: none;
        gap: 2rem;
        margin-right: 2rem;

        font-family: 'Courier New', Courier, monospace;

        & .nav-link {

            &.active {
                color: var(--orange-400);
            }

            & a {
                text-decoration: none;
                color: inherit;
                font-size: .875rem;
                text-transform: uppercase;

                transition: color .3s ease;

                &:hover {
                    color: var(--orange-400);
                }
            }
        }
    }

    & .carrinho-compra-container {
        padding-left: 2rem;
        border-left: 1px solid var(--gray-700);
    }
}

.footer-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 2rem;

    background-color: var(--gray-900);

    & .footer-logo-name {
        font-size: 1.25rem;
        font-weight: 500;
        color: var(--orange-400);
    }

    & .footer-description {
        font-size: .875rem;
        text-align: center;
        max-width: 440px;
        color: var(--gray-500);
    }

    & .footer-copy {
        margin-top: .5rem;
        font-size: .75rem;
        color: var(--gray-600);
    }
}