body {
    background-color: white;
    color: #4c4e50;
}

h1, h2, h3, h4, h5, h6 {
    color: #222831;
}

.header__container {
    background-color: #403c38;
}

.logo {
    float: initial;
    padding: 16px;
}

.logo__item {
    vertical-align: bottom;
    text-transform: none;
}

.logo__title {
    color: #eaeaea;
    font-weight: unset;
}

.logo__tagline {
    border-top-color: #4c4e50;
    font-weight: unset;
}

.logo__img {
    width: 84px;
}

.widget-taglist__link {
    text-transform: none;
}

.btn {
    border-radius: 10px;
    background-color: #222831;
    font-weight: unset;
}

.menu__list {
    background: #403c38;
}

.menu__link {
    padding: .5rem .9rem;
    /*color: #4c4e50;*/
    font-weight: unset;
}

.menu__text {
    text-transform: capitalize;
}

.toc__title {
    text-transform: capitalize;
}

.footer {
    background: #222831 ;
}

.footer a {
    color: #999;
}

.container {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}


/* adjust frame margin based on screen size */
@media screen and (min-width: 1475px) {
    .wrapper {
        margin-left: 20%;
        margin-right: 20%;
    }
}

@media screen and (max-width: 1475px) {
    .wrapper {
        margin-left: 15%;
        margin-right: 15%;
    }
}

@media screen and (max-width: 900px) {
    .wrapper {
        margin-left: 5%;
        margin-right: 5%;
    }
}

@media screen and (max-width: 767px) {
    .wrapper {
        margin-left: 2%;
        margin-right: 2%;
    }
}

@media screen and (max-width: 620px) {
    .wrapper {
        margin-left: 0%;
        margin-right: 0%;
    }
}

.tags__item {
    border-radius: 10px;
}