/* Style the navbar */

#navbar {
  padding: 5%;
  overflow: hidden;
  background-color: #31a8e0;
  width: 90%;
  z-index: 2500;
  text-align:center;
}
#navbar a {
  text-align: center;
  text-decoration: none;
  color: #fff;
  margin: 0 auto;
  padding: 1.2% 2.5%;
  letter-spacing: 1pt;
    line-height: 24pt;
  font-family: 'Poppins', cursive;
  font-weight: 500;
  font-size: 12pt;
  transition: 0.5 ease;
  background: #31a8e0;
}
#navbar a:hover {
  transition: 0.5 ease;
  color: #fff;
  cursor: pointer;
  background: #186184;
  padding: 1.2% 2.5%;
  border-radius: 30px;
}
#navbar a.active {
  font-weight: 600;
}
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}
.sticky + .content {
  padding-top: 150px;
}

@media only screen and (min-width: 581px) {
#navbar a {
  letter-spacing: 2pt;
  font-size: 13pt; 
  padding: 1% 2.5%;
}
#navbar a:hover {
  padding: 1% 2.5%;
}
#navbar {
  padding: 2.6% 10% 2.5%;
  overflow: hidden;
  background-color: #31a8e0;
  width: 80%;
  z-index: 2500;
  text-align:center;
}
}