/* default styles */
h1, h2, h3, p, nav ul {
    margin: 0;
    padding: 0;
    /* this removes default margin/padding 
    from these elements. You might want to add
    a few others in here.*/   
    }

    img {
    display: block;
    max-width: 100%;
    height: auto;
    /* this sets images as block elements
    and makes sure they don't bust out of 
    their containers, and that they maintain
    their aspect ratio. */
    }
    
    nav ul {
    list-style-type: none;
    /* gets rid of bullets */
    }

    figure{
    padding: 0;
    margin: 0;
    }

    .ribeye-marrow-regular {
    font-family: "Ribeye Marrow", serif;
    font-weight: 400;
    font-style: normal;
    }


    /* main styles */
@media screen and (max-width: 600px) {

    /*
    
    index     
    
    */

        /*page styles*/
    #index{
        background-image: url(images/sky.jpg);
        background-repeat: no-repeat;
        background-position: center top;
        background-attachment: fixed;
        background-size: contain;
        padding-top: 20.5%;
        font-family: 'Itim', sans-serif;
        z-index: -100;
        
        position: relative;
    }

    #index #page{
        background-color: #447fcf;

	    position: relative;
        z-index: -20;
    }
        /*header styles*/
    #index header{
        box-sizing: border-box;
        z-index: 1;
        margin-left: 20px;
        width: calc(100% - 40px);

        position: absolute;
        top: -6em;
        left: 0;

        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    #index header h1{
        color: #efec47;
        -webkit-text-stroke: 2px #b5a60d;
        font-size: 3em;
        white-space: nowrap;
    }
        /*nav menu styles*/
    #index header nav{
        position: relative;
        right: 20px;
        top: 0;
    }
    #index nav:hover ul{
        right: -25px;
    }
    #index nav ul {
        position: absolute;
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    #index .hidden {
        right: 5000px;
    }
    #index .showing {
        right: -25px;
    }
        /*menu*/
    #index nav ul li{
        border: 2px solid #3865a3;
        border-top: none;
    }
    #index nav ul li a{
        text-decoration: none;
        display: block;
        background-color: #447fcf;
        padding: 5px;
        color: gainsboro;
        font-weight: bold;
    }
    #index nav ul li a:hover{
        color:darkgrey;
    }
    #index nav ul li:first-of-type{
        border-top: 2px solid #3865a3;
    }
        /*body styles*/
    #index #heading{
        margin-bottom: 20px;

        position: relative;
        top: -1em;
    }
    #index #heading #desktop{
        display: none;
    }
    #index main{
        background: rgb(74,103,89);
        background: linear-gradient(180deg, rgba(74,103,89,1) 0%, rgba(33,59,66,1) 100%);
        height: 150em;
        z-index: -10;

        position: relative;
    }
        /*section styles*/
    #index article{
        position: relative;

        display: flex;
        flex-direction: column;
        gap: 13em;
    }
    #index section{
        background-color: #004f7a;
        padding: 20px;
        padding-left: 25px;
        padding-right: 25px;
        border: 5px solid #005786;
        border-radius: 25px;
        text-align: center;
    }
    #index main article section a{
        margin-top: 10%;
        color: gainsboro;
        font-size: xx-large;
        text-align: center;
        z-index: 10;
    }
    #index main article section a:hover{
        color:darkgrey;
    }
    #index section:nth-of-type(1){
        margin-left: auto;
        margin-right: auto;
    }
    #index section:nth-of-type(2){
        margin-left: auto;
        margin-right: 20px;
    }
    #index section:nth-of-type(3){
        margin-left: 20px;
        margin-right: auto;
    }
    #index section:nth-of-type(4){
        margin-left: auto;
        margin-right: auto;
    }
        /*fish*/
    #index #blue{
        width: 20%;
        margin-left: 20px;
        margin-right: auto;
    }
    #index #shark{
        width: 75%;
        margin-left: auto;
        margin-right: auto;
    }
    #index #orange{
        width: 20%;
        margin-left: auto;
        margin-right: 20px;
    }
    #index #ray{
        width: 50%;
        margin-left: auto;
        margin-right: auto;
    }
        /*kelp*/
    #index #kelp{
        display: flex;
        flex-direction: column;
        
        position: absolute;
        right: 0;
        top: 0;
        z-index: -1;
    }
    #index #kelp img{
        height: 50em;
    }
        /*footer styles*/
    #index #footer{
        background-color: #213b42;
        height: 10em;
        z-index: -9;
    }
    #index footer{
        background-image: url(images/floor.png);
        background-repeat: no-repeat;
        background-position: center bottom;
        height: 10em;
        z-index: 2;
        
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #index footer #content{
        margin-top: 20px;
        background-color: #004f7a;
        padding: 10px;
        padding-left: 15px;
        padding-right: 15px;
        border: 5px solid #005786;
        border-radius: 25px;
        width: fit-content;
        text-align: center;
        color: whitesmoke;

        z-index: 2;
        
        display: flex;
        gap: 10px;
    }
    #index footer #content a{
        color: gainsboro;
    }
    #index footer #content a:hover{
        color:darkgrey;
    }
    #index footer img{
        width: 60%;

        position: absolute;
        bottom: 0;
        right: 0;
    }

    /*

    about

    */

        /*page styles*/
    #about{
        background-image: url(images/sky.jpg);
        background-repeat: no-repeat;
        background-position: center top;
        background-attachment: fixed;
        background-size: contain;
        padding-top: 20.5%;
        font-family: 'Itim', sans-serif;
        z-index: -100;
        
        position: relative;
    }

    #about #page{
        background-color: #447fcf;

	    position: relative;
        z-index: -20;
    }
        /*header styles*/
    #about header{
        box-sizing: border-box;
        z-index: 1;
        margin-left: 20px;
        width: calc(100% - 40px);

        position: absolute;
        top: -6em;
        left: 0;

        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    #about header h1{
        color: #efec47;
        -webkit-text-stroke: 2px #b5a60d;
        font-size: 3em;
        white-space: nowrap;
    }
        /*nav menu styles*/
    #about header nav{
        position: relative;
        right: 20px;
        top: 0;
    }
    #about nav:hover ul{
        right: -25px;
    }
    #about nav ul {
        position: absolute;
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    #about .hidden {
        right: 5000px;
    }
    #about .showing {
        right: -25px;
    }
        /*menu*/
    #about nav ul li{
        border: 2px solid #3865a3;
        border-top: none;
    }
    #about nav ul li a{
        text-decoration: none;
        display: block;
        background-color: #447fcf;
        padding: 5px;
        color: gainsboro;
        font-weight: bold;
    }
    #about nav ul li a:hover{
        color:darkgrey;
    }
    #about nav ul li:first-of-type{
        border-top: 2px solid #3865a3;
    }
        /*body styles*/
    #about #heading{
        margin-bottom: 20px;

        position: relative;
        top: -1em;
    }
    #about #heading #desktop{
        display: none;
    }
    #about main{
        background: rgb(74,103,89);
        background: linear-gradient(180deg, rgba(74,103,89,1) 0%, rgba(33,59,66,1) 100%);
        height: 150em;
        z-index: -10;

        position: relative;
    }
        /*section styles*/
    #about article{
        position: relative;

        display: flex;
        flex-direction: column;
        gap: 10em;
    }
    #about section{
        background-color: #004f7a;
        padding: 10px;
        padding-left: 15px;
        padding-right: 15px;
        border: 5px solid #005786;
        border-radius: 25px;
    }
    #about main article section h2{
        color: gainsboro;
        z-index: 10;
    }
    #about main article section p{
        color: gainsboro;
        font-size: large;
        z-index: 10;
    }
    #about main article section a{
        color: gainsboro;
        font-size: large;
        z-index: 10;
    }
    #about main article section a:hover{
        color:darkgrey;
    }
    #about section:nth-of-type(1){
        margin-left: auto;
        margin-right: auto;
    }
    #about section:nth-of-type(2){
        margin-left: 15%;
        margin-right: 20px;
    }
    #about section:nth-of-type(3){
        margin-left: 20px;
        margin-right: 15%;
    }
    #about section:nth-of-type(4){
        margin-left: 15%;
        margin-right: 15%;
    }
        /*fish*/
    #about #blue{
        width: 20%;
        margin-left: 20px;
        margin-right: auto;
    }
    #about #shark{
        width: 75%;
        margin-left: auto;
        margin-right: auto;
    }
    #about #orange{
        width: 20%;
        margin-left: auto;
        margin-right: 20px;
    }
    #about #ray{
        width: 50%;
        margin-left: auto;
        margin-right: auto;
    }
        /*kelp*/
    #about #kelp{
        display: flex;
        flex-direction: column;
        
        position: absolute;
        right: 0;
        top: 0;
        z-index: -1;
    }
    #about #kelp img{
        height: 50em;
    }
        /*footer styles*/
    #about #footer{
        background-color: #213b42;
        height: 10em;
        z-index: -9;
    }
    #about footer{
        background-image: url(images/floor.png);
        background-repeat: no-repeat;
        background-position: center bottom;
        height: 10em;
        z-index: 2;
        
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #about footer #content{
        margin-top: 20px;
        background-color: #004f7a;
        padding: 10px;
        padding-left: 15px;
        padding-right: 15px;
        border: 5px solid #005786;
        border-radius: 25px;
        width: fit-content;
        text-align: center;
        color: whitesmoke;

        z-index: 2;
        
        display: flex;
        gap: 10px;
    }
    #about footer #content a{
        color: gainsboro;
    }
    #about footer #content a:hover{
        color:darkgrey;
    }
    #about footer img{
        width: 60%;

        position: absolute;
        bottom: 0;
        right: 0;
    }

    /*


    flora


    */

    /*page styles*/
    #flora{
        background-image: url(images/sky.jpg);
        background-repeat: no-repeat;
        background-position: center top;
        background-attachment: fixed;
        background-size: contain;
        padding-top: 20.5%;
        font-family: 'Itim', sans-serif;
        z-index: -100;
        
        position: relative;
    }


    #flora #page{
        background-color: #447fcf;


        position: relative;
        z-index: -20;
    }
        /*header styles*/
    #flora header{
        box-sizing: border-box;
        z-index: 1;
        margin-left: 20px;
        width: calc(100% - 40px);


        position: absolute;
        top: -6em;
        left: 0;


        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    #flora header h1{
        color: #efec47;
        -webkit-text-stroke: 2px #b5a60d;
        font-size: 3em;
        white-space: nowrap;
    }
        /*nav menu styles*/
    #flora header nav{
        position: relative;
        right: 20px;
        top: 0;
    }
    #flora nav:hover ul{
        right: -25px;
    }
    #flora nav ul {
        position: absolute;
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    #flora .hidden {
        right: 5000px;
    }
    #flora .showing {
        right: -25px;
    }
        /*menu*/
    #flora nav ul li{
        border: 2px solid #3865a3;
        border-top: none;
    }
    #flora nav ul li a{
        text-decoration: none;
        display: block;
        background-color: #447fcf;
        padding: 5px;
        color: gainsboro;
        font-weight: bold;
    }
    #flora nav ul li a:hover{
        color:darkgrey;
    }
    #flora nav ul li:first-of-type{
        border-top: 2px solid #3865a3;
    }
        /*body styles*/
    #flora #heading{
        margin-bottom: 20px;


        position: relative;
        top: -1em;
    }
    #flora #heading #desktop{
        display: none;
    }
    #flora main{
        background: rgb(74,103,89);
        background: linear-gradient(180deg, rgba(74,103,89,1) 0%, rgba(33,59,66,1) 100%);
        height: 150em;
        z-index: -10;


        position: relative;
    }
        /*section styles*/
    #flora article{
        position: relative;


        display: flex;
        flex-direction: column;
        gap: 6em;
    }
    #flora section{
        background-color: #004f7a;
        padding: 10px;
        padding-left: 15px;
        padding-right: 15px;
        border: 5px solid #005786;
        border-radius: 25px;
    }
    #flora main article section h2{
        color: gainsboro;
        z-index: 10;
    }
    #flora main article section p{
        color: gainsboro;
        font-size: large;
        z-index: 10;
    }
    #flora main article section ul{
        color: gainsboro;
        font-size: large;
        z-index: 10;
    }
    #flora main article section ol{
        color: gainsboro;
        font-size: large;
        z-index: 10;
    }
    #flora main article section a{
        color: gainsboro;
        font-size: large;
        z-index: 10;
    }
    #flora main article section a:hover{
        color:darkgrey;
    }
    #flora section:nth-of-type(1){
        margin-left: auto;
        margin-right: auto;
    }
    #flora section:nth-of-type(2){
        margin-left: 15%;
        margin-right: 20px;
    }
    #flora section:nth-of-type(3){
        margin-left: 20px;
        margin-right: 15%;
    }
    #flora section:nth-of-type(4){
        margin-left: 15%;
        margin-right: 15%;
    }
        /*plants*/
    #flora #flora1{
        width: 30%;
        margin-left: 20px;
        margin-right: auto;
        aspect-ratio: 1 / 1;
        border: 5px solid #005786;
        border-radius: 5px;
    }
    #flora #flora2{
        width: 30%;
        margin-left: auto;
        margin-right: auto;
        aspect-ratio: 1 / 1;
        border: 5px solid #005786;
        border-radius: 5px;
    }
    #flora #flora3{
        width: 30%;
        margin-left: auto;
        margin-right: 20px;
        aspect-ratio: 1 / 1;
        border: 5px solid #005786;
        border-radius: 5px;
    }
    #flora #flora4{
        width: 30%;
        margin-left: auto;
        margin-right: auto;
        aspect-ratio: 1 / 1;
        border: 5px solid #005786;
        border-radius: 5px;
    }
        /*kelp*/
    #flora #kelp{
        display: flex;
        flex-direction: column;
        
        position: absolute;
        right: 0;
        top: 0;
        z-index: -1;
    }
    #flora #kelp img{
        height: 50em;
    }
        /*footer styles*/
    #flora #footer{
        background-color: #213b42;
        height: 10em;
        z-index: -9;
    }
    #flora footer{
        background-image: url(images/floor.png);
        background-repeat: no-repeat;
        background-position: center bottom;
        height: 10em;
        z-index: 2;
        
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #flora footer #content{
        margin-top: 20px;
        background-color: #004f7a;
        padding: 10px;
        padding-left: 15px;
        padding-right: 15px;
        border: 5px solid #005786;
        border-radius: 25px;
        width: fit-content;
        text-align: center;
        color: whitesmoke;


        z-index: 2;
        
        display: flex;
        gap: 10px;
    }
    #flora footer #content a{
        color: gainsboro;
    }
    #flora footer #content a:hover{
        color:darkgrey;
    }
    #flora footer img{
        width: 60%;


        position: absolute;
        bottom: 0;
        right: 0;
    }   
    
    /*


    fauna


    */

        /*page styles*/
    #fauna{
        background-image: url(images/sky.jpg);
        background-repeat: no-repeat;
        background-position: center top;
        background-attachment: fixed;
        background-size: contain;
        padding-top: 20.5%;
        font-family: 'Itim', sans-serif;
        z-index: -100;
        
        position: relative;
    }


    #fauna #page{
        background-color: #447fcf;


        position: relative;
        z-index: -20;
    }
        /*header styles*/
    #fauna header{
        box-sizing: border-box;
        z-index: 1;
        margin-left: 20px;
        width: calc(100% - 40px);


        position: absolute;
        top: -6em;
        left: 0;


        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    #fauna header h1{
        color: #efec47;
        -webkit-text-stroke: 2px #b5a60d;
        font-size: 3em;
        white-space: nowrap;
    }
        /*nav menu styles*/
    #fauna header nav{
        position: relative;
        right: 20px;
        top: 0;
    }
    #fauna nav:hover ul{
        right: -25px;
    }
    #fauna nav ul {
        position: absolute;
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    #fauna .hidden {
        right: 5000px;
    }
    #fauna .showing {
        right: -25px;
    }
        /*menu*/
    #fauna nav ul li{
        border: 2px solid #3865a3;
        border-top: none;
    }
    #fauna nav ul li a{
        text-decoration: none;
        display: block;
        background-color: #447fcf;
        padding: 5px;
        color: gainsboro;
        font-weight: bold;
    }
    #fauna nav ul li a:hover{
        color:darkgrey;
    }
    #fauna nav ul li:first-of-type{
        border-top: 2px solid #3865a3;
    }
        /*body styles*/
    #fauna #heading{
        margin-bottom: 20px;


        position: relative;
        top: -1em;
    }
    #fauna #heading #desktop{
        display: none;
    }
    #fauna main{
        background: rgb(74,103,89);
        background: linear-gradient(180deg, rgba(74,103,89,1) 0%, rgba(33,59,66,1) 100%);
        height: 150em;
        z-index: -10;


        position: relative;
    }
        /*section styles*/
    #fauna article{
        position: relative;


        display: flex;
        flex-direction: column;
        gap: 9em;
    }
    #fauna section{
        background-color: #004f7a;
        padding: 10px;
        padding-left: 15px;
        padding-right: 15px;
        border: 5px solid #005786;
        border-radius: 25px;
    }
    #fauna main article section h2{
        color: gainsboro;
        z-index: 10;
    }
    #fauna main article section p{
        color: gainsboro;
        font-size: large;
        z-index: 10;
    }
    #fauna main article section a{
        color: gainsboro;
        font-size: large;
        z-index: 10;
    }
    #fauna main article section ul{
        color: gainsboro;
        font-size: large;
        z-index: 10;
    }
    #fauna main article section a:hover{
        color:darkgrey;
    }
    #fauna section:nth-of-type(1){
        margin-left: auto;
        margin-right: auto;
    }
    #fauna section:nth-of-type(2){
        margin-left: 15%;
        margin-right: 20px;
    }
    #fauna section:nth-of-type(3){
        margin-left: 20px;
        margin-right: 15%;
    }
    #fauna section:nth-of-type(4){
        margin-left: 15%;
        margin-right: 15%;
    }
        /*fish*/
    #fauna #blue{
        width: 20%;
        margin-left: 20px;
        margin-right: auto;
    }
    #fauna #shark{
        width: 75%;
        margin-left: auto;
        margin-right: auto;
    }
    #fauna #orange{
        width: 20%;
        margin-left: auto;
        margin-right: 20px;
    }
    #fauna #ray{
        width: 50%;
        margin-left: auto;
        margin-right: auto;
    }
        /*kelp*/
    #fauna #kelp{
        display: flex;
        flex-direction: column;
        
        position: absolute;
        right: 0;
        top: 0;
        z-index: -1;
    }
    #fauna #kelp img{
        height: 50em;
    }
        /*footer styles*/
    #fauna #footer{
        background-color: #213b42;
        height: 10em;
        z-index: -9;
    }
    #fauna footer{
        background-image: url(images/floor.png);
        background-repeat: no-repeat;
        background-position: center bottom;
        height: 10em;
        z-index: 2;
        
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #fauna footer #content{
        margin-top: 20px;
        background-color: #004f7a;
        padding: 10px;
        padding-left: 15px;
        padding-right: 15px;
        border: 5px solid #005786;
        border-radius: 25px;
        width: fit-content;
        text-align: center;
        color: whitesmoke;


        z-index: 2;
        
        display: flex;
        gap: 10px;
    }
    #fauna footer #content a{
        color: gainsboro;
    }
    #fauna footer #content a:hover{
        color:darkgrey;
    }
    #fauna footer img{
        width: 60%;


        position: absolute;
        bottom: 0;
        right: 0;
    }    


    /*


    eco


    */

    /*page styles*/
    #eco{
        background-image: url(images/sky.jpg);
        background-repeat: no-repeat;
        background-position: center top;
        background-attachment: fixed;
        background-size: contain;
        padding-top: 20.5%;
        font-family: 'Itim', sans-serif;
        z-index: -100;
        
        position: relative;
    }


    #eco #page{
        background-color: #447fcf;


        position: relative;
        z-index: -20;
    }
        /*header styles*/
    #eco header{
        box-sizing: border-box;
        z-index: 1;
        margin-left: 20px;
        width: calc(100% - 40px);


        position: absolute;
        top: -6em;
        left: 0;


        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    #eco header h1{
        color: #efec47;
        -webkit-text-stroke: 2px #b5a60d;
        font-size: 3em;
        white-space: nowrap;
    }
        /*nav menu styles*/
    #eco header nav{
        position: relative;
        right: 20px;
        top: 0;
    }
    #eco nav:hover ul{
        right: -25px;
    }
    #eco nav ul {
        position: absolute;
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    #eco .hidden {
        right: 5000px;
    }
    #eco .showing {
        right: -25px;
    }
        /*menu*/
    #eco nav ul li{
        border: 2px solid #3865a3;
        border-top: none;
    }
    #eco nav ul li a{
        text-decoration: none;
        display: block;
        background-color: #447fcf;
        padding: 5px;
        color: gainsboro;
        font-weight: bold;
    }
    #eco nav ul li a:hover{
        color:darkgrey;
    }
    #eco nav ul li:first-of-type{
        border-top: 2px solid #3865a3;
    }
        /*body styles*/
    #eco #heading{
        margin-bottom: 20px;


        position: relative;
        top: -1em;
    }
    #eco #heading #desktop{
        display: none;
    }
    #eco main{
        background: rgb(74,103,89);
        background: linear-gradient(180deg, rgba(74,103,89,1) 0%, rgba(33,59,66,1) 100%);
        height: 150em;
        z-index: -10;


        position: relative;
    }
        /*section styles*/
    #eco article{
        position: relative;


        display: flex;
        flex-direction: column;
        gap: 10em;
    }
    #eco section{
        background-color: #004f7a;
        padding: 10px;
        padding-left: 15px;
        padding-right: 15px;
        border: 5px solid #005786;
        border-radius: 25px;
        text-align: center;
    }
    #eco main article section h2{
        color: gainsboro;
        z-index: 10;
    }
    #eco main article section p{
        color: gainsboro;
        font-size: large;
        z-index: 10;
    }
    #eco main article section a{
        color: gainsboro;
        font-size: large;
        z-index: 10;
    }
    #eco main article section a:hover{
        color:darkgrey;
    }
    #eco section:nth-of-type(1){
        margin-left: auto;
        margin-right: auto;
    }
    #eco section:nth-of-type(2){
        margin-left: 15%;
        margin-right: 20px;
    }
    #eco section:nth-of-type(3){
        margin-left: 20px;
        margin-right: 15%;
    }
    #eco section:nth-of-type(4){
        margin-left: 15%;
        margin-right: 15%;
    }
        /*fish*/
    #eco #otter{
        width: 30%;
        margin-left: 20px;
        margin-right: auto;
        aspect-ratio: 1 / 1;
        border: 5px solid #005786;
        border-radius: 5px;
    }
    #eco #kelp-fish{
        width: 30%;
        margin-left: auto;
        margin-right: auto;
        aspect-ratio: 1 / 1;
        border: 5px solid #005786;
        border-radius: 5px;
    }
    #eco #urchin{
        width: 30%;
        margin-left: auto;
        margin-right: 20px;
        aspect-ratio: 1 / 1;
        border: 5px solid #005786;
        border-radius: 5px;
    }
    #eco #ray{
        width: 50%;
        margin-left: auto;
        margin-right: auto;
    }
        /*kelp*/
    #eco #kelp{
        display: flex;
        flex-direction: column;
        
        position: absolute;
        right: 0;
        top: 0;
        z-index: -1;
    }
    #eco #kelp img{
        height: 50em;
    }
        /*footer styles*/
    #eco #footer{
        background-color: #213b42;
        height: 10em;
        z-index: -9;
    }
    #eco footer{
        background-image: url(images/floor.png);
        background-repeat: no-repeat;
        background-position: center bottom;
        height: 10em;
        z-index: 2;
        
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #eco footer #content{
        margin-top: 20px;
        background-color: #004f7a;
        padding: 10px;
        padding-left: 15px;
        padding-right: 15px;
        border: 5px solid #005786;
        border-radius: 25px;
        width: fit-content;
        text-align: center;
        color: whitesmoke;


        z-index: 2;
        
        display: flex;
        gap: 10px;
    }
    #eco footer #content a{
        color: gainsboro;
    }
    #eco footer #content a:hover{
        color:darkgrey;
    }
    #eco footer img{
        width: 60%;


        position: absolute;
        bottom: 0;
        right: 0;
    }    
}

