header {
  
  display: flex;
  position: fixed;
  border: 2px solid #212227;
  top: -1.7px;
  right: 2.5%;
  border-bottom-left-radius: 40px;
  border-bottom-right-radius: 40px;
  width: 95%;
  height: 60px;
  backdrop-filter: blur(8px);
    background-image: linear-gradient(
        50deg,
        #1b1a1a7a,
        #0f0f0f92,
        #1b1a1a94,
        #0f0f0f94,
        #201f1f28);
  z-index: 1000;
}
#mainNav {
    background-image: linear-gradient( 130deg, #56445C,20%,#1E1D21,60%, #213D41 70%);
  display: flex;
  position: relative;
  border-bottom-left-radius: 35px;
  border-bottom-right-radius: 35px;
  width: 99%;
  height: 55px;
  right: -5.5px;
  align-content: center;
  justify-content: space-around;

}
#siteLogo {
  display: flex;
  position: relative;
  width: 55px;
  top: 12px;
  
}
ul {
  display: flex;
  position: relative;
  gap: 50px;
}

li {
  color: #8d9bb0;
  display: flex;
  position: relative;
  width: fit-content;
  list-style: none;
  
}
header a {
  color: #8D9BB0;
  display: flex;
  position: relative;
  text-decoration: none;
  width: fit-content;
  height: fit-content;
}


/*=========  .7. MEDIA QUERIES ================= */
/* <<<<<<<<>>>>>>>>  desktop2 <<<<<<<<>>>>>>>> */
@media screen and (max-width: 1358px) {
}
/* <<<<<<<<>>>>>>>>  desktop 3 <<<<<<<<>>>>>>>> */
@media screen and (max-width: 1112px) {
}
/* <<<<<<<<>>>>>>>>  desktop mini <<<<<<<<>>>>>>>> */
@media screen and (max-width: 909px) {
}
/* <<<<<<<<>>>>>>>> .7b. Tablet <<<<<<<<>>>>>>>> */
@media screen and (max-width: 768px) {
  
}
/* <<<<<<<>>>>>>>> the inbetween mobile and tablet <<<<<<<<>>>>>>>> */
@media screen and (max-width: 644px) {
}
/* <<<<<<<<>>>>>>>> .7b. Mobile <<<<<<<<>>>>>>>> */
@media screen and (max-width: 480px) {
  header {
    display: none;
  }
  #mobile-header-menu {
  display: flex;
  position: fixed;
  height: fit-content;
  top: 0px;
  width: 80%;
  padding-top: 15px;
  justify-content: space-between;
  align-content: center;
  align-items: center;
  z-index: 1001;
}
  #mobileMenuOptions {
  background-color: #22222286;
  display: none;
  flex-direction: column;
  position: fixed;
  top: -16px;
  left: 0;
  width: 100%;
  height: 100vh;
  backdrop-filter: blur(8px);
  background-image: linear-gradient(
        50deg,
        #1b1a1a7a,
        #0f0f0f92,
        #1b1a1a94,
        #0f0f0f94,
        #2726266b);
  z-index: 1000;
  justify-content: center;
  align-content: flex-start;
  align-items: flex-start;
  padding: 0%;
  border: 0px;
}
  #mobile-header-menu li {
  display: flex;
  position: relative;
  width: 100%;
  height: fit-content;
  z-index: 1000;
  justify-content: center;
}
  #mobile-header-menu a {
    color: rgb(147, 161, 190);
}
#siteLogoMobile{
  background-color: #22222260;
  display: flex;
  position: relative;
  width: 60px;
  padding: 13.8px 15px;
  border-radius: 10px;
  justify-content: center;
  align-content: center;
  align-items: center;
  backdrop-filter: blur(8px);
  z-index: 1001;
}
#mobile-menu-btn{
  background-color: #22222260;
  display: flex;
  position: relative;
  justify-content: center;
  align-content: center;
  align-items: center;
  backdrop-filter: blur(8px);
  border-radius: 15px;
  z-index: 1001;
}
#mobile-menu-close-btn{
  background-color: #22222260;
  display: none;
  position: relative;
  justify-content: center;
  align-content: center;
  align-items: center;
  backdrop-filter: blur(8px);
  border-radius: 15px;
  z-index: 1001;
}
#mobile-menu-icon {
  display: flex;
  position: relative;
  width: 20px;
  padding: 20px;
  justify-content: center;
  align-content: center;
  align-items: center;
}
#mobile-menu-close-icon {
  background-color: #21222760;
  display: flex;
  position: relative;
  width: 12px;
  border: 1px solid #ffffff00;
  border-radius: 15px;
  padding: 20px;
  justify-content: center;
  align-content: center;
  align-items: center;
}
main {
  margin-top: 20px;
}
}