@import '../../scss/variables';

.header {
  position: fixed;
  top: 0;
  left: 0;
  background: linear-gradient(to right, $primaryBlue, darken($primaryBlue, 20%));
  height: 50px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 20px;

  &__title-container {
    display: flex;
    align-items: center;
  }

  &__nav-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    margin-right: 10px;
    background: $primaryBlue;
    border: none;
    color: $white;
    border-right: 1px solid darken($primaryBlue, 2%);
    cursor: pointer;
    outline: none;
    &:hover {
      background: darken($primaryBlue, 5%);
    }
  }
}