@media screen and (min-width: 601px) {

    /*
    
    index     
    
    */

    /*page styles*/
    #index{
        background-image: url(images/sky.jpg);
        background-repeat: no-repeat;
        background-position: center top;
        background-attachment: fixed;
        background-size: contain;
        padding-top: 20.5%;
        font-family: 'Itim', sans-serif;
        z-index: -100;
        
        position: relative;
    }

    #index #page{
        background-color: #447fcf;

	    position: relative;
        z-index: -20;
    }
        /*header styles*/
    #index header{
        box-sizing: border-box;
        z-index: 1;
        margin-left: 20px;
        width: calc(100% - 40px);

        position: absolute;
        top: -13em;
        left: 2em;

        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    #index header h1{
        color: #efec47;
        -webkit-text-stroke: 2px #b5a60d;
        font-size: 5em;
        white-space: nowrap;
    }
        /*nav menu styles*/
    #index header nav{
        position: relative;
        right: calc(20px + 4em);
        top: 0;
    }
    #index nav:hover ul{
        right: -25px;
    }
    #index nav ul {
        position: absolute;
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    #index .hidden {
        right: 5000px;
    }
    #index .showing {
        right: -25px;
    }
        /*menu*/
    #index nav ul li{
        border: 2px solid #3865a3;
        border-top: none;
    }
    #index nav ul li a{
        text-decoration: none;
        display: block;
        background-color: #447fcf;
        padding: 5px;
        color: gainsboro;
        font-weight: bold;
    }
    #index nav ul li a:hover{
        color:darkgrey;
        background-color: #347fcf;
    }
    #index nav ul li:first-of-type{
        border-top: 2px solid #3865a3;
    }
        /*body styles*/
    #index #heading{
        margin-bottom: 20px;
        width: 100%;

        position: relative;
        top: -5em;
    }
    #index #heading #mobile{
        display: none;
    }
    #index #heading img{
        width: 100%;
    }
    #index main{
        background: rgb(74,103,89);
        background: linear-gradient(180deg, rgba(74,103,89,1) 0%, rgba(33,59,66,1) 100%);
        height: 150em;
        z-index: -10;

        position: relative;
    }
        /*section styles*/
        #index article{
        position: relative;

        display: flex;
        flex-direction: column;
        gap: 8em;
    }
    #index section{
        background-color: #004f7a;
        padding: 20px;
        border: 5px solid #005786;
        border-radius: 25px;
        text-align: center;
    }
    #index main article section a{
        margin-top: 10%;
        color: gainsboro;
        font-size: 4em;
        text-align: center;
        z-index: 20;
    }
    #index main article section a:hover{
        color:darkgrey;
    }
    #index section:nth-of-type(1){
        margin-left: auto;
        margin-right: auto;
    }
    #index section:nth-of-type(2){
        margin-left: auto;
        margin-right: 20px;
    }
    #index section:nth-of-type(3){
        margin-left: 20px;
        margin-right: auto;
    }
    #index section:nth-of-type(4){
        margin-left: auto;
        margin-right: auto;
    }
        /*fish*/
    #index #blue{
        width: fit-content;
        margin-left: 20px;
        margin-right: auto;
    }
    #index #shark{
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }
    #index #orange{
        width: fit-content;
        margin-left: auto;
        margin-right: 20px;
    }
    #index #ray{
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }
        /*images*/
    #index #kelp{
        display: flex;
        flex-direction: column;
        
        position: absolute;
        right: 0;
        top: 0;
        z-index: -1;
    }
    #index #kelp img{
        height: 50em;
    }
        /*footer styles*/
    #index #footer{
        background-color: #213b42;
        height: 10em;
        width: 100%;
        z-index: -9;
    }
    #index footer{
        background-image: url(images/floor.png);
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: contain;
        height: 10em;
        z-index: 2;
        width: 80em;
        
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #index footer #content{
        margin-top: 20px;
        background-color: #004f7a;
        padding: 10px;
        border: 5px solid #005786;
        border-radius: 25px;
        width: fit-content;
        text-align: center;
        color: whitesmoke;

        z-index: 2;
        
        display: flex;
        gap: 10px;
    }
    #index footer #content a{
        color: gainsboro;
    }
    #index footer #content a:hover{
        color:darkgrey;
    }
    #index footer img{
        width: 30%;

        position: absolute;
        bottom: 0;
        right: 0;
    }

    /*
   
    about    
   
    */

    /*page styles*/
    #about{
        background-image: url(images/sky.jpg);
        background-repeat: no-repeat;
        background-position: center top;
        background-attachment: fixed;
        background-size: contain;
        padding-top: 20.5%;
        font-family: 'Itim', sans-serif;
        z-index: -100;
       
        position: relative;
    }


    #about #page{
        background-color: #447fcf;


        position: relative;
        z-index: -20;
    }
        /*header styles*/
    #about header{
        box-sizing: border-box;
        z-index: 1;
        margin-left: 20px;
        width: calc(100% - 40px);


        position: absolute;
        top: -13em;
        left: 2em;


        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    #about header h1{
        color: #efec47;
        -webkit-text-stroke: 2px #b5a60d;
        font-size: 5em;
        white-space: nowrap;
    }
        /*nav menu styles*/
    #about header nav{
        position: relative;
        right: calc(20px + 4em);
        top: 0;
    }
    #about nav:hover ul{
        right: -25px;
    }
    #about nav ul {
        position: absolute;
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    #about .hidden {
        right: 5000px;
    }
    #about .showing {
        right: -25px;
    }
        /*menu*/
    #about nav ul li{
        border: 2px solid #3865a3;
        border-top: none;
    }
    #about nav ul li a{
        text-decoration: none;
        display: block;
        background-color: #447fcf;
        padding: 5px;
        color: gainsboro;
        font-weight: bold;
    }
    #about nav ul li a:hover{
        color:darkgrey;
        background-color: #347fcf;
    }
    #about nav ul li:first-of-type{
        border-top: 2px solid #3865a3;
    }
        /*body styles*/
    #about #heading{
        margin-bottom: 20px;
        width: 100%;


        position: relative;
        top: -5em;
    }
    #about #heading #mobile{
        display: none;
    }
    #about #heading img{
        width: 100%;
    }
    #about main{
        background: rgb(74,103,89);
        background: linear-gradient(180deg, rgba(74,103,89,1) 0%, rgba(33,59,66,1) 100%);
        height: 150em;
        z-index: -10;


        position: relative;
    }
        /*section styles*/
    #about article{
    position: relative;


    display: flex;
    flex-direction: column;
    gap: 4em;
    }
    #about section{
        background-color: #004f7a;
        padding: 20px;
        border: 5px solid #005786;
        border-radius: 25px;
    }
    #about main article section h2{
        color: gainsboro;
        font-size: xx-large;
        z-index: 10;
    }
    #about main article section p{
        color: gainsboro;
        font-size: x-large;
        z-index: 20;
    }
    #about main article section a{
        color: gainsboro;
        font-size: x-large;
        z-index: 20;
    }
    #about main article section a:hover{
        color:darkgrey;
    }
    #about section:nth-of-type(1){
        margin-left: auto;
        margin-right: auto;
    }
    #about section:nth-of-type(2){
        margin-left: 66%;
        margin-right: 20px;
    }
    #about section:nth-of-type(3){
        margin-left: 20px;
        margin-right: 66%;
    }
    #about section:nth-of-type(4){
        margin-left: 33%;
        margin-right: 33%;
    }
        /*fish*/
    #about #blue{
        width: fit-content;
        margin-left: 20px;
        margin-right: auto;
    }
    #about #shark{
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }
    #about #orange{
        width: fit-content;
        margin-left: auto;
        margin-right: 20px;
    }
    #about #ray{
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }
        /*images*/
    #about #kelp{
        display: flex;
        flex-direction: column;
       
        position: absolute;
        right: 0;
        top: 0;
        z-index: -1;
    }
    #about #kelp img{
        height: 50em;
    }
        /*footer styles*/
    #about #footer{
        background-color: #213b42;
        height: 10em;
        width: 100%;
        z-index: -9;
    }
    #about footer{
        background-image: url(images/floor.png);
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: contain;
        height: 10em;
        z-index: 2;
        width: 80em;
       
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #about footer #content{
        margin-top: 20px;
        background-color: #004f7a;
        padding: 10px;
        border: 5px solid #005786;
        border-radius: 25px;
        width: fit-content;
        text-align: center;
        color: whitesmoke;


        z-index: 2;
       
        display: flex;
        gap: 10px;
    }
    #about footer #content a{
        color: gainsboro;
    }
    #about footer #content a:hover{
        color:darkgrey;
    }
    #about footer img{
        width: 30%;


        position: absolute;
        bottom: 0;
        right: 0;
    }

    /*
   
    flora    
   
    */

    /*page styles*/
    #flora{
        background-image: url(images/sky.jpg);
        background-repeat: no-repeat;
        background-position: center top;
        background-attachment: fixed;
        background-size: contain;
        padding-top: 20.5%;
        font-family: 'Itim', sans-serif;
        z-index: -100;
       
        position: relative;
    }




    #flora #page{
        background-color: #447fcf;




        position: relative;
        z-index: -20;
    }
        /*header styles*/
    #flora header{
        box-sizing: border-box;
        z-index: 1;
        margin-left: 20px;
        width: calc(100% - 40px);




        position: absolute;
        top: -13em;
        left: 2em;




        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    #flora header h1{
        color: #efec47;
        -webkit-text-stroke: 2px #b5a60d;
        font-size: 5em;
        white-space: nowrap;
    }
        /*nav menu styles*/
    #flora header nav{
        position: relative;
        right: calc(20px + 4em);
        top: 0;
    }
    #flora nav:hover ul{
        right: -25px;
    }
    #flora nav ul {
        position: absolute;
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    #flora .hidden {
        right: 5000px;
    }
    #flora .showing {
        right: -25px;
    }
        /*menu*/
    #flora nav ul li{
        border: 2px solid #3865a3;
        border-top: none;
    }
    #flora nav ul li a{
        text-decoration: none;
        display: block;
        background-color: #447fcf;
        padding: 5px;
        color: gainsboro;
        font-weight: bold;
    }
    #flora nav ul li a:hover{
        color:darkgrey;
        background-color: #347fcf;
    }
    #flora nav ul li:first-of-type{
        border-top: 2px solid #3865a3;
    }
        /*body styles*/
    #flora #heading{
        margin-bottom: 20px;
        width: 100%;




        position: relative;
        top: -5em;
    }
    #flora #heading #mobile{
        display: none;
    }
    #flora #heading img{
        width: 100%;
    }
    #flora main{
        background: rgb(74,103,89);
        background: linear-gradient(180deg, rgba(74,103,89,1) 0%, rgba(33,59,66,1) 100%);
        height: 150em;
        z-index: -10;




        position: relative;
    }
        /*section styles*/
    #flora article{
    position: relative;




    display: flex;
    flex-direction: column;
    gap: 1em;
    }
    #flora section{
        background-color: #004f7a;
        padding: 20px;
        border: 5px solid #005786;
        border-radius: 25px;
    }
    #flora main article section h2{
        color: gainsboro;
        font-size: xx-large;
        z-index: 10;
    }
    #flora main article section p{
        color: gainsboro;
        font-size: x-large;
        z-index: 20;
    }
    #flora main article section a{
        color: gainsboro;
        font-size: x-large;
        z-index: 20;
    }
    #flora main article section ul{
        color: gainsboro;
        font-size: x-large;
        z-index: 10;
    }
    #flora main article section ol{
        color: gainsboro;
        font-size: x-large;
        z-index: 10;
    }
    #flora main article section a:hover{
        color:darkgrey;
    }
    #flora section:nth-of-type(1){
        margin-left: auto;
        margin-right: auto;
    }
    #flora section:nth-of-type(2){
        margin-left: 66%;
        margin-right: 20px;
    }
    #flora section:nth-of-type(3){
        margin-left: 20px;
        margin-right: 66%;
    }
    #flora section:nth-of-type(4){
        margin-left: 33%;
        margin-right: 33%;
    }
        /*plants*/
    #flora #flora1{
        width: 15%;
        margin-left: 20px;
        margin-right: auto;
        aspect-ratio: 1 / 1;
        border: 5px solid #005786;
        border-radius: 5px;
    }
    #flora #flora2{
        width: 15%;
        margin-left: auto;
        margin-right: auto;
        aspect-ratio: 1 / 1;
        border: 5px solid #005786;
        border-radius: 5px;
    }
    #flora #flora3{
        width: 15%;
        margin-left: auto;
        margin-right: 20px;
        aspect-ratio: 1 / 1;
        border: 5px solid #005786;
        border-radius: 5px;
    }
    #flora #flora4{
        display: none;
        /*width: 15%;
        margin-left: auto;
        margin-right: auto;
        aspect-ratio: 1 / 1;
        border: 5px solid #005786;
        border-radius: 5px;*/
    }
        /*images*/
    #flora #kelp{
        display: flex;
        flex-direction: column;
       
        position: absolute;
        right: 0;
        top: 0;
        z-index: -1;
    }
    #flora #kelp img{
        height: 50em;
    }
        /*footer styles*/
    #flora #footer{
        background-color: #213b42;
        height: 10em;
        width: 100%;
        z-index: -9;
    }
    #flora footer{
        background-image: url(images/floor.png);
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: contain;
        height: 10em;
        z-index: 2;
        width: 80em;
       
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #flora footer #content{
        margin-top: 20px;
        background-color: #004f7a;
        padding: 10px;
        border: 5px solid #005786;
        border-radius: 25px;
        width: fit-content;
        text-align: center;
        color: whitesmoke;




        z-index: 2;
       
        display: flex;
        gap: 10px;
    }
    #flora footer #content a{
        color: gainsboro;
    }
    #flora footer #content a:hover{
        color:darkgrey;
    }
    #flora footer img{
        width: 30%;




        position: absolute;
        bottom: 0;
        right: 0;
    }

    /*
   
    about    
   
    */

    /*page styles*/
    #fauna{
        background-image: url(images/sky.jpg);
        background-repeat: no-repeat;
        background-position: center top;
        background-attachment: fixed;
        background-size: contain;
        padding-top: 20.5%;
        font-family: 'Itim', sans-serif;
        z-index: -100;
       
        position: relative;
    }




    #fauna #page{
        background-color: #447fcf;




        position: relative;
        z-index: -20;
    }
        /*header styles*/
    #fauna header{
        box-sizing: border-box;
        z-index: 1;
        margin-left: 20px;
        width: calc(100% - 40px);




        position: absolute;
        top: -13em;
        left: 2em;




        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    #fauna header h1{
        color: #efec47;
        -webkit-text-stroke: 2px #b5a60d;
        font-size: 5em;
        white-space: nowrap;
    }
        /*nav menu styles*/
    #fauna header nav{
        position: relative;
        right: calc(20px + 4em);
        top: 0;
    }
    #fauna nav:hover ul{
        right: -25px;
    }
    #fauna nav ul {
        position: absolute;
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    #fauna .hidden {
        right: 5000px;
    }
    #fauna .showing {
        right: -25px;
    }
        /*menu*/
    #fauna nav ul li{
        border: 2px solid #3865a3;
        border-top: none;
    }
    #fauna nav ul li a{
        text-decoration: none;
        display: block;
        background-color: #447fcf;
        padding: 5px;
        color: gainsboro;
        font-weight: bold;
    }
    #fauna nav ul li a:hover{
        color:darkgrey;
        background-color: #347fcf;
    }
    #fauna nav ul li:first-of-type{
        border-top: 2px solid #3865a3;
    }
        /*body styles*/
    #fauna #heading{
        margin-bottom: 20px;
        width: 100%;




        position: relative;
        top: -5em;
    }
    #fauna #heading #mobile{
        display: none;
    }
    #fauna #heading img{
        width: 100%;
    }
    #fauna main{
        background: rgb(74,103,89);
        background: linear-gradient(180deg, rgba(74,103,89,1) 0%, rgba(33,59,66,1) 100%);
        height: 150em;
        z-index: -10;




        position: relative;
    }
        /*section styles*/
    #fauna article{
    position: relative;




    display: flex;
    flex-direction: column;
    gap: 2em;
    }
    #fauna section{
        background-color: #004f7a;
        padding: 20px;
        border: 5px solid #005786;
        border-radius: 25px;
    }
    #fauna main article section h2{
        color: gainsboro;
        font-size: xx-large;
        z-index: 10;
    }
    #fauna main article section p{
        color: gainsboro;
        font-size: x-large;
        z-index: 20;
    }
    #fauna main article section a{
        color: gainsboro;
        font-size: x-large;
        z-index: 20;
    }
    #fauna main article section ul{
        color: gainsboro;
        font-size: x-large;
        z-index: 20;
    }
    #fauna main article section a:hover{
        color:darkgrey;
    }
    #fauna section:nth-of-type(1){
        margin-left: auto;
        margin-right: auto;
    }
    #fauna section:nth-of-type(2){
        margin-left: 66%;
        margin-right: 20px;
    }
    #fauna section:nth-of-type(3){
        margin-left: 20px;
        margin-right: 66%;
    }
    #fauna section:nth-of-type(4){
        margin-left: 33%;
        margin-right: 33%;
    }
        /*fish*/
    #fauna #blue{
        width: fit-content;
        margin-left: 20px;
        margin-right: auto;
    }
    #fauna #shark{
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }
    #fauna #orange{
        width: fit-content;
        margin-left: auto;
        margin-right: 20px;
    }
    #fauna #ray{
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }
        /*images*/
    #fauna #kelp{
        display: flex;
        flex-direction: column;
       
        position: absolute;
        right: 0;
        top: 0;
        z-index: -1;
    }
    #fauna #kelp img{
        height: 50em;
    }
        /*footer styles*/
    #fauna #footer{
        background-color: #213b42;
        height: 10em;
        width: 100%;
        z-index: -9;
    }
    #fauna footer{
        background-image: url(images/floor.png);
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: contain;
        height: 10em;
        z-index: 2;
        width: 80em;
       
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #fauna footer #content{
        margin-top: 20px;
        background-color: #004f7a;
        padding: 10px;
        border: 5px solid #005786;
        border-radius: 25px;
        width: fit-content;
        text-align: center;
        color: whitesmoke;




        z-index: 2;
       
        display: flex;
        gap: 10px;
    }
    #fauna footer #content a{
        color: gainsboro;
    }
    #fauna footer #content a:hover{
        color:darkgrey;
    }
    #fauna footer img{
        width: 30%;




        position: absolute;
        bottom: 0;
        right: 0;
    }

    /*
   
    eco    
   
    */


    /*page styles*/
    #eco{
        background-image: url(images/sky.jpg);
        background-repeat: no-repeat;
        background-position: center top;
        background-attachment: fixed;
        background-size: contain;
        padding-top: 20.5%;
        font-family: 'Itim', sans-serif;
        z-index: -100;
       
        position: relative;
    }




    #eco #page{
        background-color: #447fcf;




        position: relative;
        z-index: -20;
    }
        /*header styles*/
    #eco header{
        box-sizing: border-box;
        z-index: 1;
        margin-left: 20px;
        width: calc(100% - 40px);




        position: absolute;
        top: -13em;
        left: 2em;




        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    #eco header h1{
        color: #efec47;
        -webkit-text-stroke: 2px #b5a60d;
        font-size: 5em;
        white-space: nowrap;
    }
        /*nav menu styles*/
    #eco header nav{
        position: relative;
        right: calc(20px + 4em);
        top: 0;
    }
    #eco nav:hover ul{
        right: -25px;
    }
    #eco nav ul {
        position: absolute;
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    #eco .hidden {
        right: 5000px;
    }
    #eco .showing {
        right: -25px;
    }
        /*menu*/
    #eco nav ul li{
        border: 2px solid #3865a3;
        border-top: none;
    }
    #eco nav ul li a{
        text-decoration: none;
        display: block;
        background-color: #447fcf;
        padding: 5px;
        color: gainsboro;
        font-weight: bold;
    }
    #eco nav ul li a:hover{
        color:darkgrey;
        background-color: #347fcf;
    }
    #eco nav ul li:first-of-type{
        border-top: 2px solid #3865a3;
    }
        /*body styles*/
    #eco #heading{
        margin-bottom: 20px;
        width: 100%;




        position: relative;
        top: -5em;
    }
    #eco #heading #mobile{
        display: none;
    }
    #eco #heading img{
        width: 100%;
    }
    #eco main{
        background: rgb(74,103,89);
        background: linear-gradient(180deg, rgba(74,103,89,1) 0%, rgba(33,59,66,1) 100%);
        height: 150em;
        z-index: -10;




        position: relative;
    }
        /*section styles*/
    #eco article{
    position: relative;




    display: flex;
    flex-direction: column;
    gap: 1em;
    }
    #eco section{
        background-color: #004f7a;
        padding: 20px;
        border: 5px solid #005786;
        border-radius: 25px;
    }
    #eco main article section h2{
        color: gainsboro;
        font-size: xx-large;
        z-index: 10;
    }
    #eco main article section p{
        color: gainsboro;
        font-size: x-large;
        z-index: 20;
    }
    #eco main article section a{
        color: gainsboro;
        font-size: x-large;
        z-index: 20;
    }
    #eco main article section a:hover{
        color:darkgrey;
    }
    #eco section:nth-of-type(1){
        margin-left: auto;
        margin-right: auto;
    }
    #eco section:nth-of-type(2){
        margin-left: 66%;
        margin-right: 20px;
    }
    #eco section:nth-of-type(3){
        margin-left: 20px;
        margin-right: 66%;
    }
    #eco section:nth-of-type(4){
        margin-left: 33%;
        margin-right: 33%;
    }
        /*fish*/
    #eco #otter{
        width: 15%;
        margin-left: 20px;
        margin-right: auto;
        aspect-ratio: 1 / 1;
        border: 5px solid #005786;
        border-radius: 5px;
    }
        #otter img{
            width: 100%;
        }
    #eco #kelp-fish{
        width: 15%;
        margin-left: auto;
        margin-right: auto;
        aspect-ratio: 1 / 1;
        border: 5px solid #005786;
        border-radius: 5px;
    }
        #kelp-fish img{
            width: 100%;
        }
    #eco #urchin{
        width: 15%;
        margin-left: auto;
        margin-right: 20px;
        aspect-ratio: 1 / 1;
        border: 5px solid #005786;
        border-radius: 5px;
    }
        #urchin img{
            width: 100%;
        }
    #eco #ray{
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }
        /*images*/
    #eco #kelp{
        display: flex;
        flex-direction: column;
       
        position: absolute;
        right: 0;
        top: 0;
        z-index: -1;
    }
    #eco #kelp img{
        height: 50em;
    }
        /*footer styles*/
    #eco #footer{
        background-color: #213b42;
        height: 10em;
        width: 100%;
        z-index: -9;
    }
    #eco footer{
        background-image: url(images/floor.png);
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: contain;
        height: 10em;
        z-index: 2;
        width: 80em;
       
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #eco footer #content{
        margin-top: 20px;
        background-color: #004f7a;
        padding: 10px;
        border: 5px solid #005786;
        border-radius: 25px;
        width: fit-content;
        text-align: center;
        color: whitesmoke;




        z-index: 2;
       
        display: flex;
        gap: 10px;
    }
    #eco footer #content a{
        color: gainsboro;
    }
    #eco footer #content a:hover{
        color:darkgrey;
    }
    #eco footer img{
        width: 30%;




        position: absolute;
        bottom: 0;
        right: 0;
    }
}