@import url('https://fonts.googleapis.com/css?family=Quicksand&display=swap');

body, select, option {
  font-family: "Open Sans", "Noto Sans", sans-serif;
  color: var(--menu-text-color);
  font-family: "Open Sans", "Noto Sans", sans-serif;
  font-weight: bold;
}

body.darkTheme {
  --background-image: url("../img/background-imperfections.webp");
  --background-gradient: linear-gradient(0deg, rgb(31 31 31) 0%, rgb(74 74 74) 100%);
  --menu-background-color: rgb(30, 30, 30);
  --menu-text-color: white;
}

body.lightTheme {
  --background-image: url("../img/background-imperfections.webp");
  --background-gradient: linear-gradient(0deg, rgb(197 197 197) 0%, rgb(245 245 245) 100%);
  --menu-background-color: rgb(220, 220, 220);
  --menu-text-color: black;
}

body {
  padding: 0;
  margin: 0;
  background: var(--background-gradient);
  background-size: cover;
}

@media screen and (max-width: 160vh) {#books, #volumes {--numberBook: 5;}}
@media screen and (max-width: 140vh) {#books, #volumes {--numberBook: 4;}}
@media screen and (max-width: 120vh) {#books, #volumes {--numberBook: 3;}}
@media screen and (max-width: 90vh)  {#books, #volumes {--numberBook: 2;}}
@media screen and (max-width: 70vh)  {#books, #volumes {--numberBook: 1;}}

.notice {
  background-color: #000000dd;
  border-radius: 20px;
  color: #fff;
  font-size: 18px;
  left: 50%;
  max-width: 800px;
  padding: 20px;
  position: fixed;
  top: 10%;
  transform: translate(-50%, 0);
  width: 80%;
  z-index: 1000;
}