:root {
    --dark-primary: #5D4037;
    --light-primary: #D7CCC8;
    --primary: #795548;
    --accent: #8BC34A;
    --text-primary: #212121;
    --text-secondary: #757575;
    --divider: #BDBDBD;
    --white: #FFFFFF;
}

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    margin-bottom: 60px;
    background-color: var(--light-primary);
    color: var(--text-primary);
    font-family: Arial, sans-serif;
}

.navbar {
    background-color: var(--dark-primary) !important;
}

.navbar-brand {
    color: var(--white) !important;
    font-family: "Jim Nightshade", serif;
    font-size: 1.6rem;
}

    .navbar-brand:hover {
        color: var(--accent) !important;
    }

.navbar .nav-link {
    color: var(--white) !important;
}

    .navbar .nav-link:hover {
        color: var(--accent) !important;
    }

h1, h2 {
    color: var(--dark-primary);
    font-family: "Tangerine", cursive;
    font-size: 3rem;
    font-weight: bold;
}

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

a {
    color: var(--primary);
}

    a:hover {
        color: var(--dark-primary);
    }

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

    .btn-primary:hover {
        background-color: var(--dark-primary);
        border-color: var(--dark-primary);
    }

.btn-danger {
    background-color: #8D2F24;
    border-color: #8D2F24;
}

.table {
    background-color: var(--white);
}

    .table th {
        background-color: var(--dark-primary);
        color: var(--white);
    }

.form-control:focus {
    border-color: var(--accent);
    box-shadow: none;
}

footer {
    background-color: var(--dark-primary);
    color: var(--white);
}

    footer a {
        color: var(--accent);
    }

        footer a:hover {
            color: var(--white);
        }