rubyforgood/casa

@use "../base/breakpoints.scss" as screen-sizes;

.navbar {
  color: #fff;
  background: #00447c;
  box-shadow: 0 0 4px 4px rgba(0,0,0,0.28);
  height: 80px;
  justify-content: space-between;
  padding: 16px;
  width: 100%;
  z-index: 3;
}

.navbar strong {
  font-size: 2rem;
}

.navbar.mobile {
  display: none;
}

.mobile-icon {
  top: -2px;
  width: 40px;
}

@media only screen and (max-width: screen-sizes.$mobile) {
  .navbar.mobile {
    display: flex;
    position: sticky;
    top: 0;
  }
}