* {
  margin: 0%;
  padding: 0%;
  box-sizing: border-box;
}
#navbar {
  width: 100%;
  height: 80px;
  margin: 5px auto;
  padding: auto 8%;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
    rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  background-color: white;
  position: sticky;
  z-index: 9999999;
  top: 1px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
#navbar > div {
  font-size: 1.2em;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
#navbar > div:first-child {
  width: 10%;
  cursor: pointer;
}
#navbar > div:nth-child(2) {
  width: 40%;
}
#navbar > div:nth-child(2) > div {
  cursor: pointer;
}
#navbar > div:nth-child(3) {
  width: 20%;
}
#navbar > div > input {
  width: 100%;
  height: 30px;
  border-radius: 4px;
  padding: 5px 10px;
  display: block;
  border: 1px solid #ccc;
}

#navbar > div:last-child {
  width: 15%;
}
#navbar > div:last-child > div {
  cursor: pointer;
}
#navbar > div:last-child > div:nth-child(3) {
  padding: 4px 10px;
  border-radius: 10px;
  background-color: rgb(230, 161, 161);
}
.wth {
  width: auto;
  height: 30px;
}
#cart-items {
  font-size: 25px;
  color: black;
  margin-left: 10px;
}
/* invite bar */
#invite {
  width: 100%;
  margin: auto;
  height: 60px;
  background-color: aliceblue;
  display: flex;
  justify-content: center;
  align-items: center;
}

#invite > div {
  width: 1fr;
}
#invite > div:nth-child(2) {
  width: 25%;
}
#invite > div > img {
  width: 100%;
  height: 40px;
}
#invite > button {
  padding: 8px 15px;
  margin-left: -20px;
  color: red;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
}
/* hover attributes */
@media all and (min-width: 768px) and (max-width: 1024px) {
  #invite{
    visibility: hidden;
  }
  
}
@media all and (min-width: 320px) and (max-width: 767px) {
  #invite{
    visibility: hidden;
  }
}
 /* ----------------------- DROPDOWN MENU ----------------------- */
        .dropdown {
            position: relative;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background: white;
            min-width: 180px;
            padding: 10px 0;
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
            border-radius: 8px;
            z-index: 200;
        }

        .dropdown-content a {
            display: block;
            padding: 10px 18px;
            text-decoration: none;
            color: #333;
            font-size: 14px;
            transition: 0.2s;
        }

        .dropdown-content a:hover {
            background: #f3f3f3;
            color: #b48b5a;
        }

        .dropdown:hover .dropdown-content {
            display: block;
        }