:root {
    /*Colours*/
    --modal-bg: #d7e3c0;
    --modal-accent: #9EAD72;
    --dark-accent: #393E41;
    --text-dark: #13181b;
    --text-light: #f5faf8;
    --highlighter-pink: #e70282;
    --highlighter-yellow: #FEE639;
    --teal-accent: #0ea6a6;
    
    /*Shadows*/
    --shadow-hard: 1px 3px 0 rgba(0, 0, 0, 0.4);
    --shadow-soft: 0 4px 10px rgba(0, 0, 0, 0.15);

    --choppy-edge : 255px 15px 225px 15px / 15px 225px 15px 255px;
}

h1 {
    grid-area: header;
    font-family: 'Special Elite', Courier, monospace;
    padding: 0px 10px;
    margin: 10px 10px;
}

h3 {
    padding: 0;
    margin: 0;
}

main {
 grid-area: main;
 margin: 10px;
 padding: 10px;
}

.sidenav {
    grid-area: sidenav;
    padding: 10px;

        ul {
            display: flex;
            flex-direction: column;
            list-style: none;
            padding-left: 0px;
            
            
        li {
            font-family: 'Special Elite', Courier, monospace;
            background-color: var(--dark-accent);
            margin: 10px 4px;
            padding: 4px;
            border-radius: var(--choppy-edge);
            box-shadow: var(--shadow-hard);
            &:hover {
                background-color: var(--teal-accent)}
            a {
                text-decoration: none;
                color: var(--text-light);
            };
        }
        }
}

footer {
    grid-area: footer;
}

.rightCol {
    grid-area: right;
    &>img {
        max-width: 200px;
    }
}

body {
    display: grid;
    grid-template-columns: 1fr 4fr 1fr;
    grid-template-areas: 
    "header header header"
    "sidenav main right"
    "footer footer footer";
    font-family:'Walter Turncoat', Courier, monospace
}

.blurb {
    background-color: aliceblue;
}

.inat-widget { 
    padding: 10px; 
    line-height: 1;
    max-width: 250px;
}
.inat-widget-header {margin-bottom: 10px;}

.inat-widget td {vertical-align: top; padding-bottom: 10px;}
.inat-label { color: #888; }
.inat-meta { font-size: smaller; margin-top: 3px; line-height: 1.2;}
.inat-observation-body, .inat-user-body { padding-left: 10px; }
.inat-observation-image {
    text-align: center;}
.inat-observation-image, .inat-user-image {
    width: 48px; 
    display: inline-block;
}
.inat-observation-image img, .inat-user-image img { 
    max-width: 48px; 
    border-radius: 5%;
}
.inat-observation-image img { vertical-align: middle; }

.inat-widget-small .inat-observation-image { 
    display:block; 
    float: left; 
    margin: 0 3px 3px 0; 
    height:48px;
}

.inat-label, .inat-value, .inat-user { font-family: "Trebuchet MS", Arial, sans-serif; }
.inat-user-body {
    vertical-align: middle;
}
.inat-widget td.inat-user-body {
    vertical-align: middle;
}
.inat-widget .inat-footer td.inat-value {
    vertical-align: middle; 
    padding-left: 10px;
}

@media screen and (max-width:650px) {
    body {
        grid-template-areas: 
            "header header header"
            "sidenav sidenav right"
            "main main right"
            "footer footer footer";
    }
    .sidenav ul {
        display: inline-block;
    }
    .sidenav>img {
        display: none;
    }

    .rightCol {
        display: flex;
        &>img {
            display: none;
        }
    }
}