:root {
    --color-primary: #dfba35;
    --color-secondary: #706f6f;
    --color-background: #020202;
    --color-text-white:#dcdcdc;
    --color-text-black:#020202;
    --font-primary: "Roboto", sans-serif;
}

::-moz-selection {
    background: var(--color-secondary);
    color:var(--color-text-white);
}

::selection {
    background: var(--color-secondary);
    color:var(--color-text-white);
}

body {
    background: var(--color-background) !important;
    color: var(--color-text-white);
    font-family: var(--font-primary);
}

.container {
    @media screen and (max-width:575px) {
        padding:0 24px;
    }
}

.btn {
    border-radius:0;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:15px;
    line-height:17px;
    padding:12px 20px 10px 20px;
}
.btn-primary {
    border-color:var(--color-primary);
    background-color:var(--color-primary);
    color:var(--color-text-black);
    &.focus,
    &:focus,
    &:hover {
        background-color: color-mix(
            in srgb,
            var(--color-primary) 75%,
            black 25%
        );
        border-color: color-mix(
            in srgb,
            var(--color-primary) 75%,
            black 25%
        );
        color:var(--color-text-black);
    }
}

.modal {
    a {
        color: var(--color-secondary);
        text-decoration:none;
        transition: color 0.25s ease;
        &:hover {
            color: var(--color-primary);
        }
    }
}

#header {
    margin-top:40px;
}
#main {
    h1 {
        margin-top:30px;
        font-size:30px;
        line-height:32px;
        color: var(--color-primary);
        @media screen and (max-width:575px) {
            font-size:24px;
            line-height:26px;
        }
    }
    .row-catalog-about {
        margin-top:40px;
        align-items: center;
        @media screen and (max-width:1199px) {
            align-items:flex-start;
        }
        img {
            border-radius:5px;
        }
        .about {
            padding-left:40px;
            @media screen and (max-width:1199px) {
                padding-left:0;
            }
            @media screen and (max-width:991px) {
                text-align:justify;
                text-align-last:center;
            }
        }
        .catalog {
            @media screen and (max-width:991px) {
                display:block;
                margin-top:30px;
            }
        }
    }
    .row-contact {
        margin-top:60px;
        h2 {
            font-size:30px;
            line-height:32px;
            color: var(--color-primary);
            @media screen and (max-width:575px) {
                font-size:24px;
                line-height:26px;
            }
        }
        address {
            a {
                color: var(--color-text-white);
                text-decoration:none;
                transition: color 0.25s ease;
                word-break: break-all;
                &:hover {
                    color: var(--color-secondary);
                }
            }
        }
    }
}

#footer {
    padding:60px 0 20px 0;
    font-size:14px;
    line-height:16px;
    font-style:italic;
    button {
        border:0;
        background:transparent;
        font-style:italic;
        padding:0;
        margin:0;
        color: var(--color-text-white);
        text-decoration:none;
        transition: color 0.25s ease;
        &:hover {
            color: var(--color-primary);
        }
    }
}