/* 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." */
/*Allowed font files include .svg*/

body {
  background: #ad7874 url("https://i.imgur.com/G46f6pc.gif");
    background-repeat: repeat;
    background-attachment: fixed;
  background-position: center;
    font-family: Verdana;
    font-size: 15px;
  overflow-y: auto;
}

html::-webkit-scrollbar {
  width: 25px;
  background: #ad7874;
  }
  
/*html::-webkit-scrollbar-thumb {}*/
  
/* Handle */
html::-webkit-scrollbar-thumb:vertical {
    background: #eab676;
  border: 3px solid #5d321a;
  }

html::-webkit-scrollbar-thumb:horizontal {
    background: #eab676;
  border: 3px solid #5d321a;
  height: 25px;
  }

/* Handle on hover
html::-webkit-scrollbar-thumb:vertical:hover {
    background: #888;
}*/
  
/*html::-webkit-scrollbar-button {
    display: block;
    background-color: #eab676;
    /*background-repeat: no-repeat;*/
    /*background-size: 50%;
  }*/

/*data:image/svg+xml;utf8*/
html::-webkit-scrollbar-button:vertical:start:decrement {
    width: 22px;
    background-position: center;
    background-image: url("../img/UP_SCROLL.jpg,<svg xmlns'../img/UP_SCROLL.jpg' width='100' height='100' fill='rgb(256, 256, 256)'><polygon points='0,50 50,100 50,0'/></svg>");
  }

a {
  color: #713154;
  
  }

a:hover {
  color: #a33843;
  }

.sidebar {
  height: 100%;
  width: 150px;
  position: fixed;
  margin-left: 25px;
  padding: 15px;
  margin-top: -25px;
  overflow: auto;
  text-align: center;
  background-color: #c3b286;
  /*background-color: #ecd46c;*/
  }

.sidebar div {
  padding: 8px;
  font-size: 15px;
  display: block;
  }
  
.sidebar a {
  text-decoration: none;
  }

.table-of-contents {
  border-radius: 5px;
  background: #f7d191;
  width: 80%;
  padding: 15px;
  margin: 20px 25px 25px 250px;
  font-size: 17px;
  }

.body-text {
  border-radius: 5px;
  background: #bc9363;
  width: 80%;
  padding: 15px;
  margin: 20px 25px 25px 250px;
  font-size: 15px;
  /*font-family: "Lucida Console", "Inconsolata", "Atkinson Hyperlegible";*/
  }

/*Prevent overflow of large images*/
.body-text img, .sidebar img, .blog-text img {
  max-width: 100%;
  height: auto;
  }
  
.blog-text {
  border-radius: 5px;
  background: #eab676;
  width: 80%;
  padding: 15px;
  margin: 20px 25px 25px 250px;
  font-size: 15px;
  }
  
small {
  text-align: right;
  }
  
.credit-text {
  border-radius: 4px;
  background: #c3b286;
  /*background: #ecd46c;*/
  width: 80%;
  padding: 15px;
  margin: 20px 20px 20px 250px;
  font-size: 13px;
  }

table {
  background: #c3b286;
  margin: 0 auto;
  width: 75%;
  border-collapse: collapse;
  }

th {
  background: #9c5e2d;
  }

table, th, td, tr {
  border: 2px solid #5d321a;
  padding: 5px;
  }

span {
  width: 50px;
  height: 50px;
  }

@media(max-width:1200px) {
  .sidebar {
    margin-left: 25px;
    }
  .body-text {
    margin-left: 350px;
    }
  .credit-text {
    margin-left:350px;
    }
  .blog-text {
    margin-left: 350px;
    }
  }
  
@media(max-width:1000px) {
  .sidebar {
    margin-left: 5px;
    }
  .body-text {
    margin-left: 330px;
    }
  .credit-text {
    margin-left: 330px;
    }
  .blog-text{
    margin-left: 330px;
    }
  }

/*Tenative mobile support*/
@media(orientation:portrait) {
  .sidebar {
    min-height: 0px;
    width: 100%;
    margin: 0 auto;
    top: 0;
    left: 0;
    padding: 0;
    font-size: 0.9em;
    position: relative;
    border-radius: 5px;
    }
  .body-text {
    width: 90%;
    margin: 0 auto;
    margin-top: lem;
    }
  .credit-text {
    width: 90%;
    margin: 0 auto;
    margin-top: lem;
    }
  .blog-text {
    width: 90%;
    margin: 0 auto;
    margin-top: lem;
    }
  }