#abilities {
    padding: 12.5px;
    padding-top: 0;
    min-height: 410px;
}

#abilities .category {
    list-style: none;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

#abilities p {
    margin-top: 1px;
    margin-bottom: 1px;
}

#abilities h2 {
    display: inline-block;
    font-size: calc(20px + 3.5vw);
    margin: 0;
    margin-top: 20px;
}

#abilities h3 {
    display: inline-block;
    font-size: calc(12.5px + 1vw);
    margin: 0;
}


#abilities .desc {
    font-size: calc(10px + 0.75vw);
    margin: 0;
    font-style: italic;
}

#abilities .tech {
    font-size: calc(10px + 1vw);
    margin: 0;
}

#abilities .stat {
    display: inline-block;
    font-size: calc(10px + 0.75vw);
    margin: 0;
    margin-right: 15px;
}

@media only screen and (min-width: 1000px) {
    #abilities {
        border: 1px solid grey;
        overflow-y: scroll;
        min-height: 355px;
        height: calc(100vh - 100.5px);
    }

    #abilities h2 {font-size: calc(20px + 1.25vw);}
    #abilities h3 {font-size: calc(16px + 1vw);}
    #abilities .desc {font-size: calc(10px + 0.5vw);}
    #abilities .tech {font-size: calc(13px + 0.75vw);}
    #abilities .stat {font-size: calc(10px + 0.5vw);}
}

@media only screen and (min-width: 1000px) and (max-width: 1249px) {
    #abilities {
        display: block;
        position: absolute;
        top: 50px;
        left: 595px;
        width: calc(99vw - 625px);
    }
}

@media only screen and (min-width: 1250px) {   
    #abilities {
        display: inline-block;
        vertical-align: top;
        margin: 0;
        width: calc(49vw - 150px);
    }
}

#abilities > input {
    margin-top: 20px;
    margin-left: -5px;
    margin-right: 10px;
    padding: 5px;
}