/* ============================== */
/* === Powered by locomputing === */
/* ============================== */


*, *:before, *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

@media screen and (min-width: 18em) {
body {
font-size: 1.1em;
}
}

@media screen and (min-width: 50em) {
body {
font-size: 1.39em;
}
}

html {
color: #000088;
margin: 0 auto;
}

body {
margin: 2px auto;
padding: 0.3em;
color: #000066;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

body {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 2px;
}

header {
grid-column: 1;
grid-row: 1;
font-size: 125%;
text-align: center;
padding: 8px 0;
border:1px solid lightgray;
}
nav {
grid-column: 1;
grid-row: 0;
}
main {
grid-column: 1;
grid-row: 2;
}
footer {
grid-column: 1;
grid-row: 3;
font-size: 50%;
text-align: center;
padding: 5px 0;
border:1px solid lightgray;
}

@media screen and (min-width: 50em) {

body {
display: grid;
grid-template-columns: repeat(100, 1fr);
gap:.15em;
}

header {
grid-column: 1 / 101;
grid-row: 1;
}
nav {
grid-column: 1 / 18;
grid-row: 2;
border:1px solid lightgray;
}
main {
grid-column: 18 / 101;
grid-row: 2;
}
footer {
grid-column: 1 / 101;
grid-row: 3;
}
}

article {
padding: .5em .2em;
border:1px solid lightgray;
}

p {
margin: .25em 0;
padding: 0;
line-height: 1.25em;
}