body {
  background-color: black;
  margin: 0;
  color: red;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

table {
  color: red;
  border: 5px solid red;
  border-radius: 10px;
}

th {
  width: 130px;
  height: 65px;
  font-size: 1.5rem;
  font-family: "Limelight", sans-serif;
  padding: 0 3px;
}

td {
  width: 130px;
  height: 130px;
  text-align: center;
  font-family: "Sansation", sans-serif;
  font-size: 1.5rem;
  padding: 0 3px;
}

tbody > tr:nth-child(odd) {
  background-color: #380505;
}

.cover-container {
  display: flex;
  justify-content: center;
}

.book-cover {
  width: 90px;
  height: 110px;
  border-radius: 5px;
  border-width: 5px;
  border-style: solid;
  border-image: linear-gradient(to right, #380505, red) 1;
}

tbody > tr:nth-child(odd) .book-cover {
  border-radius: 5px;
  border-width: 5px;
  border-style: solid;
  border-image: linear-gradient(to right, red, black) 1; 
}

.book-status {
  width: 115px;
  height: 50px;
  background-color: greenyellow;
  color: green;
  display: grid;
  place-items: center;
  border-radius: 15px;
  font-weight: bold;
}

.book-status.not-read {
  background-color: #9e0000;
  color: red;
}

.book-status-container {
  display: flex;
  justify-content: center;
}

.modify-status-container {
  display: flex;
  justify-content: center;
}

.modify-status-container > button {
  background-color: inherit;
  border: none;
}

.modify-status-container > button > svg {
  height: 2.5rem;
  fill: #696969;
}

.modify-status-container > button > svg:hover {
  fill: #4f4f4f;
}

button:hover {
  cursor: pointer;
}

button#add-book {
  height: 50px;
  width: 250px;
  margin-bottom: 10px;
  background-color: inherit;
  border: red solid 3px;
  border-radius: 5px;
  color: red;
  font-size: 1.5rem;
  font-weight: bold;
  font-family: "Limelight", sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 5vh;
}

button#add-book > svg {
  height: 2.5rem;
  fill: red;  
}

button#add-book > span {
  position: relative;
  top: 4px;
}

button#add-book:hover {
  border-color: #380505;
}

dialog#deletion-dialog {
  height: 200px;
  width: 500px;
  background-color: black;
  border: red solid 3px;
  border-radius: 5px;
  padding: 5px;
  position: absolute;
  top: -20vh;
  outline: 0;
  color: red;
}

dialog#deletion-dialog > div {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-rows: 1fr 6fr 3fr;
}

div.deletion-dialog-row, div.add-book-dialog-row {
  display: flex;
}

div.deletion-dialog-row:nth-child(1) > button, 
div.add-book-dialog-row:nth-child(1) > button {
  background-color: inherit;
  border: 0;
  outline: 0;
}

div.deletion-dialog-row:nth-child(1) > button:hover {
  cursor: default;
}

div.deletion-dialog-row > button > svg, 
div.add-book-dialog-row > button > svg {
  height: 2.5rem;
  fill: red;
}

div.deletion-dialog-row > button > svg:hover, 
div.add-book-dialog-row > button > svg:hover {
  height: 2.5rem;
  fill: #380505;
  cursor: pointer;
}

div.deletion-dialog-row > button > svg:hover > rect, 
div.add-book-dialog-row > button > svg:hover > rect {
  fill: white;
}

div.deletion-dialog-row:nth-child(1),
div.add-book-dialog-row:nth-child(1) {
  justify-content: flex-end;
}

div.deletion-dialog-row:nth-child(2),
div.add-book-dialog-row:nth-child(2) {
  justify-content: center;
  align-items: flex-start;
  font-size: 2rem;
  font-family: "Limelight", sans-serif;
}

div.add-book-dialog-row:nth-child(2) {
  align-items: center;
}

div.add-book-dialog-row:nth-child(2) > div {
  width: 90%;
  height: 80%;
}

div.add-book-dialog-row:nth-child(2) > div > div {
  display: grid;
  gap: 5px;
  grid-template-rows: repeat(4, 1fr);
  grid-template-columns: 1fr 1fr;
  height: 100%;
  width: 100%;
}

label + input {
  height: 2rem;
  width: 90%;
}

label + input[type="text"] {
  outline: none;
  border: red solid 3px;
  border-radius: 5px;
  background-color: black;
  color: white;
  font-family: "Sansation", sans-serif;
  font-size: 1.1rem;
  font-weight: bold;
}

div.deletion-dialog-row:nth-child(3) > button, 
div.add-book-dialog-row:nth-child(3) > button {
  outline: none;
  border: 0;
  background-color: red;
  color: black;
  border-radius: 5px;
  font-size: 1.5rem;
  font-family: "Limelight", sans-serif;
}

div.add-book-dialog-row:nth-child(3) > button {
  background-color: greenyellow;
  height: 70%;
  align-self: flex-end;
  margin: 20px;
}

div.deletion-dialog-row:nth-child(3) > button:hover,
div.add-book-dialog-row:nth-child(3) > button:hover {
  outline: none;
  border: 0;
  background-color: #380505;
  color: white;
  border-radius: 5px;
  font-size: 1.5rem;
  font-family: "Limelight", sans-serif;
}

div.add-book-dialog-row:nth-child(3) > button:hover {
  background-color: green;
}

dialog#add-book-dialog {
  height: 700px;
  width: 500px;
  background-color: black;
  border: red solid 3px;
  border-radius: 5px;
  padding: 5px;
  outline: 0;
  color: red;
}

dialog#add-book-dialog > form {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-rows: 1fr 12fr 2fr; 
}

div.add-book-dialog-row > button > svg {
  height: 2.5rem;
  fill: red;
}

dialog::backdrop {
  backdrop-filter: blur(15px);
}

div#table-container {
  display: flex;
  flex-direction: column;
}

div#table-container > div {
  color: white;
  align-self: center;
  font-family: 'Calculator', sans-serif;
  font-size: 1.2rem;
}

div#table-container > div > a {
  color: white;
}

div#table-container > div > a:visited {
  color: white;
}

div#table-container > div > a:hover {
  color: red;
}

/* Toggle switch imported from freefrontend.com */

input.book-status-modifier {
  --s: 1.3rem; /* adjust this to control the size*/
  
  height: calc(var(--s) + var(--s)/5);
  width: auto; /* some browsers need this */
  aspect-ratio: 2.25;
  border-radius: var(--s);
  margin: calc(var(--s)/2);
  display: grid;
  cursor: pointer;
  background-color:#9e0000; 
  box-sizing: content-box;
  overflow: hidden;
  transition: .3s .1s;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
input:before{
  content: "";
  padding: calc(var(--s)/10);
  --_g: radial-gradient(circle closest-side at calc(100% - var(--s)/2) 50%,#000 96%,#0000);
  background: 
    var(--_g) 0 /var(--_p,var(--s)) 100% no-repeat content-box,
    var(--_g) var(--_p,0)/var(--s)  100% no-repeat content-box,
    #fff;
  mix-blend-mode: darken;
  filter: blur(calc(var(--s)/12)) contrast(11);
  transition: .4s, background-position .4s .1s,
    padding cubic-bezier(0,calc(var(--_i,-1)*200),1,calc(var(--_i,-1)*200)) .25s .1s;
}
input:checked {
  background-color: greenyellow; 
}
input:checked:before {
  padding: calc(var(--s)/10 + .05px) calc(var(--s)/10);
  --_p: 100%;
  --_i: 1;
}