/**
 * CSS
 * 
 */

 html body {
    background-color: whitesmoke;
    margin: 60px auto;
    width: 80%;
    font-family: 'altertype-Regular';
    color: black
}
h1{font-size: 3.25em;}
h2{
    font-size: 2.05em;
    margin: 0;
}
#citation{
    font-size: 1.85em;
}
#subtitle{
    font-size: 1.5em;
}
footer {
    position: relative;
    bottom: 0;
    width: 100%;
    margin-top: 5%;
    margin-bottom: 4%;
}

footer a{
    color: darkblue;
    font-size: 1.15em;
}
footer a:hover{ color: lightblue }
 a { color: darkblue }

 /**
 * Grid Formats
 */

 article {
    display: block;
    max-width: 1200px;
}
article p{
    font-size: 1.15em;
    line-height: 1.2em;
}
.articleGrid_01{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-gap: 4%;
    margin: 0;
    margin-top: 1%;
}
.img_box_01{
    max-width: 200px;
}
.imgGrid_01{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-gap: 0%;
    margin: 0;
    margin-top: 1%;
}
img {
    max-width: 400px;
}


@font-face {
    font-family: 'altertype-Regular';
    src: url('../font/altertype-Regular.otf') format('opentype');
    text-rendering: optimizeLegibility;
}

@media screen and (max-width: 600px) {
    html body{
      margin: 0;
      padding: 0;
      width: 100%;
      margin-left: 7px;
    }
    h1{font-size: 3.0em;}
    h2{font-size: 1.5em;}
    #citation{
        font-size: 1.0em;
        line-height: 1.4em;
        margin-left: 15px;
        margin-right: 35px;
        background-color: darkblue;
        padding: 4px;
        color: aliceblue;
    }
    #subtitle{
        font-size: 1.0em;
    }

    .articleGrid_01{
        display: block;
    }
    article p{
        font-size: 1.0em;
        line-height: 1.2em;
    }
    footer a{
        font-size: 0.85em;
    }
}