Header.css

.header {
    display: flex;
    height: 130px;
    width: 100%;
    background-color: rgb(56, 57, 58);
    /* animation-name: rainbow;
    animation-duration: 10s;
    animation-iteration-count: infinite; */
    position: sticky;
    top: 0%;
    z-index: 100;
}
/* @keyframes rainbow {
    0% {
        background-color: lawngreen;
    }
    50% {
        background-color: lightgreen;
    }
    100% {
        background-color: lime;
    }
} */

.App-logo {
    position: absolute;
    left: 10%;
    border-radius: 50%;
    height: 70%;
    margin-top: 1%;
}

.search_tools {
    position: absolute;
    right: 2%;
}

.searchicon {
    position: inherit;
    top: 10%;
}
.header_nav {
    position: relative;
    top: 30%;
    left: 45%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: row flex-end;
    z-index: 1;
}
.dropbtn_home {
    background-color: #353b39;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
  }
  
  /* .dropdown_home {
    position: relative;
    display: inline-block;
  } */
  

  
  .dropdown_home:hover .dropbtn_home {opacity: 0.3;}

  .dropbtn_about {
    background-color: #353b39;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
  }
  .mission {
    background-color: #ffffff;
    color: rgb(7, 7, 7);
    width: 100%;
    text-align: left;
    padding: 12px;
    font-size: 16px;
    border: none;
  }
  .mission:hover {background-color: #ddd;}
  
  .vision {
    background-color: #ffffff;
    color: rgb(7, 7, 7);
    width: 100%;
    text-align: left;
    padding: 12px;
    font-size: 16px;
    border: none;
  }
  .vision:hover {background-color: #ddd;}
  .faith {
    background-color: #ffffff;
    color: rgb(7, 7, 7);
    width: 100%;
    text-align: left;
    padding: 12px;
    font-size: 16px;
    border: none;
  }
  .faith:hover {background-color: #ddd;}
  .goals {
    background-color: #ffffff;
    color: rgb(7, 7, 7);
    width: 100%;
    text-align: left;
    padding: 12px;
    font-size: 16px;
    border: none;
  }
  .goals:hover {background-color: #ddd;}
  .team {
    background-color: #ffffff;
    color: rgb(7, 7, 7);
    width: 100%;
    text-align: left;
    padding: 12px;
    font-size: 16px;
    border: none;
  }
  .team:hover {background-color: #ddd;}
  /* .dropdown_home {
    position: relative;
    display: inline-block;
  } */
  
  .dropdown_content_about {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  .dropdown_about:hover .dropdown_content_about {display: block;}
  
  .dropdown_about:hover .dropbtn_about {opacity: 0.3;}

  .dropbtn_areas {
    background-color: #353b39;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
  }
  .leadership {
    background-color: #ffffff;
    color: rgb(7, 7, 7);
    width: 100%;
    text-align: left;
    padding: 12px;
    font-size: 16px;
    border: none;
  }
  .leadership:hover {background-color: #ddd;}
  
  .education {
    background-color: #ffffff;
    color: rgb(7, 7, 7);
    width: 100%;
    text-align: left;
    padding: 12px;
    font-size: 16px;
    border: none;
  }
  .education:hover {background-color: #ddd;}
  .health {
    background-color: #ffffff;
    color: rgb(7, 7, 7);
    width: 100%;
    text-align: left;
    padding: 12px;
    font-size: 16px;
    border: none;
  }
  .health:hover {background-color: #ddd;}
  .economic {
    background-color: #ffffff;
    color: rgb(7, 7, 7);
    width: 100%;
    text-align: left;
    padding: 12px;
    font-size: 16px;
    border: none;
  }
  .economic:hover {background-color: #ddd;}
  .job {
    background-color: #ffffff;
    color: rgb(7, 7, 7);
    width: 100%;
    text-align: left;
    padding: 12px;
    font-size: 16px;
    border: none;
  }
  .job:hover {background-color: #ddd;}

  .charity {
    background-color: #ffffff;
    color: rgb(7, 7, 7);
    width: 100%;
    text-align: left;
    padding: 12px;
    font-size: 16px;
    border: none;
  }
  .charity:hover {background-color: #ddd;}
  .vol {
    background-color: #ffffff;
    color: rgb(7, 7, 7);
    width: 100%;
    text-align: left;
    padding: 12px;
    font-size: 16px;
    border: none;
  }
  .vol:hover {background-color: #ddd;}
  
  /* .dropdown_home {
    position: relative;
    display: inline-block;
  } */
  
  .dropdown_content_areas {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  .dropdown_areas:hover .dropdown_content_areas {display: block;}
  
  .dropdown_areas:hover .dropbtn_areas {opacity: 0.3;}

  .dropbtn_programs {
    background-color: #353b39;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
  }
  
  /* .dropdown_home {
    position: relative;
    display: inline-block;
  } */
  
  .dropdown_content_programs {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }

  .connect {
    background-color: #ffffff;
    color: rgb(7, 7, 7);
    width: 100%;
    text-align: left;
    padding: 12px;
    font-size: 16px;
    border: none;
  }
  .connect:hover {background-color: #ddd;}
  .farm {
    background-color: #ffffff;
    color: rgb(7, 7, 7);
    width: 100%;
    text-align: left;
    padding: 12px;
    font-size: 16px;
    border: none;
  }
  .farm:hover {background-color: #ddd;}
  .youth {
    background-color: #ffffff;
    color: rgb(7, 7, 7);
    width: 100%;
    text-align: left;
    padding: 12px;
    font-size: 16px;
    border: none;
  }
  .youth:hover {background-color: #ddd;}

  .touch {
    background-color: #ffffff;
    color: rgb(7, 7, 7);
    width: 100%;
    text-align: left;
    padding: 12px;
    font-size: 16px;
    border: none;
  }
  .touch:hover {background-color: #ddd;}
  .y_service {
    background-color: #ffffff;
    color: rgb(7, 7, 7);
    width: 100%;
    text-align: left;
    padding: 12px;
    font-size: 16px;
    border: none;
  }
  .y_service:hover {background-color: #ddd;}
  
  .dropdown_programs:hover .dropdown_content_programs {display: block;}
  
  .dropdown_programs:hover .dropbtn_programs {opacity: 0.3;}

  .dropbtn_media {
    background-color: #353b39;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
  }
  
  .vid {
    background-color: #ffffff;
    color: rgb(7, 7, 7);
    width: 100%;
    text-align: left;
    padding: 12px;
    font-size: 16px;
    border: none;
  }
  .vid:hover {background-color: #ddd;}
  .pic {
    background-color: #ffffff;
    color: rgb(7, 7, 7);
    width: 100%;
    text-align: left;
    padding: 12px;
    font-size: 16px;
    border: none;
  }
  .pic:hover {background-color: #ddd;}
  /* .dropdown_home {
    position: relative;
    display: inline-block;
  } */
  
  .dropdown_content_media {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  .dropdown_content_media > a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  
  .dropdown_content_media > a:hover {background-color: #ddd;}
  
  .dropdown_media:hover .dropdown_content_media {display: block;}
  
  .dropdown_media:hover .dropbtn_media {opacity: 0.3;}

  .dropbtn_contact {
    background-color: #353b39;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
  }
  
  /* .dropdown_home {
    position: relative;
    display: inline-block;
  } */
  
  .dropdown_content_contact {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  .dropdown_content_contact > a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  
  .dropdown_content_contact > a:hover {background-color: #ddd;}
  
  .dropdown_contact:hover .dropdown_content_contact {display: block;}
  
  .dropdown_contact:hover .dropbtn_contact {opacity: 0.3;}

  .dropbtn_donate {
    background-color: #145740;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
  }
  
  /* .dropdown_home {
    position: relative;
    display: inline-block;
  } */
  
  .dropdown_content_donate {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  .dropdown_content_donate > a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  
  .dropdown_content_donate > a:hover {background-color: #ddd;}
  
  .dropdown_donate:hover .dropdown_content_donate {display: block;}
  
  .dropdown_donate:hover .dropbtn_donate {opacity: 0.3;}