main {
    overflow: visible;
}

section {
    position: relative;
    padding: var(--spacing-s) 0;
    width: 100%;
}

section:first-of-type {
    padding-top: 0;
}

input[type="text"] {
    -webkit-appearance: none;
    appearance: none;
    margin-bottom: var(--spacing-m);
    outline: 0;
    border: solid 3px var(--color-grey);
    border-radius: var(--spacing-xs);
    background: var(--color-grey);
    padding: var(--spacing-xs) var(--spacing-s);
    max-width: 100%;
    color: var(--color-white);
    font-weight: var(--fweight-regular);
    font-size: var(--fsize-xs);
}

input:invalid:not(:focus):not(:placeholder-shown) {
    border: solid 3px var(--color-red);
}

button {
    cursor: pointer;
    border: solid 3px var(--color-blue);
    border-radius: var(--border-m);
    background-color: var(--color-blue);
    padding: var(--spacing-xs) var(--spacing-s);
    color: var(--color-white);
    font-size: var(--fsize-xs);
}

.music-button-grey {
    border: solid 3px var(--color-lgrey);
    background-color: var(--color-lgrey);
}

.music-selectbox select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    outline: none;
    border: none;
    background: var(--color-black);
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-caret-down-fill" viewBox="0 0 16 16"><path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>');
    background-position: 98% 50%;
    background-size: 1.5rem;
    background-repeat: no-repeat;
    padding-right: var(--spacing-xxl);
    text-align: end;
    color: var(--color-white);
    font-size: var(--fsize-s);
}

.music-title {
    margin-bottom: var(--spacing-xxs);
    font-weight: var(--fweight-regular);
    font-size: var(--fsize-l);
}

.music-filters {
    display: flex;
    row-gap: var(--spacing-xs);
    column-gap: var(--spacing-xxl);
    flex-wrap: wrap;
}

.music-filter-list {
    display: flex;
    overflow-x: auto;
    column-gap: var(--spacing-xxl);
    row-gap: var(--spacing-s);
    flex-wrap: wrap;
    list-style-type: none;
    list-style-position: inside;
}

.music-filter-titles {
    flex-wrap: nowrap;
    padding: 0 0 0 var(--spacing-xxs);
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.music-filter-titles::-webkit-scrollbar {
    display: none;
  }

.music-filters-type {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--color-lgrey);
}

.music-filters-type input {
    display: none;
}

.music-filters-type label {
    cursor: pointer;
}

label[for="music"] {
    padding-right: var(--spacing-xs);
}

label[for="soundeffect"] {
    padding-left: var(--spacing-xs);
}

.music-filters-type input:checked+label {
    color: var(--color-white);
}

.music-filters-title {
    -webkit-user-select: none;
    /* Safari */
    -ms-user-select: none;
    display: flex;
    align-items: center;
    gap: var(--spacing-xxxs);
    cursor: pointer;
    color: var(--color-lgrey);
    /* IE 10 and IE 11 */
    user-select: none;
    /* Standard syntax */
}

.music-filters-title span {
    white-space: nowrap;
}

.music-filters-title span:has(> span:not(:empty)),
.music-filters-title span:has(> span:not(:empty)) ~ svg,
.music-filters-title-amount {
    color: var(--color-white);
}

.music-filters-title svg {
    transition: 0.3s transform;
}

.music-filters-title:first-of-type {
    padding-left: 0;
}

.music-filters-title:last-of-type {
    border: none;
}

.music-filters-title-active {
    color: var(--color-white);
}

.music-filters-title-active svg {
    transform: rotate(180deg);
}

.music-filter-tags-section {
    position: relative;
    margin-top: var(--spacing-s);
    width: 100%;
}

.music-filter-tags {
    display: flex;
    column-gap: var(--spacing-xxl);
    row-gap: var(--spacing-s);
    flex-wrap: wrap;
    transition: 0.3s;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    list-style-type: none;
    list-style-position: inside;
}

.music-filters-tag {
    display: none;
    align-items: center;
    gap: var(--spacing-xxxs);
    z-index: 1;
    cursor: pointer;
}

