*
{
    margin: 0;
    padding: 0;
    font-family: monospace;
}
html
{
    height: 100%;
}
body
{
  min-height: 100%;
  background-color: #222;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
x❤️ /* header */
{
   display: block;
   outline: 1px solid darkgreen;
   box-shadow: 0 0 15px darkgreen;
    margin-bottom: 2vh;
}
x👍 /* h1 (site title) */
{
    display: block;
    text-align: center;
    font-size: 4em;
    color: lightgreen;
    text-shadow: 1px 1px 2px green;
    padding: 3vh 0;
}
x😍 /* nav */
{
    padding: 3px;
    text-align: center;
    display: block;
}
x😒 /* nav links (but not the actual anchor... */
{
    display: inline-block;
    margin: 0 12px;
    font-size: 2em;
    padding: 5px;
}
a
{
    color: lightgreen;
    text-decoration: none;
}
x😒:hover /* nav link container - hover */
{
    background-color: lightgreen;
}
x😒:hover a /* nav link container hover, affecting the anchor tag */
{
    color: darkgreen;
}
x👌 /* "article" container */
{
    margin: 0 auto;
    max-width: 111ch;
    display: block;
    background-color: rgb(55, 85, 2);
    color: #ddd;
    padding: 2%
}
x😘 /* Article title (h2 equivalent) */
{
    display: block;
    font-size: 3em;
    margin-bottom: 3vh;
}
x💕 /* Paragraph equivalent */
{
    display: block;
    margin-bottom: 1vh;
    font-size: 1.3em;
}
x😁 /* footer */
{
    outline: 1px solid #eee;
    display: block;
    grid-row-start: 3;
    grid-row-end: 4;
    color: #ddd;
    text-align: center;
    margin-top: 30px;
}