body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #22303C;
  color: #BFC7CF;
}

/* Navbar container */
.navbar {
  display: flex;
  justify-content: center;   /* centers nav-center horizontally */
  align-items: center;       /* centers items vertically */
  height: 60px;              /* give it some height */
  background-color: #152232; /* dark background */
}

/* Brand/logo */
.brand {
  color: #4287f5;  /* bright blue */
  font-weight: bold;
  font-size: 20px;
}

/* Center links */
.nav-center {
  display: flex;             /* flex for the links/images inside */
  align-items: center;       /* vertical centering */
  gap: 6vw;                /* space between links/images */
}

.nav-center a {
  text-decoration: none;
  color: #BFC7CF;
  transition: color 0.3s;
  font-size: 16px;
  background-color: #22303C;
  background: 10px solid;
  padding: 2px 6px;          /* padding around the text */
  border-radius: 300px;      /* rounded corners */
}

.nav-center a:hover {
  color: #fff;
  background-color: #596978;
  background: 10px solid;
  padding: 2px 6px;
  border-radius: 300px;
}

/* Search box */
.search-box {
  position: relative;        /* parent for absolute results */
  display: flex;
  align-items: center;
  background: white;
  border-radius: 500px;
  padding: 5px 12px;
  height: 30px;
}

.search-box input {
  border: none;
  outline: none;
  padding: 5px;
  font-size: 14px;
  background: white;
  border-radius: 500px;
}

.search-box .icon {
  color: gray;
  margin-right: 5px;
  font-size: 14px;
}

/* Search results dropdown */
#searchResults {
  display: none;              /* hidden by default */
  position: absolute;
  top: 100%;                  /* directly below search-box */
  left: 0;
  width: 100%;                /* match search-box width */
  background: #22303C;
  border: 1px solid white;
  margin-top: 5px;
  padding: 10px;
  border-radius: 8px;
  z-index: 1000;              /* keep it on top */
}

#searchResults a {
  color: #c4c4c4;
  text-decoration: none;
  padding: 4px 0;
  display: block;
  background: #22303C;
}

#searchResults a:hover {
  color: #4287f5;
}

/* Profile */
.profile {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
}

/* Header banner */
header {
  display: flex;
  justify-content: center;  /* center horizontally */
  align-items: center;      /* center vertically */
  height: 50px;             /* make it taller like a banner */
  background-color: #152232;
  color: white;
}