.music-filters-tag+label {
    -webkit-user-select: none;
    /* Safari */
    -ms-user-select: none;
    cursor: pointer;
    color: var(--color-lgrey);
    font-weight: var(--fweight-light);
    /* IE 10 and IE 11 */
    user-select: none;
    /* Standard syntax */
}

.music-filters-tag:checked+label {
    color: var(--color-white);
    font-weight: var(--fweight-regular);
}

.music-filter-results {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--spacing-s);
}

#music-songs-container.loading:empty {
    width: 100%;
    height: 420px;
    background: linear-gradient(90deg,rgba(255,255,255,0),var(--color-black),rgba(255,255,255,0)) -100% 0/140px 200% no-repeat,
                linear-gradient(90deg,var(--color-grey),var(--color-grey)) 10px 15px/45px 45px no-repeat,
                linear-gradient(90deg,var(--color-grey),var(--color-grey)) 70px 15px/180px 20px no-repeat,
                linear-gradient(90deg,var(--color-grey),var(--color-grey)) 70px 45px/120px 15px no-repeat,
                linear-gradient(90deg,var(--color-grey),var(--color-grey)) 320px 15px/470px 45px no-repeat,
                linear-gradient(90deg,var(--color-grey),var(--color-grey)) 805px 15px/130px 20px no-repeat,
                linear-gradient(90deg,var(--color-grey),var(--color-grey)) 805px 45px/100px 15px no-repeat,

                linear-gradient(90deg,var(--color-grey),var(--color-grey)) 10px 85px/45px 45px no-repeat,
                linear-gradient(90deg,var(--color-grey),var(--color-grey)) 70px 85px/180px 20px no-repeat,
                linear-gradient(90deg,var(--color-grey),var(--color-grey)) 70px 115px/120px 15px no-repeat,
                linear-gradient(90deg,var(--color-grey),var(--color-grey)) 320px 85px/470px 45px no-repeat,
                linear-gradient(90deg,var(--color-grey),var(--color-grey)) 805px 85px/130px 20px no-repeat,
                linear-gradient(90deg,var(--color-grey),var(--color-grey)) 805px 115px/100px 15px no-repeat,

                linear-gradient(90deg,var(--color-grey),var(--color-grey)) 10px 155px/45px 45px no-repeat,
                linear-gradient(90deg,var(--color-grey),var(--color-grey)) 70px 155px/180px 20px no-repeat,
                linear-gradient(90deg,var(--color-grey),var(--color-grey)) 70px 185px/120px 15px no-repeat,
                linear-gradient(90deg,var(--color-grey),var(--color-grey)) 320px 155px/470px 45px no-repeat,
                linear-gradient(90deg,var(--color-grey),var(--color-grey)) 805px 155px/130px 20px no-repeat,
                linear-gradient(90deg,var(--color-grey),var(--color-grey)) 805px 185px/100px 15px no-repeat,

                linear-gradient(90deg,var(--color-grey),var(--color-grey)) 10px 225px/45px 45px no-repeat,
                linear-gradient(90deg,var(--color-grey),var(--color-grey)) 70px 225px/180px 20px no-repeat,
                linear-gradient(90deg,var(--color-grey),var(--color-grey)) 70px 255px/120px 15px no-repeat,
                linear-gradient(90deg,var(--color-grey),var(--color-grey)) 320px 225px/470px 45px no-repeat,
                linear-gradient(90deg,var(--color-grey),var(--color-grey)) 805px 225px/130px 20px no-repeat,
                linear-gradient(90deg,var(--color-grey),var(--color-grey)) 805px 255px/100px 15px no-repeat;
    animation: events-shine 1.5s ease-in-out infinite;
}

@keyframes events-shine {
    to {
        background-position:
            100% 0,
            10px 15px,
            70px 15px,
            70px 45px,
            320px 15px,
            805px 15px,
            805px 45px,

            10px 85px,
            70px 85px,
            70px 115px,
            320px 85px,
            805px 85px,
            805px 115px,

            10px 155px,
            70px 155px,
            70px 185px,
            320px 155px,
            805px 155px,
            805px 185px,

            10px 225px,
            70px 225px,
            70px 255px,
            320px 225px,
            805px 225px,
            805px 255px;
    }
}


