.navbar{
  height: 10vh;
  padding: 0 2%;
  display: flex;
}

.navbar a{
  color: #FFFFFF;
  text-decoration: none;
}

.navbar .navbar-brand:hover{
  color: #FFFFFF;
  text-decoration: none
}

.navbar a:hover{
  color: #FFFFFF;
  text-decoration: underline;
}

.navbar .links{
  width: 60%;
}

@media (max-width: 575.98px) {
  .navbar{
    padding: 2% 2%;
    height: 100%;
    display: block;
  }
  .navbar .links{
    width: 100%;
    margin-top: 3%;
  }

}

/*For Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .navbar{
    padding: 2% 2%;
    height: 100%;
    display: block;
  }
  .navbar .links{
    width: 100%;
    margin-top: 3%;
  }
}

/*For Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .navbar{
    padding: 2% 2%;
    height: 100%;
    display: flex;
  }
  .navbar .links{
    width: 60%;
  }
}

/*For Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .navbar .links{
    width: 45%;
  }
}