#album-links {
    display: flex;
    flex-direction: column;
    width: 25%;
    padding: 20px;
    background-color: #f6f6f6;
    h2{
      font-size: 1.6em;
      text-align: center;
    }
    ul{
    li{
      max-width:400px;
    }
    .selected{
      color:#000000;
      img{
        filter:invert();
      }
    }
    a:hover{
      img {
        border: solid 0.1em #000; }
    }
    img{
      margin-top: 6px;
      width: 100%;
      border-radius: 10px;
      border: solid 0.1em #f6f6f6;
    }}

}
#album{
  width: 75%;
  padding: 20px;
  header{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: baseline;
    h1{
      font-size: 1.4em;
    }
    span{
      color: #666;
    }
  }
  div{
    margin-bottom: 12px;
  }
  nav {
    width: 100%;
    padding: 24px 0 12px;
    ul{
      display: flex;
      justify-content: space-evenly;
    } 
  }
}
#gallery{
  display: flex;
  flex-wrap: wrap;
  .image{
    padding: 10px 10px 0 0;
    img{
      max-height: 240px;
    }
  }
}

@media(max-width: 1080px){
  #album-links{
    order: 2;
    width: 100%;
    ul {
    display: flex;
    flex-wrap: nowrap;
    gap: 2em; 
    overflow-x: scroll;
    overflow-y: hidden;
    li{
      flex: 0 0 auto;
      }
    }
  }
  #album{
    order: 1;
    width: 100%;
  }
  #gallery{
    justify-content: center;
    .image{
      padding: 4px
    }
  }
}

@media(max-width: 640px){
  #album-links li{
    width: 240px;
  }
  #gallery{
  .image{
    padding: 4px 10px;
  }
}
}