/*------ HEADER NAVIGATION ------*/

.header{
    top: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 10%;
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.8),
        rgba(0, 0, 0, 0.4)
    );
}

.header-logo{
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-decoration: none;
    color: #fff;
}

#nav {
  display: flex;
  gap: 2rem;
}

#nav a {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  color: #aaa;
  transition: color 0.2s ease;
}

#nav a:hover {
  color: #aef;
}

@media (max-width: 700px){
    .header{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .nav-logo{
        margin-bottom: 20px;
    }

    #nav {
        display: flex;
        gap: 1rem;
    }
}