main {
    display: flex;
    flex-direction: column;
    gap: clamp(1.25rem, 1.023rem + 1.136vw, 1.875rem);
}
.sortsettings {
    display: flex;
    justify-content: center;
    gap: clamp(0.625rem, 0.398rem + 1.136vw, 1.25rem);
}


.catalogbtn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 5px;
    font-family:'Russo One';
    font-size: clamp(0.625rem, 0.398rem + 1.136vw, 1.25rem);
    color: rgb(197, 50, 173);
    background-color: transparent;
    border: none;
    box-shadow: 0px 0px 12px 11px rgba(126, 14, 136, 0.37);
    
}

.caret {
    display: flex;
}

.genrecon {
    display: block;
    position: relative;
    width: clamp(90px, 15vw, 220px)
    
}

.genre1 {
    display: none;
}
.genre {
    display: flex;
    flex-direction: column;
    position: absolute;
    width: 96.5%;
    font-family:'Russo One';
    font-size: clamp(0.625rem, 0.398rem + 1.136vw, 1.25rem);
    color: rgb(197, 50, 173);
    background-color: black;
    padding: 0.208vw;
    box-shadow:
    0 12px 24px rgba(202, 7, 219, 0.35), 
    8px 0 16px rgba(202, 7, 219, 0.25),    
    -8px 0 16px rgba(202, 7, 219, 0.25);   
}


.sortbtn {
    display: flex;
    align-items: center;
    font-family:'Russo One';
    font-size: clamp(0.625rem, 0.398rem + 1.136vw, 1.25rem);
    color: rgb(197, 50, 173);
    background-color: transparent;
    border: none;
}

.sortbtn:hover {
    background-color: purple;
}