/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
body {
  font-family: gill sans, sans-serif;
  font-size: 15px;
  background: #031200 url("https://wallpaperaccess.com/full/1363116.jpg") fixed; /*Replace with your own background*/
	color: #ACA8A0
	}
	
h1 {color: #AE7654}
h1 {font-family: times new roman, serif;}
  
h2 {color: #AE7654}
h2 {font-family: times new roman, serif;}
	
/*dash*/ 
.solid {
  border-top: 3px solid #ACA8A0;
}
/*link*/	
a {
  color: #6C796B;
  }

/*Main text section*/
.main { 
  border-radius: 5px;
  background: #392625;
  border: 1px solid #864727;
  width: 500px;
  padding:15px;
  margin: 20px 25px 25px 400px;
  text-align:center;
  }
  
.mainscroll { 
  border-radius: 5px;
  background: #392625;
  border: 1px solid #864727;
  width: 500px;
  height: 100px;
  padding:15px;
  margin: 20px 25px 25px 400px;
  text-align:center;
  overflow:scroll;
  }
  
.mainbig { 
  border-radius: 5px;
  background: #392625;
  border: 1px solid #864727;
  width: 700px;
  padding:15px;
  margin: 20px 25px 25px 200px;
  text-align:center;
  }
  
.mainbig img {
  max-width: 600px;
  height: auto;
}
  
.scrollbig { 
  border-radius: 5px;
  background: #392625;
  border: 1px solid #864727;
  width: 700px;
  height: 400px;
  padding:15px;
  margin: 20px 25px 25px 200px;
  text-align:center;
  overflow:scroll;
  }
  
.scrollbig img {
    max-width: 300px;
  height: auto;  
  }
  
  
.boxside { 
  border-radius: 5px;
  background: #392625;
  border: 1px solid #864727;
  width: 250;
  padding:15px;
  margin: 20px 25px 25px 15px;
  text-align:center;
  }
  
  /* CSS style to limit the height of images within boxside */
.boxside img {
  max-height: 400px; 
}

.button2 {
   text-align:center;
  border-radius: 5px;
  border: 2px solid #864727;
  padding: 10px;
  margin:5px;
  margin-top:10px;
  margin-bottom:10px;
  display: inline-block;
}
  
.transside { 
  border-radius: 5px;
  border: 0px solid #864727;
  width: 250;
  padding:15px;
  margin: 20px 25px 25px 15px;
  text-align:center;
  }
  
.main-unal { 
  border-radius: 5px;
  background: #392625;
  border: 1px solid #864727;
  width: 500px;
  padding:15px;
  margin: 20px 25px 25px 400px;
  }
  
.main-trans { 
  border-radius: 5px;
  width: 500px;
  border: 0px solid #291F20;
  padding:15px;
  margin: 20px 25px 25px 400px;
  }
  
/*Prevent overflow of large images*/
.main img, .sidebar-left img, .main-trans img {
  max-width: 100%;
  height: auto;
  }
  
/*Sidebar*/
.sidebar-left {
  background: #1C181A;
  border: 1px solid #000103;
  width: 250px;
  margin-left:75px;
  padding:15px;
  margin-top:-25px;
  min-height:100%;
  position:fixed;
  overflow:auto;
  text-align:center;
  }
  
/*Use with <ul> to create a button section in the sidebar.*/
.buttons {
  list-style-type:none;
  padding:3px;
  }
  
/*Use with <li> for individual buttons.*/
.button { 
  text-align:center;
  border-radius: 5px;
  border: 2px solid #864727;
  padding: 10px;
  margin:5px;
  margin-top:10px;
  margin-bottom:10px;
  }
  
  .button:hover { /*add button2 hover as well*/ 
  background-color: #392625;
}

.button2:hover {
  background-color: #AE7654;
}
  
  
.sideimage { /*optional*/
  right: 30px;
  bottom:-20px;
  float: right;
  position: fixed;
  max-width: 450px;
  }
  
.sideimage img {
  max-width: 100%;
  height: auto;  
  }
  
  .sideimageleft { /*optional*/
  left: 30px;
  bottom:-20px;
  float: left;
  position: fixed;
  max-width: 450px;
  }
  
.sideimageleft img {
  max-width: 100%;
  height: auto;  
  }

  
@media(max-width: 1440px) {
    .sideimage {
      max-width: 0%;
      /*if this can be executed, override the previous rule, otherwise hide the side image*/
      max-width: calc(100% - 975px);
      }
  }
  
@media(max-width: 1200px) {
    .sidebar-left {
      margin-left: 25px;
      }
    
    .main {
      margin-left: 350px;
      }
  
    .sideimage {
      right: 5px;
      max-width: 0%;
      /*if this can be executed, override the previous rule, otherwise hide the side image*/
      max-width: calc(100% - 900px);
      }
  }
  
@media(max-width: 1000px) {
  
    .sidebar-left {
      margin-left: 5px;
      }
    
    .main {
      margin-left: 330px;
      }
  
    .sideimage {
      /*don't even bother at this point*/
      display: none;
      }
  }

  
/*Tentative mobile support.*/
@media(orientation:portrait) {
  .sidebar-left {
    min-height:0px;
    width: 100%;
    margin: 0 auto;
    top:0;
    left: 0;
    padding: 0;
    font-size: 0.9em;
    position: relative;
    border-radius: 5px;
    }
    
  .main {
    width: 90%;
    margin: 0 auto;
    margin-top: 1em;
    }
    
  .sideimage {
    /*don't even bother*/
    display: none;
    }
  }