@font-face {
  font-family: 'Elegant Typewriter';
  src: local(''),
  url('/fonts/ELEGANT\ TYPEWRITER\ Regular.ttf');
}

html, body {
    display: grid;
    justify-content: center;
    background-color: antiquewhite;
    cursor: url("img/frog-book-cursor.png"), default;
    font-family:'Elegant Typewriter', Cochin, Georgia, Times, 'Times New Roman', serif;
    background-image: url("img/red\ flower\ bg.gif");
}

.heading {
    margin: 22px;
    display:block;
    color:#3c5c3b;
}

.content-library {
    display:grid;
    background-color: antiquewhite;
    margin: 0px;
    width: 1000px;
    border:3px #3c5c3b;
    border-style: solid;
    overflow:auto;
}

.status {
  display: block;
  color:#2d442c;
  margin-left: 22px;
}

#current:hover, #completed:hover, #wip:hover, #textbooks:hover {
  color: #5C3D3C;
}

#current {
  color:#3c5c3b
}

.container {
  position: relative;
  padding: 10px;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #3c5c3b;
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: bisque;
  font-size: 25px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

/* Light styling for presentation */
details {
  margin-block: .5rem;
  padding-block: .5rem;
}

summary {
  font-size: 25px;
  margin-left: 22px;
  margin-right:825px;
  font-weight:bold;
  color: #3c5c3b;
  /* Pin the custom marker to the container */
  position: relative;
  /* Register summary as an anchor element */
  anchor-name: --summary;
  
  &::marker {
    content: "";
  }
  
  &::before,
  &::after {
    /* Custom marker dimensions */
    content: "";
    border-block-start: 3px solid #3c5c3b;
    height: 0;
    width: 1rem;
    
    /* Positions the lines */
    inset-block-start: 50%;
    inset-inline-end: 0;
    
    /* Anchor the shape to the summary */
    position: absolute;
    position-anchor: --summary;
    position-area: top end;
  }
  
  /* Rotate just the ::after line to create a "+"" shape */
  &::after {
    transform: rotate(90deg);
    transform-origin: 50%;
  }
}

  /* Rotate the line when open */
  details[open] summary::after {
    transform: rotate(0deg);
  }


.bookshelf {
  display:grid;
  justify-items: center;
  align-items: center;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: 1fr 1fr 1fr;
  padding: 10px;
}


/* BUTTONS */

.header-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: auto;
  width: auto;
}

.buttons {
  display: flex;
  align-items: center;
}

.library-button,
.grooves-button,
.home-button,
.essays-button,
.telescope-button,
.flicks-button {
  background-color: antiquewhite;
  font-family: Ms Gotchic;
  font-size: 100%;
  color: #2d442c;
  height: 50px;
  width: 50px;
  margin: 10px;
  border-radius: 10px;
  border-color: #3c5c3b;
  border-width: 3px;
  cursor: url("img/frog-book-cursor.png"), default;
}

.library-button:hover,
.grooves-button:hover,
.home-button:hover,
.essays-button:hover,
.telescope-button:hover,
.flicks-button:hover {
  background-color: bisque;
}

.library-button:active,
.grooves-button:active,
.home-button:active,
.essays-button:active,
.telescope-button:active,
.flicks-button:active {
  opacity: 0.7;
}

/* END BUTTONS */

/* BOOKS */