/* styles for the table */
table {
    border: 2px solid black;
    border-collapse: collapse;
    width: 100%;
}
caption {    
    color: maroon;
    text-align: center;
	font-size: 160%;
	font-weight: bold;
	margin: .75em 0 .25em 0;
}
th, td {
    padding: .2em .7em;
    margin: 0.25em;
    text-align: left;
}
thead {
    & th {
        padding-bottom: .5em;
        color: white;
        background-color: steelblue;
    }
}
tbody {
    & th {
        vertical-align: top;
        background-color: white;
        color: black;
    }
}
th:last-child, td:last-child { /* all cells in fourth column */ 
    text-align: right;
}

@media only screen and (max-width: 840px) {
    thead { 
        display: none; 
    }
    th, tr, td { 
        margin: 0;
        display: block; 
        background-color: white;
        text-align: left;
    }
    tbody {
        & th {
            color: white;
            background-color: steelblue;    
        }
        & tr td:nth-of-type(1) {
            font-weight: bold;
        }
        & tr td:nth-of-type(3)::after {
            content: " calories";
        }
    }
    td:last-child { /* all cells in fourth column */ 
        text-align: left;
        padding-bottom: .5em;
    }
    
}