:root {
    /** make font size rel viewport width */
    --mobile-font-size: 4.5vw;
}

body {
    font-size: var(--mobile-font-size);
}

/**
 * <a> tags in navbar
 * make font-size rel viewport width
 * rather than px, else they will
 * not all display
 */
.navbar a {
    font-size: 2vw;
    padding: 5px 10px;
}

/**
 * col on left side of table
 */
div.example {
    font-size: var(--mobile-font-size);
}

/**
 * buttons on right side of table.
 * DO NOT REMOVE FONT-SIZE DEC!!
 * Font-size is being declared sepeartely
 * in these cells (rather than just estting
 * it for the entire table), because 
 * the nouns have individual <span> tags
 * around the root and the declined ending,
 * and within <button>, <span> have white spacing
 * around them (thus introducing spacing
 * within the noun itself). The way around
 * this is to set font-size: 0px; on the
 * <button> tag (which is done in the main
 * css file), and then setting the font-size
 * on the spans within it.
 */
td button.modal-triggers>span,
td.sentence>span {
    font-size: var(--mobile-font-size);
}

/* push navtabs to left on mobile */
.navbar {
    justify-content: left;
}