a:link {
    color: gold;
    }
a:hover {
  color: brown;
}
a:visited{
  color: black;
  }
a:active{
  color: blue;
  }

body {
  margin: 0;
  padding: 0;
  background-color: #0d1f14;
  background-image: url("../art/bg/forest-2.png");
  
  background-size: cover; 
  min-height: 100vh;

  background-attachment: scroll; 
  background-repeat: no-repeat;
  background-position: center bottom;

  
  font-family: monospace;
  color: #e2ecc8;
}

.content {
  max-width: 800px;
  margin: 40px;
  padding: 100px 20px 20px 20px;
  }
  
/* Style the button that is used to open and close the collapsible content */
.collapsible {
  background-color: transparent;
  background-image: url("../art/img/parchment.png");
  background-size: 100% 100%; 
  background-repeat: no-repeat;

  padding: 20px 20px; 
  
  image-rendering: auto;
  
  color: #e2ecc8;
  cursor: pointer;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
  background-color: transparent;
  color: black;
}

/* Style the collapsible content. Note: hidden by default */
.collapsible-content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  background-color: transparent;
  transition: max-height 0.2s ease-out;
}

/*Pixel Art Rendering*/
.pixel-art {
  image-rendering: auto;
  width: 100%;
  height: auto;
}
.druid-box {
  background-image: url("../art/img/parchment.png");
  
  background-size: 100% 100%; 
  background-repeat: no-repeat;
  background-color: transparent;

  padding: 60px 80px; 
  
  image-rendering: auto;
  color: #e2ecc8;
}
.menu {
  margin: 0;
  padding: 0;
  background-color: transparent;
  background-image: url("../art/img/menu-hedge.png");
  
  background-size: auto 128px; 
  background-repeat: repeat-x;
  min-height: 128px;
  min-width: 100%;
  image-rendering: auto;
  position: fixed;

  background-attachment: fixed; 
  background-position: center top;
  
  font-family: monospace;
  color: #e2ecc8;
  font-size: 24px;
  text-align: center;
  }

  

/*Responsive Container*/
.willow-container {
  vertical-align: bottom;
  position: fixed;
  padding: 0;
  line-height: 0;
  bottom: 0px;
  left: 0;
  z-index: 10; /*maintains the tree above the background but behind menus*/
  
  /*Responsive sizing using viewport units*/
  width: 25vw;
  max-width: 526px;
  min-width: 128px;
  
  pointer-events: none;
}
/*Mobile*/
@media (max-width: 600px) {
  body {
    background-size: auto 100%; 
    }
  .content {
    padding: 40px 10px 10px 10px;
  }
  .willow-container {
    vertical-align: bottom;
    width: 40vw;
    opacity: 0.8;
    }
    
  .druid-box {
    padding: 10px 20px;

  background-size: 100% 100%; 
  background-repeat: no-repeat;
  background-color: transparent;
  
  image-rendering: auto;

  }
  
.menu {
  margin: 0;
  padding: 0;
  background-color: transparent;
  background-image: url("../art/img/menu-hedge.png");
  
  background-size: auto 128px; 
  background-repeat: repeat-x;
  min-height: 48px;
  min-width: 100%;
  image-rendering: auto;
  position: fixed;

  background-attachment: fixed; 
  background-position: center top;
  
  font-family: monospace;
  color: #e2ecc8;
  font-size: 10px;
  text-align: center;
  }
}