#album-links {
    display: flex;
    flex-direction: column;
    width: 25%;
    padding: 20px;
    background-color: #f6f6f6;
    .heading{
      font-size: 1.6em;
      text-align: center;
    }.bookcase{
    .link{
      max-width:400px;
    }
    .selected{
      color:#000000;
      img{
        filter:invert();
      }
    }
    .link-section{
      font-size: 1.2em;
    }
    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;
  .info{
    color: #666;
  }
  .heading{
    font-size: 1.4em;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  div{
    margin-bottom: 12px;
  }
}
#gallery{
  display: flex;
  flex-wrap: wrap;
  .image{
    padding: 10px 10px 0 0;
    img{
      max-height: 240px;
    }
  }
}
#album-navigation {
  display: flex;
  justify-content: space-evenly;
  width: 100%; }

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

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