.appresso-header {
    display: flex;
    align-items: baseline;
    max-width: var(--tContainerWidth);
    margin: 0 auto;
    padding: var(--tVspacingLarge) var(--tContainerSidePadding);
}

.appresso-header__logo {
    margin-right: auto;
    font-weight: bold;
    font-size: 20px;
    line-height: 1.35;
    color: var(--tColorContrast80);
    text-decoration: none;
    letter-spacing: -0.025em;
    position: relative;
}

.appresso-header__logo:visited {
    color: var(--tColorContrast80);
}

.appresso-header__logo:hover,
.appresso-header__logo:focus {
    color: var(--tColorContrast100);
    text-decoration: none;
}

/* Code decoration pseudo-elements */
.appresso-header__logo::before,
.appresso-header__logo::after {
    font-weight: normal;
    font-size: var(--tFontSizeDefault);
    line-height: var(--tLineHeightDefault);
    position: absolute;
    color: var(--tColorContrast20);
    display: none;
}

.appresso-header__logo::before {
    animation: appresso-logo-left 100ms cubic-bezier(0, 0, 0.1, 1) both;
}

.appresso-header__logo::after {
    animation: appresso-logo-right 100ms cubic-bezier(0, 0, 0.1, 1) both;
}

.appresso-header__logo:hover::before,
.appresso-header__logo:hover::after {
    display: inline;
}

/* Modifier variants */
.appresso-logo--www::before { content: 'www.'; left: -2.5em; }
.appresso-logo--www::after { content: '.no'; right: -1.9em; }

.appresso-logo--comments-1::before { content: '/*'; left: -1.5em; }
.appresso-logo--comments-1::after { content: '*/'; right: -1.5em; }

.appresso-logo--comments-2::before { content: '{#'; left: -1.5em; }
.appresso-logo--comments-2::after { content: '#}'; right: -1.5em; }

.appresso-logo--comments-3::before { content: '<!--'; left: -2.4em; }
.appresso-logo--comments-3::after { content: '-->'; right: -2em; }

.appresso-logo--arrow::before { content: '>-'; left: -1.1em; }
.appresso-logo--arrow::after { content: '->'; right: -1.1em; }

.appresso-logo--double-arrow::before { content: '>>='; left: -1.6em; }
.appresso-logo--double-arrow::after { content: '=>>'; right: -1.7em; }

.appresso-logo--compare::before { content: '<='; left: -1.5em; }
.appresso-logo--compare::after { content: '>='; right: -1.5em; }

.appresso-logo--html::before { content: '</'; left: -1.5em; }
.appresso-logo--html::after { content: '/>'; right: -1.55em; }

.appresso-logo--markdown::before { content: '##'; left: -1.5em; }
.appresso-logo--markdown::after { content: '##'; right: -1.5em; }

.appresso-logo--equals::before { content: '==='; left: -1.9em; }
.appresso-logo--equals::after { content: '==='; right: -1.9em; }

.appresso-logo--unequals::before { content: '!=='; left: -1.9em; }
.appresso-logo--unequals::after { content: '!=='; right: -1.9em; }

.appresso-logo--json::before { content: '({'; left: -1.9em; }
.appresso-logo--json::after { content: ')}'; right: -1.9em; }

.appresso-logo--func::before { content: '() => {'; left: -4.5em; }
.appresso-logo--func::after { content: '}'; right: -1.2em; }

.appresso-logo--shout::before { content: '!!'; left: -1.4em; }

.appresso-logo--path::before { content: '../'; left: -2em; }

.appresso-logo--if::before { content: ' if ('; left: -2.65em; }
.appresso-logo--if::after { content: ') {'; right: -2.1em; }

@keyframes appresso-logo-left {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
}

@keyframes appresso-logo-right {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
}

.appresso-header__items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.appresso-header__item {
    color: var(--tColorContrast60);
    text-decoration: none;
}

.appresso-header__item:visited {
    color: var(--tColorContrast60);
}

.appresso-header__item:hover,
.appresso-header__item:focus {
    color: var(--tColorContrast100);
}

.appresso-header__item--active {
    color: var(--tColorContrast80);
    text-decoration: underline;
}

@media (min-width: 720px) {
    .appresso-header {
        padding-top: 5.5rem;
        padding-bottom: 3rem;
    }

    .appresso-header__logo {
        font-size: 22px;
        line-height: 32px;
    }

    .appresso-header__items {
        flex-direction: row;
        gap: 0;
        width: 60%;
        justify-content: space-between;
        padding-left: var(--tVspacingLarge);
    }
}

@media (min-width: 960px) {
    .appresso-header {
        padding-top: 5.5rem;
        padding-bottom: 5.5rem;
    }

    .appresso-header__items {
        width: 50%;
    }
}