@font-face{
    font-family:eglantine;
    src: url('Eglantine-Vy9x.ttf')
}
@font-face{
    font-family:wildwood;
    src: url('Jfwildwood-ldYZ.ttf')
}
.title {
    color: #7A8B40;
}
body{
    font-family: baskerville;
	font-size: 14px;
	color: black;
	background-color: #ffffe9;
    background-image: url(home_img/meadow1.jpg);
    background-position: center;
    cursor: url(http://www.rw-designer.com/cursor-extern.php?id=15866), auto;
}
a:link{
        color:#f9ff6d;
    }
a:hover{
        color:#8eac70;
    }
a:visited{
        color:#5aa9d3;
    }


.container{
    display:grid;
    max-width: 900px;
    margin:auto;
    column-count: 3;
    justify-content: center;
    grid-template:
        "header header header"
        "divider divider divider"
        "sidenav welcome welcome"
}

.vines2 {
    border: 16px solid transparent;
    padding: 10px;
    border-image: url(home_img/vinesborder2.png) 16 round;
    overflow:auto;
    margin: 5px;
    background-color:#FBF5D7;
    /*credit https://dollarchive.neocities.org/compendium*/
}

.scrollybox{
    height:130px;
    overflow-y:auto;
    /* Used to make a scroll box in the nav bar seperate from the headers*/
}

#header{
    grid-area:header;
    display:grid;
    justify-content: center;
    grid-template-columns:1fr;
    grid-template-rows:1fr;
    height: 240px;
    max-width:900px;

}
#banner{
    grid-area:1/1;
    text-align: center;
}
#banner img{max-height:210px;
        max-width:900px;
}
#topnavbg{
    grid-area:1/1;
    background-color: #436E4D;
    border:solid 3px #679772;
        height:65px;
    max-width: 900px;
    margin-top:155px;
}

#topnav{
    grid-area: 1/1;
    color:#FBF5D7;
    text-align: center;
    display:flex;
        align-items: center;
        justify-content: center;
    padding:1px;
    height:65px;
    margin-top:155px;
}
#topnav div{
        margin-right:30px;
        width:105px;
    }

#floraldivider{
    grid-area:divider;
    display:flex;
      justify-content: center;
    padding:10px;
    margin:auto;
}

#floraldivider div{
        margin-right:15px;
    }

#sidenav{
    grid-area:sidenav;
    width:max-content;
}
#navigation{
    grid-area: navigation;
    color:#4f5a28;
    width: 170px;
    height: max-content;
    overflow-y:auto;
    margin-top:5px;
    margin-right: 5px;
    padding:5px;
}
#navigation h2{
        color: #FBF5D7;
        text-align: center;
        margin-bottom: 5px;
        margin-top: 1px;
        font-family: marigold magic, baskerville;
        padding-left: 5px;
        padding-bottom:1px;
        padding-top:2px;
        background-color: #436E4D;
    }
#navigation ul{
        list-style-type: none;
        margin:0;
        padding-left: 1px;
        font-size: 20px;
        overflow:auto;   
    } 
#personal {
        margin-bottom:5px;
    }
#navigation li{
        text-align: center;
        padding:1px 10px;
        padding-top: 2px;
    }
#navigation li a {
        display: block;
        padding: 2px 2px;
        line-height: 27px;
    }
#navigation li a:link{
        color:#97770b;
    }
#navigation li a:hover{
        color:#4f5a28;
    }
    /* puts img before/after link*/
#navigation li a:hover::after{
    content: url(home_img/mush_pixel.gif);
    }
    /*Art credit: https://artwork.neocities.org/minis*/
#navigation li a:hover::before{
    content: url(home_img/mush_pixel.gif)
    }
#navigation li a:visited{
        color:#5aa9d3;
    }

#welcome{  
    grid-area: welcome;
    Color: #436E4D;
    font-family: baskerville;
    font-size:18px;
    padding:10px;
    margin-left: 10px;
    height: 325px;
    overflow-y:auto;
}
#welcome h2{
        display:flex;
        justify-content: center;
        font-size: 45px;
        font-family:wildwood, baskerville;
        margin-bottom: 5px;
        margin-top: 5px;
    }