.scrolled #top-bar {
    opacity: 1;
}

#content {
    padding-inline: 0;
    display: flex;
    flex-direction: column;
}

section {
    width: 100vw;
    padding-inline: 2rem;
    position: relative;
    overflow: hidden;
}

#header {
    height: 75vh;
    padding-inline: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    padding-inline: 2rem
}

#header img {
    position: absolute;
    width: 120%;
    height: 120%;
    left: -10%;
    top: -10%;
    object-fit: cover;
    filter: blur(5px) brightness(.5);
}

#header h1, #header h2 {
    color: var(--body-bg);
    z-index: 20;
    margin: 0;
    text-align: center;
    text-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

#header h1 {
    font-size: clamp(40px, 5vw, 9999px);
}

#offset-bar {
    height: 98px;
}

#categories {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: flex-start;
}

.categories-header {
    font-size: 2rem;
    width: 100%;
    text-align: center;
    margin-bottom: 0;
}

#footer {
    background: var(--near-black);
    height: 200px;
    display: grid;
    place-items: center;
    color: white
}

#content {
    padding-top: 100vh;
    padding-bottom: 0;
    transition: padding-top 450ms ease;
}

.scrolled #content {
    padding-top: 0;
}

#categories {
    padding: 2rem;
    padding-bottom: 5rem;
}

#content-section {
    padding: 2rem
}

img.mesh-gradient-overlay {
    z-index: 10;
    opacity: .3;
    filter: blur(3px) !important;
}