/* CSS HEX */
/*--coffee: #6A4C36ff;
--moss-green: #839E3Cff;
--bone: #D0C9BBff;
--lavender-web: #EBEBFEff;
--bistre: #3A2922ff;*/
html {
    background-color: #FFF8DC;
    font-family: "noto sans", helvetica, arial, verdana, geneva, sans-serif;
}
body{
width: 98%;
margin:auto;
}

header, a{
  background-color: #839E3Cff;
    opacity: 0.8;
    color: white;}
 h1, a{
     background-color: #D0C9BBff;
}

footer, footer a{
background-color: #6A4C36ff;
    color: white;
}
/*webfonts*/
h1,h2,h3{
  /*font-family:'noto', heebo, "roboto slab", helvetica, arial, verdana, sans-serif;*/
 font-family:'Dustismo Roman', serif;
text-align: center;
 color:#4e2923
     }
 h2{ font-family:'heebo',noto sans, sans-serif;
text-align: center;
     color: darkgreen    
    }
h4{ font-family:'heebo',noto sans,sans-serif;
text-align: center;
     color: white 
} 
    img, video, embed {
    max-width: 65%; 
}
aside{
    text-align: center;
    }
p {
    margin: 20px;
    font-size:16px;
    line-height:150%;
    /*font-family: 'noto serif',"times new roman",garamond, serif;*/
    font-family:"noto sans";
}
figure {
    display: block;
    width: 420px;
}

figcaption {
    font-size: 0.875em;
    font-weight: bold;
    text-align: center;
    display: block;
    margin-top: 0.5em;
}
/* descendant selectors */
nav ul {
    list-style-type: none;
    margin: 8px;
}
nav ul li a {
    text-transform: lowercase;
   text-decoration: none;
    line-height: 150%;
    font-size: 14px;
}
 h1 a{
    color: brown;
}
h3 a{
    color: #07451a;
}
h4 a{
    color:white;
}

/*id selectors*/

#habitats {
    font-weight: bolder;
}
/*classes*/
.floatright{
    float: right;
    padding:5px;
    margin:5px;
}
.floatleft{
    float: left;
    padding:5px;
    margin:5px;
}
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
.solidborder{
    border:solid black 1px;
}

.roundedCorners {
    border: 0;
    -ms-interpolation-mode: bicubic;
    vertical-align: middle;
    border-radius: 250px;
    margin-bottom: 5px;
    margin-right: 5px;
}

.centered {
    margin-left: auto;
    margin-right: auto;
    display: block;
    text-align: center;
}