$ps-color-primary: #89939E
$ps-color-primary-trans: rgba(43, 50, 60, 0.64) !important
$ps-color-secondary: #DEDEDE
$ps-color-accent: $ps-color-secondary
$ps-color-background: #000000
$black: #000000
$white: #ffffff
//$black: $ps-color-background
//$white: $ps-color-primary
//$link: $ps-color-secondary
//$primary: $ps-color-primary
//$link: $ps-color-secondary
$scheme-main: $black
$scheme-invert: $white
// $body-background-color: $black-ter
// Override Main Body Presets
// $body-background-color: $ps-color-background
// $text: $ps-color-primary

// Override Navbar Presets
$navbar-background-color: $ps-color-primary-trans
$navbar-item-color: $white
//$navbar-item-hover-color: $ps-color-background !important
$navbar-item-hover-background-color: $ps-color-secondary
$navbar-dropdown-background-color: $ps-color-primary-trans
$navbar-dropdown-item-hover-color: $ps-color-background !important
$footer-background-color: $ps-color-primary-trans !important
// $footer-padding: 0.5rem 0.5rem

.center-all
  align-items: center;
  justify-content: center;

.bg-image
  background-image: url(../images/blue-background.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;

#master-container
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

#book-shelf
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))  // <== add this
  gap: 1rem  // space between rows and columns
  justify-content: space-evenly;
  // align-items: center;
  align-content: center;
  padding: 1rem;
  margin: 1rem;
  // background-color: $ps-color-background;

.is-rounded-left
  border-top-left-radius: 20px !important;
  border-bottom-left-radius: 20px !important;

.is-rounded-right
  border-top-right-radius: 20px !important;
  border-bottom-right-radius: 20px !important;

.book-thumbnail
  z-index: 1;
  position: relative;

.no-image-title
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: $white;
  font-size: 1.2rem;
  text-align: center;
  background-color: rgba(0,0,0,0.7);
  padding: 0.5rem;
  border-radius: 5px;

.no-image-author
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: $white;
  font-size: 1rem;
  text-align: center;
  background-color: rgba(0,0,0,0.7);
  padding: 0.5rem;
  border-radius: 5px;

.display-alt::after
  content: attr(alt);
  display: block !important;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.7);
  color: white;
  font-size: 0.8rem;
  padding: 0.2rem;

.title, .subtitle
  z-index: 2;
  position: relative;
  top: -155px;

.collection
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  align-content: center;
  background-color: $ps-color-background;

#collection_dropdown
  margin-top: auto;
  margin-bottom: auto;

.search_form
  margin-top: auto !important;
  margin-bottom: auto !important;

.footer
  display: flex;
  padding: 1rem !important;


#pagination-container
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.5rem;

#pagination-left, #pagination-right
  background-color: $ps-color-secondary;

#pagination-left
  display: flex;
  justify-content: flex-start;

#pagination-center
  display: flex;
  justify-content: center;
  flex: 1;

#pagination-right
  display: flex;
  justify-content: flex-end;

// @import "../../node_modules/bulma/bulma.scss"
@use "bulma/bulma.sass"

.container-full
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;