.music-songs-buttons {
    display: flex;
    justify-content: center;
}

#music-songs-load,
#music-songs-top {
    display: none;
    cursor: pointer;
    margin: var(--spacing-s) auto;
}

#music-songs-top {
    display: none;
    text-decoration: underline;
}

.music-songs-no-songs {
    display: none;
    flex-direction: column;
    align-items: center;
    margin: var(--spacing-s) auto;
}

.music-songs-no-songs h1 {
    font-weight: var(--fweight-regular);
    font-size: var(--fsize-l);
}

.music-songs-no-songs span {
    font-weight: var(--fweight-light);
    font-size: var(--fsize-xs);
}

@media (hover: hover) {
    .music-filters-title:hover {
        color: var(--color-white);
    }

    .music-filters-tag+label:hover {
        color: var(--color-white);
    }
}

@media (max-width: 992px) {
    #music-songs-container.loading:empty {
        width: 100%;
        height: 420px;
        background: linear-gradient(90deg,rgba(255,255,255,0),var(--color-black),rgba(255,255,255,0)) -100% 0/140px 200% no-repeat,
                    linear-gradient(90deg,var(--color-grey),var(--color-grey)) 10px 15px/45px 45px no-repeat,
                    linear-gradient(90deg,var(--color-grey),var(--color-grey)) 70px 15px/130px 20px no-repeat,
                    linear-gradient(90deg,var(--color-grey),var(--color-grey)) 70px 45px/70px 15px no-repeat,
                    linear-gradient(90deg,var(--color-grey),var(--color-grey)) 250px 15px/320px 45px no-repeat,
                    linear-gradient(90deg,var(--color-grey),var(--color-grey)) 585px 15px/130px 20px no-repeat,
                    linear-gradient(90deg,var(--color-grey),var(--color-grey)) 585px 45px/70px 15px no-repeat,

                    linear-gradient(90deg,var(--color-grey),var(--color-grey)) 10px 85px/45px 45px no-repeat,
                    linear-gradient(90deg,var(--color-grey),var(--color-grey)) 70px 85px/130px 20px no-repeat,
                    linear-gradient(90deg,var(--color-grey),var(--color-grey)) 70px 115px/70px 15px no-repeat,
                    linear-gradient(90deg,var(--color-grey),var(--color-grey)) 250px 85px/320px 45px no-repeat,
                    linear-gradient(90deg,var(--color-grey),var(--color-grey)) 585px 85px/130px 20px no-repeat,
                    linear-gradient(90deg,var(--color-grey),var(--color-grey)) 585px 115px/70px 15px no-repeat,

                    linear-gradient(90deg,var(--color-grey),var(--color-grey)) 10px 155px/45px 45px no-repeat,
                    linear-gradient(90deg,var(--color-grey),var(--color-grey)) 70px 155px/130px 20px no-repeat,
                    linear-gradient(90deg,var(--color-grey),var(--color-grey)) 70px 185px/70px 15px no-repeat,
                    linear-gradient(90deg,var(--color-grey),var(--color-grey)) 250px 155px/320px 45px no-repeat,
                    linear-gradient(90deg,var(--color-grey),var(--color-grey)) 585px 155px/130px 20px no-repeat,
                    linear-gradient(90deg,var(--color-grey),var(--color-grey)) 585px 185px/70px 15px no-repeat,

                    linear-gradient(90deg,var(--color-grey),var(--color-grey)) 10px 225px/45px 45px no-repeat,
                    linear-gradient(90deg,var(--color-grey),var(--color-grey)) 70px 225px/130px 20px no-repeat,
                    linear-gradient(90deg,var(--color-grey),var(--color-grey)) 70px 255px/70px 15px no-repeat,
                    linear-gradient(90deg,var(--color-grey),var(--color-grey)) 250px 225px/320px 45px no-repeat,
                    linear-gradient(90deg,var(--color-grey),var(--color-grey)) 585px 225px/130px 20px no-repeat,
                    linear-gradient(90deg,var(--color-grey),var(--color-grey)) 585px 255px/70px 15px no-repeat;
        animation: events-shine 1.5s ease-in-out infinite;
    }
    @keyframes events-shine {
        to {
            background-position:
                100% 0,
                10px 15px,
                70px 15px,
                70px 45px,
                250px 15px,
                585px 15px,
                585px 45px,

                10px 85px,
                70px 85px,
                70px 115px,
                250px 85px,
                585px 85px,
                585px 115px,

                10px 155px,
                70px 155px,
                70px 185px,
                250px 155px,
                585px 155px,
                585px 185px,

                10px 225px,
                70px 225px,
                70px 255px,
                250px 225px,
                585px 225px,
                585px 255px;
        }
    }

}

