@use '_colors';

.header {
  height: 7vh;
  &__top {
    padding: 5px;
    display: flex;
    justify-content: space-between;
    background-color: colors.$color-primary;

    p {
      font-size: 12px;
      margin: 0;
      color: colors.$color-white;
    }
  }

  &__nav {
    background-color: colors.$color-secondary;
    padding: 10px;

    &-list {
      width: 100%;
      padding: 0;
      margin: 0;
      list-style: none;
      display: flex;
      justify-content: space-around;

      &-item {
        font-weight: bold;

        a {
          color: colors.$color-white;
          text-decoration: none;
        }

        &.active a {
          color: #2c2c2c;
        }
      }
    }
  }
}