/*This html section is how we change the entire page's default. anything added not in the html brackets will override this.*/
html { 
    background-image:url(http://dl4.glitter-graphics.net/pub/577/577814mxl3lzplgr.gif);
    font-family: cursive;

} 




html.library {
  background-image: url('images/Library/shelf.jpg');
}

html.library h1 {
    color: white;
}
 











.sidenav {
  height: 100%;
  width: 200px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  overflow-x: hidden;
  padding-top: 2%
}

.sidenav a {
  padding: 6px 6px 6px 32px;
  text-decoration: none;
  font-size: 25px;
text-align: center;
  color: #c663ff;
  display: block;
}

.sidenav a :hover {
  color: #ffff;
}


.history  {
  padding: 0px 0px 0px 32px;

}

.history a {
  padding: 0px 0px 0px 0px;
  text-decoration: none;
  font-size: 20px;
text-align: center;
  color: #c663ff;
  display: inline-block;
}

.sidenav a :hover {
  color: #ffff;
}

/* Rounded border */
hr.rounded {
    padding-left: 30px;
    width: 50px;
  border-top: 8px solid #8af5ff;
    border-radius: 5px;}

.main {
  margin-left: 225px; /* Same as the width of the sidenav */
}



#mainbox{
    text-align: ;
    border-style: dashed;
    border-color: hotpink;
    border-width: thick;
    height:auto;
    width:auto;
    padding: 2%;
    background-size: cover;
    background: white;}

#PinkSidedBox{
    border-left: solid;
    border-color: hotpink;
    border-width: 7px;
    border-radius: 4%;

        padding: 1%;
    

}

        
.boxhead h2{
color: white;
border-bottom-style: dotted;
border-bottom-width: 6px;
    border-bottom-color: white;
}


/*Home*/

#InteriorDottedBox {
    width: 500px;
    border-style: dashed;
    border-width: thick;
    border-color: lightpink;
    
    
}

/*Graphics*/

.graphicpinkbox {
margin-bottom: 1%;
padding: 1%;
background: pink;
    
}

/*Put this next to the biggest div the elements you wanna grow are in*/
.growhover img:hover {
    transition: transform .15s ease-in-out;
  transform: scale(108%);
}


.growhoverpinkborder img {
    border: solid 5px hotpink;
}
.growhoverpinkborder img:hover {
    border: solid 5px hotpink;
    transition: transform .15s ease-in-out;
  transform: scale(108%);
}

}