#savedSetups, #savedSetups[open] {
    background-color: hsl(from whitesmoke h s l / 0.1);
    color: whitesmoke;
    font-family: monospace;
    font-size: 17px;
    border: 2px solid hsl(from whitesmoke h s l / 0.5);
    overflow-x: hidden;
    overflow-y: scroll;
    max-height: 85%;
    scrollbar-width: none;
}

#savedSetups .closeBtn {
    margin: 25px;
    color: white;
    font-size: 20px;
    font-family: cursive;
}

@keyframes appear {
    from {
        display: none;
        opacity: 0;
        transform: translateY(-100vh);
    }
    to {
        display: block;
        opacity: 1;
    }
}

@keyframes vanish {
    from {
        display: block;
        opacity: 1;
    }
    to {
        display: none;
        opacity: 0;
        transform: translateY(50vh);
    }
}

.setupListItem {
    border: 2px dashed hsl(from whitesmoke h s l / 0.5);
    position: relative;
    padding: 20px;
    margin: 20px 0;
    width: 500px;
}

.setupLabel {
    position: absolute;
    padding: 0 5px;
    top: 0;
    left: 10px;
    transform: translateY(-50%);
    /* background-color: hsl(0, 0%, 10%); */
    /* background-color: transparent; */
    opacity: 0;
}

.setupInfo {
    background-color: hsla(0, 0%, 100%, 0.2);
    padding: 5px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.setupName {
    cursor: pointer;
}

.removeSetupBtn {
    background-color: transparent;
    border: none;
    cursor: pointer;
    text-shadow: 1px 1px 2px hsla(0, 0%, 10%, 0.7);
}

.playerSetup, .trailSetup {
    margin: 10px 0;
    text-transform: capitalize;
}

@media (width < 500px) {
    #savedSetups, #savedSetups[open] {
        width: 85%;
    }

    #savedSetups .closeBtn {
        font-family: Arial, Helvetica, sans-serif;
    }

    .setupListItem {
        width: 85%;
    }
}