/* ======================= START BASIC NAVIGATION FUNCTIONALITY =================================== */

nav ul {list-style-type: none;}
/* Hide menu bullets by default */


button {
  padding: 0 !important;
  background-image: url(bgimg/hamburger-list-menu-svgrepo-com.svg);
  background-size: 105%;
  height: 1rem;
  width: 1rem;
}
/* Remove default browser button styles to properly 
enable text-indent: 100% in .hide-text image replacement */


ul#menu {
 display: none;
}
/* Hide drop down menu by default when page loads */


ul#menu.show-nav {
  display: block !important;
}
/* force the navigation to display on click  */


#menu.show-nav {
	position: absolute;
    /* menu is on a layer, above normal page context: won't disrupt page when it appears */
	z-index: 10;
    /* layer 10: above everything else (random positive number) */

}
/* position the drop down menu when it displays */


#menu.show-nav li {
	margin: 0;
    padding: 0;
}

#menu li:nth-child(2) svg{width: 3.5rem; height: 3.5rem; position: relative; left: -0.75rem}
#menu li:nth-child(2) span{ position: relative; left: -1.3rem; top:-0.55rem;}

/* ======================= END BASIC NAVIGATION FUNCTIONALITY =================================== */




/*
OLD SCHOOL IMAGE REPLACEMENT TECHNIQUE
.HIDE-TEXT FOR IMAGE REPLACEMENTS
SEE: HTTP://WWW.ZELDMAN.COM/2012/03/01/REPLACING-THE-9999PX-HACK-NEW-IMAGE-REPLACEMENT/
*/

/* ==========================CONTACT FORM========================*/
.hide-text {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
  }

fieldset {
    margin: 1rem;
    border: 1px solid #d02c2c;
  }

input:not(.button), textarea, select {
    display: block;
    margin: 0;
  }

fieldset {
    margin: 1rem;
    border: 1px solid #444;
    padding: 1rem;
  }

input:not(.button),textarea,select {
    display: block;
    margin: 0;
    width: 100%;
  }

input[type="text"] {
    margin-bottom: 1rem;
  }

legend {
    padding: 0 0.5rem;
  }

label {
    margin-bottom: 0.35rem;
    display: block;
  }     
    
.align-right {
    display: flex;

    justify-content: flex-end;
        /* Send buttons to the end of the flex box, ie right */

    margin-right: 1rem;
        /* match the width of the margin of the fieldset so it aligns */
  } 
  
.button[type="reset"] {
    margin-right: 1rem;
  }  

textarea {
    min-height: 100px;
  }

