/*webfonts*/
    ;@font-face {
    font-family: 'Dustismo Roman';
    src: url('../fonts/DustismoRoman-Italic.woff2') format('woff2'),
        url('../fonts/DustismoRoman-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
    }
@font-face {
    font-family: 'Dustismo Roman';
    src: url('DustismoRoman.woff2') format('woff2'),
        url('DustismoRoman.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Dustismo Roman';
    src: url('DustismoRoman-Bold.woff2') format('woff2'),
        url('DustismoRoman-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Dustismo Roman';
    src: url('DustismoRoman-BoldItalic.woff2') format('woff2'),
        url('DustismoRoman-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
/*element selectors*/
/* CSS HEX */
/*--coffee: #6A4C36ff;
--moss-green: #839E3Cff;
--bone: #D0C9BBff;
--lavender-web: #EBEBFEff;
--bistre: #3A2922ff;*/
html {
    background-color: #FFF8DC;
    background-image: url(../assets/background.png);
    background-repeat: no-repeat;
    background-position-x: center;
    background-size: cover;
}
body{
width: 98%;
margin:auto;
}

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

footer, footer a{
background-color: #3A2922ff;
    color: white;
}
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; 
    }
  ul {
  list-style-type: none;
      li{
        font-size:14 px;}
 .centered-list {
        list-style-position: inside; /* Place the bullet inside the list item */
        text-align: center; /* Center the list item text */
    }
    .centered-list li {
        text-align: center; /* Center the bullet and text within the list item */
    }

} 
    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;
}