:root {
    --dk-color:#e8c088;
    --mid-color:#E4E6C3;
    --lt-color:#F7F7F2;
    --dkest-color:#261C15;
    --accent:#4b7ed7;
    --hover-color: #ffeab9; 
 }


.home_bar{
   width: 100%;
   margin: auto;
   height:30px;
   background-color: none;
}

.back_to_home{
	position: block;
   display: inline-block;
   margin: 1% 0%;
	padding: 3px;
	border-radius: 4px;
	border: 2px solid var(--dk-color);
   background-color: var(--dk-color);
}

.back_to_home:hover{
	background: var(--hover-color);
}

.main-content{
   width: 95%;
   padding: 10px;
   border-radius: 15px;
   height: auto;
}

h1{
    padding: 10px;
    padding-left: 0px;
    line-height: .70;
}

h2{
   line-height: .70;
}

h3{
   font-family: disco;
   font-size: 32px;
}

.byline{
   margin-top: -15px;
   width: fit-content;
   padding: 5px;
   border-radius: 5px;
   background-color: var(--lt-color);
}

header{
   padding: 0px;
   height: auto;
   width: 100%;
}

/*colored bars under dates-- 8 in all*/

.h01:after{
   content:""; 
   float:left; 
   background: var(--pink); 
   width: 100%; 
   height: 6px; 
   border-radius: 3px;
}
.h02:after{
   content:""; 
   float:left; 
   background: var(--orange); 
   width: 100%; 
   height: 6px; 
   border-radius: 3px;
}
.h03:after{
   content:""; 
   float:left; 
   background: var(--yellow); 
   width: 100%; 
   height: 6px; 
   border-radius: 3px;
}
.h04:after{
   content:""; 
   float:left; 
   background: var(--lime); 
   width: 100%; 
   height: 6px; 
   border-radius: 3px;
}
.h05:after{
   content:""; 
   float:left; 
   background: var(--blue); 
   width: 100%; 
   height: 6px; 
   border-radius: 3px;
}
.h06:after{
   content:""; 
   float:left; 
   background: var(--teal); 
   width: 100%; 
   height: 6px; 
   border-radius: 3px;
}
.h07:after{
   content:""; 
   float:left; 
   background: var(--purple); 
   width: 100%; 
   height: 6px; 
   border-radius: 3px;
}
.h08:after{
   content:""; 
   float:left; 
   background: var(--tan); 
   width: 100%; 
   height: 6px; 
   border-radius: 3px;
}


.captioned_image{
   width: fit-content;
   max-width: 80%;
   max-height: 300px;
   border: 1px solid var(--dkest-color);
   display: block;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 30px;
}

.inline{
   display: block;
   max-height: 300px;
   max-width: 100%;
   display: block;
   margin-left: auto;
   margin-right: auto;
}
.float-img{
   float:right; 
   width:40%;
}

.caption{
   display: block;
   padding: 5px;
   text-align: center;
   font-size: small;
   font-style: italic;
}

.inline-button{
   cursor: pointer;
   opacity:1;
   display: block;
   text-align: center;
   width: fit-content;
   padding: 8px;
   border: 2px solid var(--slate);
   box-shadow: 3px 3px 0px var(--teal);
   border-radius: 5px;
}

.inline-button:hover{
   background-color: skyblue;
   box-shadow: unset;
   transform: translate(3px, 3px);
}

.footer{
   text-align: center;
   color: var(--blue);
   padding: 10px;
}

/*used on the ecoregions page*/

.wizard_dumbass_class{
   padding: 0px;
   line-height: .9;
   margin: 7px;
}

.visuallyhidden{
   position:fixed;
   clip:rect(1px,1px,1px,1px)
}


.button-tooltip-container {
    display:block;
    align-items: center;
}

#custom-tooltip {
    opacity: 0;
    transition: opacity 1s; 
    z-index: 999;
    padding: 5px 12px;
    background-color: #000000df;
    border-radius: 4px;
    color: #fff;
}

#custom-tooltip.fade{
   opacity: 1;
}

@media only screen and (max-width: 720px) {
.float-img{
   float:right; 
   width:60%;
}

}