.comment-box {
    padding-top: 4rem;
    background-image: url(bgimg/sharkalert-nft-investiment-sign-animal-svgrepo-com.svg);
    background-repeat: no-repeat;
    background-size: 5.5rem;
    background-position: 50% 0.2rem;
  }

  

  /* =========================== NAVIGATION MENU =====================*/

      .primary-navigation {
        display: flex;
        justify-content: end;
        padding: 4px;
        background-color: rgb(4, 108, 156);
        
    }

     ul#menu.show-nav {
      background-color: rgb(101, 201, 244);
      top: 1.5rem;
      width: 100%;
      padding: 2rem;

      
  }

      #menu svg {
        display: inline-block; /* use "inline-block" to place icon next to text; OR use "block" to place icon above text instead */
        height: 2rem;
        width: 2rem;
        margin: 2%;
    }

          #menu svg {
        display: inline-block;
        height: 2rem;
        width: 2rem;

        position: relative;  /* relative to the SVG's default position */
        top: 0.7rem;
    }

        button:hover {
        cursor: pointer;
        }

        #menu.show-nav li {
        margin: 0 0 1rem 0;
        padding: 0;
        
    }

        ul#menu.show-nav {
        background-image: url(bgimg/globe-office-web-svgrepo-com.svg);
        background-size: 12rem;
        background-repeat: no-repeat;
        background-position: 105% 90%;
        border-radius: 30px;
        margin:0.01rem;
        padding: 0.25rem; 
        position:left -0.75rem;
    }
           /*   contact.  */

        #menu a:link {
        color: rgb(2, 2, 2); 
        /* change to suit your design */

        text-decoration: none;  
        /* remove default underline */
    }

    #menu a:visited {
        color: rgb(17, 97, 155);  

        /* less vivid color, must look "less interesting" than the a:link color 
            basically, this style must suggest "been there, seen that" */
    }

    #menu a:hover {
        text-decoration: underline; 
        /* add underline on hover to show it is a link */
    }

    #menu a:active {
        color: lavender; 
        /* only shows when clicking the mouse */
    }

  /* ========== header ========= */
    header {
      padding: 1rem;
      background-color: rgb(5, 74, 107);
    }


  /* =========== footer ========= */

   footer {
    padding: 0.2rem;
    background-image: url(bgimg/Screenshot\ 2025-11-26\ at\ 11.51.58\ AM\ 2.jpg);
    background-size: 550px;
    background-repeat: no-repeat;
    background-position: 20% 5%;
    margin: 0.1rem;
    border-radius: 22px;
    border: 2px solid rgba(253, 253, 253, 0.468);
    a {
      color: rgb(230, 239, 239);
    }
  
   }

   body{
    background-color: #bddeeb;
    margin: 0.3rem;
   }

   div.footer{
    margin: 3%;
    padding: 1rem;
    background-color: #585a5b61;
    border: 2px solid rgba(253, 253, 253, 0.413);
    border-radius: 15px;
   }
  /* ======= home page ========*/

      .card {
        border: 15px solid #fcf9f927;
        max-width: 400px;
        margin:2rem auto;
        padding: 4rem 1rem 2rem 1rem;
        border-radius: 40px;

        background-position: 50% -120%;
        background-size: 400px;
        background-repeat: no-repeat;
    }

    .wildlife {
        background-image: url(bgimg/raja-hasibuan-RXm5in5-avI-unsplash.jpg);
        background-position: 50% 10%;
        background-size: 399px;
        color: aliceblue;
    }
    

    .threats { 
        background-image: url(bgimg/pollution.jpg);
        background-position: 50% 10%;
      background-size: 462px; 
      color: aliceblue;
    }

    .type {
        background-image: url(bgimg/paw-print-web.jpg);
        background-position: 50% 50%;
      background-size: 770px; 
      color: aliceblue;
    }

    .readmore {
        display: grid;
        background-color: rgb(179, 238, 217);
        width: fit-content;
        padding: rem;
        color: rgb(0, 100, 98);
        font-weight: bold;
        margin: 2rem auto 0 auto;
       border-radius: 30px;
       border: 6px solid rgba(253, 253, 253, 0.36);
    }

    .image { 
      margin: 6rem;
    }


    /* ========== Classic Typographic Scale =========== */

h1 { font-size: 2.53em; }  /* step 6 value */
h2 { font-size: 2.1418em; }
h3 { font-size: 1.8131em; }
h4 { font-size: 1.5349em; }
h5 { font-size: 1.2994em; }
p { font-size: 1.1em; }  /* step 5 value */
small { font-size: .9312em; }

     /* ==== ALL ABOUT IMPORTANCE ==== */

/* ========= importance ========= */

.importance {
  position: relative;
  text-align: center;
  color: rgb(174, 239, 196);
}
.centered-1 {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 160%;
  font-family:'Courier New', Courier, monospace;
  font-weight: bolder;
}

/* ========== medecine ==========*/
.medecine {
  position: relative;
  text-align: center;
  color: rgb(222, 228, 246);
}
.centered-2 {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 200%;
  font-family:'Courier New', Courier, monospace;
  font-weight: bolder;
}

    /* ======== ALL ABOUT THREATS ========= */

/* ========= threats ============== */
    .threats {
  position: relative;
  text-align: center;
  color: rgb(222, 228, 246);
}
.centered-3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 200%;
  font-family:'Courier New', Courier, monospace;
}

/* =========== pollution =========*/
.pollution {
  position: relative;
  text-align: center;
  color: rgb(222, 228, 246);
}
.centered-4 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 260%;
  font-family:'Courier New', Courier, monospace;
  font-weight: 10rem;
}

.stats {
  background-position:10px ;
  margin: 1.5rem;
  border: #444;
  border-radius: 30px;
  
}

    /* =========== ALL ABOUT TYPE OF WILDLIFE ========== */

/* ========= type ========= */
.Type {
  position: relative;
  text-align: center;
  color: rgb(237, 239, 242);
}
.centered-5 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 260%;
  font-family:'Courier New', Courier, monospace;
  font-weight: 10rem;
}
/* =========== mammal ======= */

.mammals {
  position: relative;
  text-align: center;
  color: rgb(225, 229, 241);
}
.centered-6 {
  position: absolute;
  top: 57%;
  left: 55%;
  transform: translate(-50%, -50%);
  font-size: 260%;
  font-family:'Courier New', Courier, monospace;
  font-weight: 10rem;
}