header {
  display: flex;
  justify-content: space-between;
  gap: 1em .5em;
  flex-wrap: nowrap;
  align-items: center;
  padding: 1rem 0;
  margin-bottom: 1rem;
  border-bottom: var(--color-text) 1px dashed;

  @media screen and (max-width: 450px) {
    flex-wrap: wrap;
  }

  .nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
    gap: .5em 1em;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .home-link {
    display: flex;
    align-items: center;
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    border-bottom: 2px solid var(--color-background);

    &:hover{
      text-decoration: underline;
    }

    img {
      width: 25px;
      height: 25px;
      margin-right: 10px;
    }
  }

  .nav-item span {
    display: inline-block;
    vertical-align: middle;
  }

  .nav-item a {
    padding-bottom: 5px;
    text-decoration: none;
  }

  .nav-item a:hover {
    text-decoration: none;
    border-bottom: 2px solid var(--color-primary);
  }

  .nav a[href][aria-current="page"] {
    text-decoration: none;
    border-bottom: 2px solid var(--text-color);
  }
}