/* STOP FUCKING LOOKING BITCH THIS IS MY WBEISTE except kaia ily pls help */
 
body {
  
  
  
  background-size: 10%;
  background-position: center;
  background-attachment: fixed;
  background-color: #4a2b23;
  font-family: emerald;
  line-height:1;
}
  
/*
LIG: #6d1e10
MID: #58120a
DRK: #381e19
*/
   
@font-face { font-family: emerald; src: url('fonts/emr.ttf'); }
@font-face { font-family: itty; src: url('fonts/itty.ttf'); }

a:link {
  color: #fac457;
}

a:visited {
  color: #faab37;
}

a:hover {
  color: #fac457;
}

a:active {
  color: #faf2c2;
}

.flex-container {
    display: flex;
}

.flex-child {
    flex: 1;
    background-color: #58120a;
    color: white;
    padding: 4px;
    width: 25%;
}  

.flex-child2 {
    flex: 2;
    background-color: #6d1e10;
    color: white;
    padding: 4px;
    width: 70%;
}  

.flex-child:first-child {
    margin-right: 10px;
    
} 
 
.main {
  width: 720px;
  margin: auto;
  background-color: #381e19;
  padding: 10px;
  box-shadow: 0px 4px 5px #000000;
}
 
.header {
  width: 740px;
  margin: auto;
  background-color: #00000000;
}
 
.textbox {
  color: white;
  width: auto;
  margin: auto;
  padding: 6px;
  background-color: #381e19;
  text-align:justify
}
 
.textbox-light {
  width: auto;
  margin: auto;
  padding: 6px;
  background-color: #6d1e10;
}

.navbar {
  width: 740px;
  margin: auto;
  padding-top: 6px;
  padding-bottom: 4px;
  background-color: #58120a;
  color: gold;
}

/* Style the tab */
.tab {
  overflow: hidden;
  background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab .active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border-top: none;
}

.littleman {
  padding: 6px 12px;
  border-top: none;
  max-height:33%;
  clear: auto;
  overflow-y: auto;
  max-height:300px;
  background-color: #381e19;
  }
  
.itty {
 color: #fac457;
 font-family: itty;
}
  
  body::-webkit-scrollbar {
  width: 12px;               /* width of the entire scrollbar */
}

body::-webkit-scrollbar-track {
  background: #381e19;        /* color of the tracking area */
}

body::-webkit-scrollbar-thumb {
  background-color: #603b30;    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
  border: 2px solid #381e19;  /* creates padding around scroll thumb */
}

.blogpost{
  width: auto;
  margin: 4px;
  background-color: #381e19;
  text-align:justify;
}

.blogpost:hover{
  border: 2px solid #fac457;
  margin: 2px;;
}

.bpheader {
  display:flex;
}

.bptitle {
  color: white;
  width: auto;
  margin: auto;
  background-color: #603b30;
  text-align:justify;
  padding: 6px;
  flex:7;
}

.bpdate {
  color: #fac457;
  width: auto;
  margin: auto;
  padding: 6px;
  text-align:right;
  flex:4;
}

.bptext {
  flex:3;
 padding-left:0px;
  padding: 6px;
  color:white;
}

.bpimg {
 flex:1;
 padding:6px;
  font-family: itty;
  color:#fac457;
}