html{background-color:darkgray; height:100vh;}
body{
    background-color: #fdf7e7;;
    width: 100%;
    max-width: 960px;
    margin:auto;
    padding:0;
    font-size:16px;
    font-family: "Roboto Mono", verdana, sans-serif;
}
header{
    background-color: #F5CB42;
    display: grid;
    grid-template-columns: 20px 100px 1fr 100px 20px;
    justify-items: center;
    align-items: flex-end;
    padding:10px 0;
}
header img{margin: 12px;}
h1{
    grid-column: 3;
    font-family: fantasy;
    font-size: 2.5em;
    letter-spacing: 0.1em;
    font-weight: normal;
    color: #001C54;
    margin:9px;
}
nav{margin-top: 0; background-color: #FAC537; font-family: Noto Sans, verdana;}
menu{margin:0; padding: 2px 0 2px 20px;}
menu li{display: inline;margin-right: 1.5em;}
menu li a{text-decoration: none; font-weight:500;}
#content-container{min-height: 640px; color: #001C54; display: grid; grid-template-columns: 3fr 1fr;}
h2{margin-left: 30px; color: #C23914; font-size: 1.25em;}
/* on mobiles display with 1 column with aside following main content */
 @media only screen and (max-width: 600px) {
    .parent{
        min-height: 640px;
            color: #001C54;
            display: grid;
            grid-template-columns: 1fr;
    }
}
/* on larger screens display two columns with aside to the right of main content */
 @media only screen and (min-width: 601px) {
     .parent{
         min-height: 640px;
         color: #001C54;
         display: grid;
         grid-template-columns: 3fr 1fr;
    }
}
main{letter-spacing: 0.025em; word-spacing: 0.05em; line-height: 125%;}
h3{color: #C23914; font-size: 1.15em; margin-top:0;}
h4{margin-top:1.5em;}
section{border: 2px solid #FAC537; border-radius: 5px; padding:10px;}
h3::before{font-family: verdana; content:☥}
main section{margin:20px 10px 20px 20px; background-color: #fdf5df;}
aside section{margin:20px 20px 20px 10px; background-color: #fae8b7;}
aside section figure img{margin-left: 9px; margin-right: auto; width: 90%;}
figure{margin:0;}
figcaption{text-align: right; padding-right: 6px; font-size: 0.7em; margin-top: 0px;}
#img_temple{filter: drop-shadow(6px 6px 4px #002e17);}
footer{background-color: #F5CB42; padding: 2px 0 5px 20px; display:grid; grid-template-columns: 100px 1fr 140px;}
footer span a{text-decoration: none;}
#sp_contact{grid-column: 1;}
#sp_copy{grid-column: 3; justify-items:flex-end; margin-right: 10px;}
.author{margin: 10px;}
.small-section{font-size: 0.9em;background-color: #fae8b7;}