body {
    background-color: rgba(var(--color-bgdark));
}




#header {
    margin-bottom: -74px;
}

#header:before {
    background-image:url(/tabletop/img/test.jpg)
}

#header .header-container {
    padding:150px 0;
}

#header h1 {
    text-align: center;
    color:rgba(var(--color-theme));
    text-transform: uppercase;
    font-size: 3rem;
    padding: 0 20px
}

.tag-container {
    padding:5px 10px;
    display: flex;
    grid-gap:10px;
    color:rgba(var(--color-textlight));
    backdrop-filter: brightness(150%);
    align-items: center;
    border-radius: 5px;
    border:1px solid rgba(var(--color-bglight));
}

.tag-container span {
    border-right: 1px solid rgba(var(--color-textdark));
    display: inline-block;
    padding-right: 10px;
    translate:0 0.1rem;
}

.tag-container iconify-icon {
    color:rgba(var(--color-textdark));
    scale: 0.8;
    cursor:pointer;
}

@media (max-width:1000px) {   

    #header h1 {
        font-size: 2rem;
    }
}





#search {
    position: sticky;
    top:60px;
    z-index: 1;
    backdrop-filter: blur(10px);
    background-color:rgba(var(--color-bgdark),0.9);
    padding:20px 0;
    display: flex;
    flex-direction: column;
    grid-gap:10px;
}

@media(max-width:1000px) {
    #search {
        top:51px;
    }
}

#search .autoscroll-container {
    display: none;
}

#search .container-search input:placeholder-shown + .autoscroll-container {
    display: block;
}

#search .container-search {
    position: relative;
}

#search-clear {
    cursor: pointer;
}


#search-filter {
    cursor: pointer;
}

#filter .filter-item {
    margin: 0 20px 20px 20px;
    display: flex;
    flex-direction: column;
    grid-gap:10px
}

#filter h3 {
    font-weight: bold;
    font-size: 1.5rem;
}

#filter label:hover {
    color: rgba(var(--color-theme));
    cursor: pointer;
}

#filter label span {
    translate: 0 0.1rem;
}







#result {
    padding:100px 0;
    margin:0;
}