#header.header {
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 4);
    background-color: var(--surface);
    position: sticky;
    top:0;
    left:0;
    overflow: visible;
    z-index: 1000;

    &.dark {
        background-color: var(--text-primary);
    }

    .progress-bar {
        position: absolute;
        top: 100%;
    }
}

.nav {
    display:flex;
    justify-content: space-between;
    align-items: center;
}

.logo.logo.keep-dot {
    font-size: 2rem;
    width: fit-content;
}

.logo.keep-dot .dot {
    display: block;
}

.legal-section .extra-small-content {
    z-index: 1;
}

.legal-section h2 {
    margin-bottom: calc(var(--spacing-unit) * 4);
    overflow: hidden;
    text-overflow: ellipsis;
    padding-bottom: var(--spacing-unit);
    border-bottom: solid 1px var(--border-color);
}

.legal-section h3 {
    position: relative;
    width: fit-content;
    margin-bottom: var(--spacing-unit);
    padding-left: calc(var(--spacing-unit) * 4);

    &:nth-of-type(odd)::after {
        background: linear-gradient(90deg, transparent, var(--accent-orange));
    }

    &::after {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        height: 3px;
        width: calc(var(--spacing-unit) * 3);
        transform: translateY(-50%);
        background: linear-gradient(90deg, transparent, var(--accent-cyan));
    }
}

.legal-section p {
    margin-bottom: calc(var(--spacing-unit) * 3);
    transition: all var(--normal-transition);
    opacity: 0.5;
    filter: blur(2px);

    &.focused {
        color: var(--text-primary);
        opacity: 1;
        filter: blur(0);
    }
}

.circle-abstract {
    min-width: 250px;
}

.blur-layer {
    position: absolute;
    inset: 0;
    background: rgba(247, 246, 241, 0.6);
    z-index: 0;
}

@media screen and (max-width: 1280px) {
    .blur-layer {
        backdrop-filter: blur(20px);
    }
}