:root {
     --dkstalt-color: #1C2A08;
     --dkst-color: #4F3732;
     --dk-color: #4F7127;
     --mid-color: #C89B40;
     --lt-color: #DEC38C;
     --ltst-color: #C6D886;
     --hov-color: #EF892F;

}
 html, body {
     font-family: basiic;
     font-size:15px;
     background-color:var(--ltst-color);
     background-image:url(imgs/totoro.png);
     background-position: center;
     background-size: cover;
     background-repeat: no-repeat;
     background-attachment: fixed;
     color:var(--dkst-color);
}

th {
  background-color:var(--lt-color);
  padding:2px;
  margin:2px;
}

.consume {
    margin:auto;
    width:700px;
    height: 250px;
    background-color:var(--mid-color);
    border: 1px solid var(--dkstalt-color);
}

.consume-border {
    width:707px;
    padding: 2px 2px 2px 2px;
    margin-top: 10%;
    margin-left:auto;
    margin-right:auto;
    border: 1px solid var(--dkstalt-color);
}

#text {
  margin:8px;
}

#textbox {
  width: 450px;
  margin-top:10px;
  margin-left: 200px;
  margin-bottom: 15px;
  background-color:var(--lt-color);
  padding: 8px;
  padding-top: 5px;
  border: 1px dashed var(--hov-color);
}

@font-face {
  font-family: "basiic";
  src: url("../fonts/basiic.ttf")
}

@font-face {
  font-family: "rainyhearts";
  src: url("../fonts/rainyhearts.ttf")
}

a.sid {
     color:var(--ltst-color);
}

a.sid:hover {
     color:var(--hov-color);
}

a {
    color:var(--dk-color);
}

a:hover {
  color: var(--ltst-color);
}

hr {
  background-image: url(../imgs/star-divider.gif);
}

h1 {
    font-family: rainyhearts;
    font-weight: normal;
    text-align:center;
    color:var(--mid-color);
    font-size:22px;
}

h3, h5 {
     color:var(--mid-color);
}
 h2, h4, h6 {
     color:var(--mid-color);
}

 .section-title {
     font-family: rainyhearts;
     padding:5px;
     border-bottom: solid 1px var(--dkst-color);
     color:var(--mid-color);
     background-color:var(--dk-color);
     font-size:26px;
}

.section-title-sid {
    font-family: rainyhearts;
    text-align:center;
    margin:5px;
    padding-bottom: 0px;
    color:var(--mid-color);
    font-size:26px;
}

 .wrapper {
     display:flex;
     flex-wrap:wrap;
     height:auto;
}

 #left-sidebar {
     width:170px;
     color:var(--mid-color);
     background-color:var(--dk-color);
     border-right: 1px solid var(--dkst-color);
     float: left;
     height: inherit;
     overflow-y: hidden;
}

 .main-content {
     width:620px;
     margin-left: 182px;
     flex: auto;
}

 p {
     padding:2px;
}

 textarea {
     background-color:var(--ltst-color);
     color:var(--dkst-color);
     font-size:12px;
}

 .code-wrapper {
     padding-left:10px;
}