:root {
    --color-primary: hsl(88, 51%, 51%);
    --color-secondary: hsl(200, 100%, 30%);
    --parent-max-size-text: 100vw; /* Represent the size of viewport */
    --line-clamps: 2;
    --section-color: #000;
}

body {
    color: #222;
}
.title-arrow:before {
    background: var(--section-color);
}
.nav-item > :is(.dropdown-item, .nav-link) {
    font-family: "Roboto", sans-serif !important;
}

/* .hover-a:hover a {
    color: var(--color-secondary) !important;
} */

.text-second {
    color: var(--color-secondary);
}
.underline:hover {
    text-decoration: underline !important;
}

.hover-a:hover :is(a, a::before) {
    color: var(--color-secondary) !important;
}
.post-number li:hover a:before {
    color: var(--color-secondary) !important;
}
.post-number a:before {
    font-size: 1.5rem !important;
}

.cover-link:hover {
    text-decoration: underline !important;
}

.widget {
    margin-bottom: 1.5rem;
}
.block-title-4 {
    margin-bottom: 1rem;
}

.h1 > a:hover,
.h2 > a:hover,
.h3 > a:hover,
.h4 > a:hover,
.h5 > a:hover,
.h6 > a:hover,
a:hover,
h1 > a:hover,
h2 > a:hover,
h3 > a:hover,
h4 > a:hover,
h5 > a:hover,
h6 > a:hover {
    color: var(--color-secondary) !important;
}

#start-main a:hover:not(a.dropdown-item) {
    text-decoration: underline !important;
    color: #fff !important;
}

.dark-logo {
    filter: brightness(1);
}

.light-logo {
    filter: brightness(0) invert(1);
}

.clamped {
    --line-clamps: 4;
    display: -webkit-box;
    -webkit-line-clamp: var(--line-clamps);
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.comment-site-owner {
    border: 2px solid var(--color-primary);
}

.fluid-text {
    font-size: calc(
        12px + (16 - 12) *
            ((var(--parent-max-size-text) - 300px) / (1920 - 300))
    );
}

/*   font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
 */

.entry-title {
    margin: 15px 0;
    line-height: 2.4rem;
    font-size: calc(
        32px + (40 - 32) *
            ((var(--parent-max-size-text) - 300px) / (1920 - 300))
    );
    font-weight: bold;
}
.blog-title {
    font-size: calc(
        28px + (40 - 28) *
            ((var(--parent-max-size-text) - 300px) / (1920 - 300))
    );
    line-height: 1.75rem;
}

p.entry-summary {
    font-size: 22px;
    font-size: calc(
        16px + (22 - 16) *
            ((var(--parent-max-size-text) - 300px) / (1920 - 300))
    );
}

figure .caption {
    background: #f2f2f2;
    color: #6c757d;
    font-size: calc(
        14px + (16 - 14) *
            ((var(--parent-max-size-text) - 300px) / (1920 - 300))
    );
    padding: 4px;
    width: 0px;
    min-width: 100%;
}
.article-header {
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 2rem;
}
.authors-list span {
    font-size: calc(
        12px + (16 - 12) *
            ((var(--parent-max-size-text) - 300px) / (1920 - 300))
    );
}

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

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

.navbar--primary .nav-link:not([role="tab"]) {
    color: #fff;
}

.navbar--primary .dropdown-menu {
    border-color: var(--color-secondary);
}

.navbar--primary .nav-link::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='rgba(255, 255, 255, 0.9)' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 184l144 144 144-144'/%3E%3C/svg%3E");
}

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

/* ---- Navbar ----  */
.nav-link.facebook:hover {
    color: #3b5998 !important;
}

.nav-link.twitter:hover {
    color: #55acee !important;
}

.nav-link.youtube:hover {
    color: #ff0000 !important;
}

.nav-link.telegram:hover {
    color: #3498db !important;
}

.nav-link.rss:hover {
    color: #e67e22 !important;
}

@media (max-width: 991.98px) {
    .sm-navbar--primary {
        background-color: var(--color-primary);
    }

    .sm-navbar--primary .mobile-logo {
        filter: brightness(0) invert(1);
    }
}

.entry-content img {
    max-width: 100% !important;
    object-fit: contain;
    height: 100% !important;
}
.entry-content :is(p:not(:has(*)), span) {
    font-family: "Roboto", sans-serif !important;
    font-size: calc(
        16px + (18 - 16) *
            ((var(--parent-max-size-text) - 300px) / (1920 - 300))
    ) !important;
}

.entry-content {
    font-size: calc(
        16px + (18 - 16) *
            ((var(--parent-max-size-text) - 300px) / (1920 - 300))
    );
    line-height: 27px;
}

p {
    color: #222;
}

input#captcha-result {
    padding: 0.5rem !important;
    margin-left: 1rem;
}

.entry-content iframe {
    width: 100% !important;
}