.navbar {
    position: relative;
    max-width: var(--max-width-main);
    margin: auto;
    padding: 0 0 calc(var(--fs-regular) * 1) 0;
    border-bottom: 0.9px solid var(--line);
    color: var(--text);
    opacity: 0;
    animation: pageFadeIn 0.5s ease forwards;
    animation-delay: 0.15s;
    transition:
        color var(--transition-time) ease,
        border-color var(--transition-time) ease;
}

.navbar-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(var(--fs-regular) * 1.3);
    transition: color var(--transition-time) ease;
}

.navbar-links button,
.navbar-links a {
    position: relative;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    color: var(--text);
    font-family: "Fraunces", "Tiro Bangla", serif;
    font-weight: 500;
    font-size: var(--fs-regular);
    font-style: italic;
    line-height: 1;
    text-decoration: none;
    transition:
        color var(--transition-time) ease,
        font-weight var(--transition-time) ease,
        opacity var(--transition-time) ease;
}

.navbar-links button:hover,
.navbar-links a:hover {
    color: var(--accent);
    font-weight: 900;
}

.navbar-links button:active,
.navbar-links a:active {
    transition: none;
    transform: translateY(3px);
}

.navbar .colored-letter {
    font-weight: 900;
}