/* TODO: Finetune these css values */

body {
    --background-color: #9B4646;
    --navbar-color: #853B3B;
    --content-color: white;

    padding-top: 5%;
    background-color: var(--background-color);
    color: var(--content-color);
}

.card {
    background-color: #7c3737;
}

.table {
    color: var(--content-color);
}

.navbar {
    text-align: center;
    background-color: var(--navbar-color) !important;
}

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

.navbar .dropdown-menu {
    background-color: var(--navbar-color);
}

.navbar .dropdown-item {
    color: var(--content-color);
}

.navbar .dropdown-item:hover {
    background-color: #7c3737;
}

.navbar-toggler{
    width: 47px;
    height: 34px;
    background-color: #7c3737;
}

.navbar-toggler .line {
    width: 100%;
    float: left;
    height: 2px;
    background-color: var(--content-color);
    border-radius: 5px;
}

.navbar-toggler .line:not(:last-child) {
    margin-bottom: 5px;
}

.dropdown-item {
    text-align: center;
}

@media (max-width: 1000px) {
    .pp-address-title {
        padding-left: 5%;
    }

    body {
        padding-top: 15%;
    }
}

@media (max-width: 850px) {
    .pp-address-title {
        padding-left: 10%;
    }
}

@media (max-width: 650px) {
    .pp-address-title {
        padding-left: 15%;
    }
}

@media (max-width: 550px) {
    .pp-address-title {
        padding-left: 22%;
    }
}