/* Style sheet for the COVID related material on jeffstuff.ca */

/* Routine responsive coding CSS points */
html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

img {
    max-width: 100%;
}

/* My CSS */
body {
    background-color: lightyellow;
    font-family: serif;
}

p {
    margin-right: 1em;
    margin-left: 1em;
}

h1 {
    text-align: center;
    font-size: 290%;
    font-family: serif;
}

h2 {
    text-align: center;
    font-size: 200%;
    font-weight: bold;
}

/* class for red text */
.red {
    color: red;
}


/* jmenu class */
.jmenu {
    font-family: sans-serif;
    text-align: center;
    color: blue;
    margin-left: 20%;
    margin-right: 20%;
    font-size: 125%;
    font-style: normal;
    font-weight: bold;
    background-color: papayawhip;
}

.container {
    display:grid;
/*    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px; */
    background-color: thistle ;
    grid-gap: 10px;
    grid-template-columns: 1fr;
}

.jeff_block {
    display: block;
/*    font-family: sans-serif; */
    font-size: 1.25em;
    margin-left: 1 em;
    margin-right: 1em;
}

#col1  #col2 {
    margin-bottom: 10px;
    padding-bottom: 10px;
    background-color: lightyellow;
}

/* CSS for the hdr_main class */
.hdr_main {
    display: block;
    /* position: fixed; */
}
/* CSS for the hdr_nav class */
.hdr_nav {
    font-size: 1.5em;
    font-weight: bold;
    /* float: right; */
    margin: 100 20 15 10;
}

.hdr_menu_container {
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    border: black;
    border-style: solid;
    border-width: 2px;
    margin-top: 5px;
    text-align: center;
}

.hdr_button {
    margin: 10 10 10 10;
    text-align: center;
}
/* Media query to adjust for iPhone viewing */
/* NOTE: note the 'only screen' portion of the media query */
@media only screen and ( max-width : 375px){
    body {
        background-color: thistle;
    }
    .jmenu {
        font-size: 125%;
        background-color: mintcream;
        margin-left:5%;
        margin-right:5%;
    }
}

/* Media  query for wider screen */
@media only screen and (min-width: 400px) {
    .container {
        background-color: papayawhip;
        grid-template-columns: 1fr 3fr;
        gap: 14px;
    }

    .container > .jeff_block {
        font-size: 1.25em;
        /* font-family: sans-serif; */
    }

    #col1, #col2 {
        background-color: darkolivegreen;
        padding: 10px 5px 5px 10px;
        color: white;
        font-family: serif;
        font-size: larger;
    }
    #col2 {
        font-size: medium;
    }

}