#tierlist {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: calc(100vh - 1em);
    width: 100%;
    background: linear-gradient(lightgray, gray);
    border: black 1px solid;
    pointer-events: all;
    overflow-y: scroll;
}

#tierlist .row,
#item-pool {
    display: flex;
    line-height: 2em;
    padding: 0.25em;
    border-bottom: black 1px solid;
    /* height: 100%; */
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    align-content: flex-start;
    flex-wrap: wrap;
    gap: 0.25em;
    flex-grow: 1;
}

#tierlist .row:last-child {
    border-bottom: unset;
}

#tierlist .row .item,
#item-pool .item,
#tierlist .row .marker {
    background: linear-gradient(white, white, lightgray);
    padding-left: 0.25em;
    padding-right: 0.25em;
    border: black 1px solid;
}

.item.dragging {
    opacity: 0.5;
}

.item.almostdrop {
    transform: rotate(1deg);
    /* transform-origin: bottom right; */
}




#item-pool {
    height: calc(100vh - 2em);
    background: linear-gradient(lightgray, lightgray,  white, white, lightgray);
    border: black 1px solid;
    overflow-y: scroll;
}


#tierlist .row .marker.s {
    filter: sepia(1) saturate(3) hue-rotate(290deg);
}

#tierlist .row .marker.a {
    filter: sepia(1) saturate(3) hue-rotate(305deg);
}

#tierlist .row .marker.b {
    filter: sepia(1) saturate(3) hue-rotate(315deg);
}

#tierlist .row .marker.c {
    filter: sepia(1) saturate(3) hue-rotate(0deg);
}

#tierlist .row .marker.d {
    filter: sepia(1) saturate(3) hue-rotate(25deg);
}

#tierlist .row .marker.e {
    filter: sepia(1) saturate(3) hue-rotate(85deg);
}

#tierlist .row .marker.f {
    filter: sepia(1) saturate(3) hue-rotate(210deg);
}

#tierlist .row .marker.other {
    filter: invert(1);
}