/**
 * Using a separate CSS file to ensure existing users get the new grid
 * layout.  Not the most elegant way to do it, but lazy wins when you're
 * too busy to do it the right way :)
 *
 * Feel free to buy me a beer if you think I need one... I think I need one
 **/


.showcase-grid {
    display: grid;
    grid-template-columns: repeat( auto-fill, minmax(200px, 1fr) );
    align-items: end;
    line-height: 120%;
    font-size: 90%;
}

.showcase-item {
    background-color: transparent;
    padding: 2px 20px;
    color: white;
    text-align: center;
}

.showcase-center {
    align-items: center;
}


/**
 * CSS to make pretty hover descriptions
 **/
.hovertext {
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-color: darkblue;
    text-decoration-thickness: 4px;
}


/**
 * Use 2 columns (minimum) on a 360px wide mobile screen because otherwise
 * it takes up too much space
 **/
@media (max-width: 360px) {
    .showcase-grid {
        grid-template-columns: repeat( auto-fit, minmax(160px, 1fr) );
        font-size: 110%;
    }

    .showcase-item {
        padding: 10px;
    }
}