@media (max-width: 768px) {
    section {
        padding: var(--spacing-xs) 0
    }

    #music-songs-container.loading:empty {
        width: 100%;
        height: 420px;
        background: linear-gradient(90deg,rgba(255,255,255,0),var(--color-black),rgba(255,255,255,0)) -100% 0/140px 200% no-repeat,
                    linear-gradient(90deg,var(--color-grey),var(--color-grey)) 10px 15px/200px 20px no-repeat,
                    linear-gradient(90deg,var(--color-grey),var(--color-grey)) calc(100% - 10px) 15px/60px 15px no-repeat,
                    linear-gradient(90deg,var(--color-grey),var(--color-grey)) 10px 45px/45px 45px no-repeat,
                    linear-gradient(90deg,var(--color-grey),var(--color-grey)) 70px 45px/calc(100% - 80px) 45px no-repeat,

                    linear-gradient(90deg,var(--color-grey),var(--color-grey)) 10px 125px/200px 20px no-repeat,
                    linear-gradient(90deg,var(--color-grey),var(--color-grey)) calc(100% - 10px) 125px/60px 15px no-repeat,
                    linear-gradient(90deg,var(--color-grey),var(--color-grey)) 10px 155px/45px 45px no-repeat,
                    linear-gradient(90deg,var(--color-grey),var(--color-grey)) 70px 155px/calc(100% - 80px) 45px no-repeat,

                    linear-gradient(90deg,var(--color-grey),var(--color-grey)) 10px 235px/200px 20px no-repeat,
                    linear-gradient(90deg,var(--color-grey),var(--color-grey)) calc(100% - 10px) 235px/60px 15px no-repeat,
                    linear-gradient(90deg,var(--color-grey),var(--color-grey)) 10px 265px/45px 45px no-repeat,
                    linear-gradient(90deg,var(--color-grey),var(--color-grey)) 70px 265px/calc(100% - 80px) 45px no-repeat,

                    linear-gradient(90deg,var(--color-grey),var(--color-grey)) 10px 345px/200px 20px no-repeat,
                    linear-gradient(90deg,var(--color-grey),var(--color-grey)) calc(100% - 10px) 345px/60px 15px no-repeat,
                    linear-gradient(90deg,var(--color-grey),var(--color-grey)) 10px 375px/45px 45px no-repeat,
                    linear-gradient(90deg,var(--color-grey),var(--color-grey)) 70px 375px/calc(100% - 80px) 45px no-repeat;
        animation: events-shine 1.5s ease-in-out infinite;
    }

    @keyframes events-shine {
        to {
            background-position:
                200% 0,
                10px 15px,
                calc(100% - 10px) 15px,
                10px 45px,
                70px 45px,

                10px 125px,
                calc(100% - 10px) 125px,
                10px 155px,
                70px 155px,

                10px 235px,
                calc(100% - 10px) 235px,
                10px 265px,
                70px 265px,

                10px 345px,
                calc(100% - 10px) 345px,
                10px 375px,
                70px 375px;
        }
    }

}

@media (max-width: 576px) {
    .music-filter-results {
        flex-direction: column;
        align-items: stretch;
        row-gap: var(--spacing-xs)
    }

    .music-selectbox select {
        float: right;
    }
}