:root {
    --main-blue: #6664be;
    /* --black: #292b41; */
    --green: #42c284;
    /* --color-1: #d7d7f0; */
    --orange: #ff7c4a;
}

header,
.nav-toggle-close .nav-toggle-icon::before,
.nav-toggle-close .nav-toggle-icon::after {
    top: 0;
}

.mobile-nav,
.search-btn,
.index-post-container,
.index-category-container,
.footer-container,
.copyright,
.category-desc,
.account-container,
.contact-container,
.post-content,
.comments-container,
.sidebar-container {
    padding-left: 1rem;
    padding-right: 1rem;
}

.logo {
    width: 120px;
    height: 3%;
}

.nav-toggle {
    padding: 1rem 0;
}

.nav-toggle-icon,
.nav-toggle-icon::before,
.nav-toggle-icon::after {
    width: 30px;
    height: 1px;
}

.nav-toggle-icon::before,
.nav-toggle-icon::after {
    content: '';
    top: -.6rem;
}

.nav-toggle-icon::after {
    top: .6rem;
}

.nav-toggle-close .nav-toggle-icon {
    background-color: transparent;
}

.nav-toggle-close .nav-toggle-icon::before,
.nav-toggle-close .nav-toggle-icon::after {
    transform: rotate(45deg);
}

.nav-toggle-close .nav-toggle-icon::before {
    transform: rotate(-45deg);
}

.nav-container {
    width: 80%;
    left: 0;
    transform: translateX(-100%);
    top: 3.7rem;
}

.nav-content-open {
    transform: translateX(0);
}

.nav-content-container {
    height: 100vh;
    padding-left: .5rem;
}

.nav-links-container,
.section-intro,
.post-details,
.copyright {
    padding-bottom: 1rem;
}

.nav-links-container,
.copyright {
    padding-top: 1rem;
}

.nav-link:hover,
.nav-link-active {
    border-top-left-radius: 5rem;
    border-bottom-left-radius: 5rem;
}

.dropdown {
    width: calc(100% - 1rem);
    right: .5rem;
    z-index: 1024;
    top: 120%;
    transform: rotateX(90deg);
}

.dropdown,
.nav-container,
.search-container {
    transform-origin: 0 0;
}

.dropdown-items:first-child .dropdown-link {
    border-top-left-radius: .7rem;
    border-top-right-radius: .7rem;
}

.dropdown-items:last-child .dropdown-link {
    border-bottom-left-radius: .7rem;
    border-bottom-right-radius: .7rem;
}

.dropdown-link {
    padding: .5rem 1rem;
}

.dropdown-link:hover,
.dropdown-link-active {
    padding-left: 2rem;
}

.dropdown-active {
    transform: rotateX(0);
}

.dropdown-link-active,
.pagination-divider,
.breadcrumb-active {
    pointer-events: none;
}

.search-container {
    width: calc(100% - 2rem);
    left: 1rem;
    -webkit-transform: translateY(-10rem);
    -moz-transform: translateY(-10rem);
    -ms-transform: translateY(-10rem);
    -o-transform: translateY(-10rem);
        transform: translateY(-10rem);
}

.show-search-container {
    -webkit-transform: translateY(.9rem);
    -moz-transform: translateY(.9rem);
    -ms-transform: translateY(.9rem);
    -o-transform: translateY(.9rem);
        transform: translateY(.9rem);
}

.search-input {
    border-right-color: transparent;
}

.search-input,
.form-icons,
.form-input,
.form-input.form-input-border-all {
    border: 1px solid var(--grey);
}

.search-input,
.form-icons {
    border-top-left-radius: .5rem;
    border-bottom-left-radius: .5rem;
}

.search-input:focus,
.form-input:focus {
    box-shadow: 0px 0px 0px 4px rgb(102 100 190 / 5%);
}

.search-btn,
.form-input {
    border-top-right-radius: .5rem;
    border-bottom-right-radius: .5rem;
}

.hero-container {
    background: linear-gradient(rgba(0, 0, 0, 0.7),
                                 rgba(0, 0, 0, 0.7)), 
                                 url(../img/hero-bg.jpg);
    min-height: calc(100vh - 40vh);
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
}

.hero-content,
.section-intro,
.admin-details {
    padding-left: .5rem;
    padding-right: .5rem;
}

.section {
    margin-top: 3rem;
}

.post-img {
    height: 200px;
}

.post-title {
    margin-top: .5rem;
}

.discover-more {
    margin-bottom: 5rem;
    font-size: 2rem;
}

.discover-more,
.pagination-container {
    margin-top: 7rem;
}

.footer-container {
    padding-top: 2rem;
}

.footer-container,
.form-sign-in-container {
    padding-bottom: 2rem;
}

.footer-icon {
    padding: .5rem .8rem;
}

.footer-icon .fa-facebook-f {
    padding-left: .25rem;
    padding-right: .25rem;
}

.footer-icon .fa-whatsapp,
.footer-icon .fa-linkedin-in {
    padding-left: .1rem;
    padding-right: .1rem;
}

.copyright {
    background-color: #373433;
}

.copyright a {
    color: #c2d4f1;
}

.to-top {
    padding: .5rem .7rem;
    bottom: 2rem;
    right: -100%;
}

.show-to-top {
    right: 1rem;
}

.pagination-container {
    margin-left: 1rem;
    margin-right: 1rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--grey);
}

.pagination-link {
    padding: 1rem;
}

.pagination-link:hover,
.pagination-link.active {
    border-top: 3px solid var(--main-color);
}

.form-icons,
.form-input,
.form-input.form-input-border-all {
    padding: .4rem .35rem .4rem .7rem;
}

.form-icons {
    border-right: none;
    padding-right: .35rem;
}

.form-icons .fr {
    top: .2rem;
}

.form-input {
    border-left: none;
}

.form-input.form-input-border-all {
    padding-top: .6rem;
    padding-bottom: .6rem;
}
  
.submit-btn {
    padding: .5rem 1rem;
    margin-left: auto;
}

.submit-btn,
.sidebar-link,
.admin-post-link {
    width: max-content;       
}

.post-container {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.post-img {
    height: 250px;
}

.post-owner {
    font-family: 'Pacifico';
    font-size: x-large;
    font-weight: 100;
}

.sidebar-links-container {
    grid-template-columns: 3fr 10fr;
    padding-top: .5rem;
    padding-bottom: .5rem;
}

.sidebar-img {
    width: 100px;
    height: 50px;
}

.comments-container {
    margin-top: 5rem;
}

.comment {
    padding: 1rem;
}

.commenter-img {
    width: 50px;
    height: 50px;
}

.contact-container {
    max-width: 100vw;
}

.contact-form {
    max-width: 100vw;
}