.abilities {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    width: 90%;
    margin: 8px auto 8px auto;
    justify-content: center;

    text-align: center;

    & div:first-child {
        border-top-left-radius: 16px;
        border-bottom-left-radius: 16px;            
    }

    & div:last-child {
        border-top-right-radius: 16px;
        border-bottom-right-radius: 16px;   
    }

    & .ability-block {
        flex-grow: 1;
        
        margin: 2px;

        outline: solid 2px var(--theme-accent-2-base);
        background: var(--theme-gray-dark);
    
        &:hover {
            background: var(--theme-gray-base);
        }
    
        & h2 { 
            padding: 0px 16px 0px 16px;
            margin: 8px;

            font-size: 24px;
            font-family: "BW";
            color: var(--theme-white);
        }
    
        &.hover-source {
            position: relative;
            display: inline-block;
        
            & .hover-text {
                position: absolute;
                visibility: hidden;

                padding: 5px;
                margin-left: calc(90%/-2); /* Use half of the width (120/2 = 60), to center the tooltip */
            
                width: 90%;
                bottom: 100%;
                left: 50%;
                z-index: 1;

                background-color: var(--theme-black);
                border-radius: 6px;
            
                color: var(--theme-white);
                text-align: center;
            }

            &:hover .hover-text {
                visibility: visible;
            }
        }
    }
}