* {
  box-sizing: border-box;
}
body {
  background-image: URL("../images/pavillion.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: #efeae7;
  color: #3A4654;
  font-family: Verdana;
}
body.writing {
  background-image: URL("../images/pavillion.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: #efeae7;
  color: #3A4654;
  font-family: Verdana;
}

.container {
    height: 100%;
    display: grid;
    grid-template-columns: 1.6fr 6.8fr 1.6fr;
    grid-template-rows: 100px 38px minmax(700px, auto) 60px;
    grid-row-gap: 4px;
    /* grid-column-gap: 10px; */
    min-width: 1400px;
    margin: 20px;
    object-fit: fill;
}

#header {
    background-color: #FCF8EB;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
    background-image: URL("../images/mapleheader2.png");
}
#galleryheader {
    background-color: #FCF8EB;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
    background-image: URL("../images/mapleheader3.png");
    background-size: cover;
}
#writingheader {
    background-color: #FCF8EB;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
    background-image: URL("../images/sakuraheader.png");
    background-size: cover;
}
#linksheader {
    background-color: #FCF8EB;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
    background-image: URL("../images/robesheader.png");
    background-size: cover;
}
#newsheader {
    background-color: #FCF8EB;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
    background-image: URL("../images/monkeyheader.png");
    background-size: cover;
}
#aboutheader {
    background-color: #FCF8EB;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
    background-image: URL("../images/bridgeheader.png");
    background-size: cover;
}
#contactheader {
    background-color: #FCF8EB;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
    background-image: URL("../images/fireflyheader.png");
    background-size: cover;
}
#navbar {
    background-color: #FCF8EB;;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
    background-image: URL("../images/backgroundtexture4.png");
    
}
#sidebar {
    background-color: #FCF8EB;;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 3;
    grid-row-end: 4;
}
#mainbody {
    background-color: #FCF8EB;;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 3;
    grid-row-end: 4;
    background-image: URL("../images/backgroundtexture4.png");
}
#footer {
    background-color: #FCF8EB;;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 4;
    grid-row-end: 5;
    background-image: URL("../images/backgroundtexture4.png");
}

.topnav {
  background-color: #B4B9B0;
  overflow: hidden;
}
.topnav a {
  float: left;
  color: #3A4654;
  text-align: center;
  padding: 5px 5px;
  text-decoration: none;
  font-size: 17px;
}
.topnav a:hover {
  background-color: #efeae7;
  color: #3A4654;
}
.topnav a.active {
  color: #3A4654;
}