#top-bar {
    background-color: var(--clr-blue);
    background-image: url('../img/ribbon.webp');
    z-index: 2;
    position: fixed;
    top: 0;
    background-size: cover;
    height: 120px;
    width: 100dvw;
    background-position: center bottom;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;

    .logo {
        margin-inline-end: 100px;
        background-color: var(--clr-blue);
        padding: 10px;
        height: 100%;
        object-fit: cover;
    }

    img:not(.logo) {
        filter: drop-shadow(0px 0px 1px rgba(255, 255, 255, 1));
    }
}

@media (max-width: 700px) {
    #top-bar {
        height: 60px;
        justify-content: start;
        gap: 3px;
        img{
            height: 30px;
        }
        img:not(.logo){
            height: 15px;
        }
        .logo{
            margin-inline-end: 0;
        }
    }
}