html{
  scroll-behavior: smooth;
  background-color: #efefef;
}

body{
  text-align: center;
  font-family: 'Helvetica Neue', sans-serif;
}

h1.title, span.title{
  font-weight: 800;
  color:#910101;
}

h1.subtitle, span.subtitle{
  font-weight: 400;
  color:#888;
}

p {
  font-size: 1.25rem;
}

li{
  padding-left:10px;
  padding-bottom:10px;
}

.button { font-weight: 600; text-transform: uppercase; align-items: center; display: flex; gap: 20px; }

.is-color1 { background-color:#910101; border-color:#910101; color:white; }
.is-color1:hover { background-color:#B50101; border-color: #B50101; color:white; }

.footer {background-color: transparent;}

.bookshelf {
  max-width: 1000px;
  width: 100%;
  display: inline-block;
  justify-content: center;
  flex-shrink: 0;
  z-index: 99; /* -1  */
  position: relative;
  height: 0px;
  border-bottom: 16px solid #D2B89E;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  pointer-events: all;
}

.bookshelf::before {
    content: "";
    position: absolute;
    top: 16px;
    left:-20px;
    background: linear-gradient(90deg, #D2AD90 0%, #EDE3DA 100%);
    height: 15px;
    width: calc(100% + 40px);
    box-shadow: 0px -1px 6px rgba(0, 0, 0, 0.05),
      0px 4px 16px rgba(0, 0, 0, 0.25);
    z-index: 2;
}

.books {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2%;
  width: 88%;
  margin: auto;
  /*transform: translateY(-100%);*/
  padding: 0px;
  z-index: 100;
  position: relative;
  top: 5px;
}

.book {
  width: 100%;
  position: relative;
  box-shadow: 0px -1px 6px rgba(0, 0, 0, 0.05), 0px 4px 16px rgba(0, 0, 0, 0.25);
}  

.book img {
  margin-bottom:-8px;
}  

.bookshelfcontainer {
  padding-bottom: 30px;
}