/* COMMON STYLES */
html {
  scroll-behavior: smooth;
}
body {
  font-family: "Helvetica Neue", sans-serif;
  background-color: #efefef;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* all <li>, <ul>, <a> elements will have these styles 
initially because this file is imported from all pages */

ul {
  padding-inline-start: 0px;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}

/* STYLE HEADER (NAVIGATION) */

/* navbar class includes 2 divs: logo-and-nav + navbar-buttons */
.navbar {
  display: flex;
  /* display divs side by side */
  justify-content: space-between;
  /* separate items in flex direction (flex direction is row (x axis) intially) */
  align-items: center;
  /* center items vertically (cross axis: y) */
  padding: 1px 22px;
  background-color: white;
}

/* logo-and-nav class includes 2 divs: logo + nav */
.logo-and-nav {
  display: flex;
  /* display divs side by side */
  justify-content: space-between;
  align-items: center;
  /* center items vertically */
}

/* style logo */
.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  margin-right: 10px;
}

.logo img {
  width: 45px;
  margin: 0 5px;
}

.logo-text {
  text-align: center;
  color: #116466;
  margin-right: 5px;
  font-size: 8px;
}

.logo-text span:first-child {
  font-size: 18px;
  font-weight: bold;
}

/* style navigation */
nav ul {
  margin: 0px;
  display: flex;
  /* display <li> elements side by side */
  align-items: center;
}

nav ul li {
  margin: 0 12px;
}

nav a:hover {
  color: #116466;
}

/* style both nav-links and signup link */
nav a,
#signup {
  font-size: 14px;
  color: #383838;
}

.nav-active {
  color: #116466;
  border-bottom: 4px solid #116466;
  padding-top: 22px;
  padding-bottom: 18px;
}

.navbar-buttons {
  display: flex;
  align-items: center;
}

#signup {
  padding: 12px 20px;
  margin: 0 10px;
}

#signup:hover {
  color: #116466;
}

#login {
  background-color: #ff9736;
  color: white;
  padding: 12px 25px;
  border-radius: 3px;
}

#login:hover {
  background-color: #116466;
}

/* STYLE FOOTER */
footer {
  width: 100%;
  margin: auto;
  margin-top: 100px;
  background-color: #116466;
  color: white;
}

.logo-and-footer {
  padding: 20px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  /* separate elements horizontally */
  align-items: center;
  /* center vertically */
}

.logo-and-footer img {
  width: 180px;
  margin-bottom: 15px;
}

.footer-logo p {
  font-size: 14px;
  margin-left: 8px;
}

.logo-and-footer li {
  margin-bottom: 10px;
}

.footer-links a {
  color: #efefef;
  text-decoration: underline;
}

.follow-us>a {
  color: white;
  margin-right: 10px;
}

.members a {
  display: block;
  color: white;
  margin-bottom: 5px;
}

.members {
  margin-top: 25px;
}



@media screen and (max-width:940px) {
  .nav-ul li {
    margin: 0 7px;
  }

  #signup {
    padding: 10px 12px;
  }

}

@media screen and (max-width: 600px) {
  .logo-and-footer{
    flex-direction: column;
    align-items: flex-start;
    margin-left: 10%;
  }

  .footer-logo{
    display: none;
  }

}


@media screen and (max-width:850px) {
  nav a {
    color: white;
  }
  nav a:hover {
      color: white;
  }
  nav li:hover {
    background-color: #127779;
  }

  nav li:last-child {
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
  }

  .burger {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    padding: 12px 20px 12px 0px;
  }

  .burger span {
    width: 25px;
    height: 3px;
    background-color: #116466;
    border-radius: 15px;
  }

  .burger.active span:nth-child(1) {
    width: 20px;
    transform: rotate(45deg) translate(4px, 4px);
    transition: 0.5s ease;
  }

  .burger.active span:nth-child(2) {
    display: none;
  }

  .burger.active span:nth-child(3) {
    width: 20px;
    transform: rotate(-45deg) translate(4px, -4px);
    transition: 0.5s ease;
  }

  .nav-ul {
    display: block;
    position: absolute;
    background-color: #116466;
    transform: translateX(-120%);
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;

  }

  .nav-ul.active {
    width: 95%;
    background-color: #116466;
    transform: translateX(0%);
    transition: 0.5s ease;
    z-index: 1;
  }

  .logo-and-nav {
    display: block;
  }

  .burger-and-logo {
    display: flex;
  }

  .nav-ul li {
    display: block;
    padding: 20px 15px;
    border-bottom: 1px solid #d1e8e257;
    margin: 0px;
    text-align: center;
  }

  .navbar-menu a {
    color: white;
  }

  .logo {
    padding: 5px 0;
  }

  .logo-img {
    width: 50px;
    content: url("../images/wwt_logo_circle_mobile.png");
    margin: 0px 20px;
  }

  .logo-and-footer img {
    width: 130px;
  }

  .logo-text {
    display: none;
  }

  #login,
  #signup {
    padding: 8px 12px;
  }

  .navbar {
    padding: 0 10px;
  }
}