header {
    text-align: center;
    background-color: #bb8130;
    padding: 1in 0;
    font-size: 1in;
}

footer {
    background-color: #bb8130;
    padding: 1vh;
}

a {
    color: #e68c38;
    text-decoration: none;
    &:hover{
        box-shadow: 8px 8px 16px #93271a;
    }
}

html{
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
}

.aboutme, .contacts {
    padding:  0.2in;
    color: #e68c38;
    text-align: center;
    display: flex;
    flex-flow: column;
    align-items: center;
    & > p,h1 {
        max-width: 5in;
    }
    
}

/*.library {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: start;
    gap: 1vh;
    row-gap: 1vh;
    padding: 1vh;
    background-color: #1d0904;
    & > .piece {
        height: 40vh;
        transition: 0.2s box-shadow;
        max-width: 100%;
        object-fit: contain;
        &:hover{
            box-shadow: 8px 8px 16px #756a34;
        }
    }
}*/

.library {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* Space between images */
  padding: 20px;
  background-color: #1d0904;
  & > .piece {
      transition: 0.2s box-shadow, transform 0.2s ease;
      &:hover{
          box-shadow: 8px 8px 0px #756a34;
          transform: translate(-5px, -5px);
      }
  }
}
.library::after {
  content: "";
  /* This element sucks up all the extra space on the last row */
  flex-grow: 999999999; 
  /* It mirrors the base properties of your images so the math works */
  height: 0;
  display: block;
}

.piece {
  flex-basis: calc(6in * var(--aspect-ratio));
  flex-grow: calc(var(--aspect-ratio) * 100);
  height: auto;
  aspect-ratio: var(--aspect-ratio); 
  max-width: 100%;
}

.piece img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures no distortion */
  display: block;
}

#piece-info {
    background: none;
    border: none;
    width: 60vh;
}
#piece-info::backdrop{
    background-color: rgba(0, 0, 0, 0.8);
}

#piece-info-footer {
    text-align: center;
    padding: 0.25in;
}

#piece-info-content {
    display: flex;
    flex-flow: column nowrap;
    height: 100%;
    background-color: white;
    box-shadow: 0px 0px 30px #bb8130;
    & > h1{
        margin: 1vh;
        text-overflow: wrap;
    }
    & > p{
        margin: 1vh;
        text-overflow: wrap;
    }
}