/* <div id=coolsht>
    <div id=coolshtheader>COOL SHT</div>
    <div id=coolshtcontainer>
        <div class=coolshtbutton>make f tier bigger</div>
        <div class=coolshtbutton>add an 'idk them' tier</div>
        <div class=coolshtbutton>rgb borders everywhere</div>
        <div class=coolshtbutton>>:D dont press</div>
    </div>
</div> */


#coolsht {
    border: 2px solid #aaa;
    border-radius: 16px;
    width: 205px;
    font-size: 20px;
    position: absolute;
    top: 0px;
    right: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 150px;
}

#coolshtheader {
    height: 25px;
    margin-bottom: 8px;
}

#coolshtcontainer {
    border-top: 2px solid #bbb;
    border-radius: 16px;
    flex-grow: 1;
    display: flex;
    align-items: center;
    flex-direction: column;
    font-size: 15px;
    width: 100%;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

#coolshtcontainer::-webkit-scrollbar {
    display: none;
}
.coolshtbutton {
    margin: 4px;
    border: 2px solid #7a7a7a;
    border-radius: 8px;
    padding: 2px;
    transition-duration: 200ms;
}
.coolshtbutton:hover {
    border: 2px solid #ccc;
}
.coolshtbutton:active {
    transform: translateY(2px);
}

.iv {
    visibility: hidden;
}