body {
  background-color: #862d86;
  color: black;
  font-family: Verdana;
  font-size: 16px;
  text-align: center;
}

.shelf {
  background-color: #cc6600;

  padding: 15px;
  margin: auto;
  float: none;
}

.invisitem {
  width: 22%;
  height: auto;
  padding-top: 14px;
  padding-left: 14px;
  padding-right: 14px;
  margin-bottom:22px;
  float: left;
  background-color: #804000;
}

.invisitem img {
  width: 100%;
  height: auto;
}

.shelfitem {
  width: 22%;
  height: auto;
  padding-top: 14px;
  padding-left: 14px;
  padding-right: 14px;
  margin-bottom:22px;
  float: left;
  background-color: #804000;
}

.shelfitem img {
  width: 100%;
  height: auto;
}

.desc {
 border: 5px solid #b366ff;
 border-radius: 10px;
 background-color: #dab3ff;
 padding: 20px;
 padding-top: 10px;
 margin: 20px;
 align-items: center;
 text-align: left;
}



.bookcover img{
	width: 20%;
}

#screenshot {
	max-width:25%;
    padding:6px;
}

@media only screen and (max-width: 1000px) {
  body {
    font-size: 12px;
  }
  
  .shelfitem {
  width: 45%;
  }
  
  .invisitem {
  display: none;
  }
  
  .bookcover img{
  width: 40%;
  }

  #screenshot {
    max-width: 40%;
  }

}

nav {
padding-top:10px;
}

a {
  font-weight: bold;
}

.shelf p {
  padding: 5px;
  text-align: center;
}

.dialog_stella {
 border: 5px solid #ffcce6;
 border-radius: 10px;
 background-color: #ffe6f3;
 padding: 30px;
 margin: 40px;
 padding-left: 160px;
 background-image: url(https://file.garden/Zb9-TxqH9DEExEfV/ABS/Dialog_Stella2.png);
 background-size: 150px 150px;
 background-position: left top;
 background-repeat: no-repeat;
 align-items: center;
 text-align: left;
 line-height: 1.5;
}

.dialog_poppy {
 border: 5px solid #ffd11a;
 border-radius: 10px;
 background-color: #ffff99;
 padding: 30px;
 margin: 40px;
 padding-left: 160px;
 background-image: url(https://file.garden/Zb9-TxqH9DEExEfV/ABS/Dialog_Poppy.png);
 background-size: 150px 150px;
 background-position: left top;
 background-repeat: no-repeat;
 align-items: center;
 text-align: left;
 line-height: 1.5;
}

.dialog_willow {
 border: 5px solid #ffdb4d;
 border-radius: 10px;
 background-color: #ff6600;
 padding: 30px;
 margin: 40px;
 padding-left: 160px;
 background-image: url(https://file.garden/Zb9-TxqH9DEExEfV/ABS/Dialog_Willow.png);
 background-size: 150px 150px;
 background-position: left top;
 background-repeat: no-repeat;
 align-items: center;
 text-align: left;
 line-height: 1.5;
}

.dialog_dahlia {
 border: 5px solid #cc6600;
 border-radius: 10px;
 background-color: #ffbf80;
 padding: 30px;
 margin: 40px;
 padding-left: 160px;
 background-image: url(https://file.garden/Zb9-TxqH9DEExEfV/ABS/Dialog_Dahlia.png);
 background-size: 150px 150px;
 background-position: left top;
 background-repeat: no-repeat;
 align-items: center;
 text-align: left;
 line-height: 1.5;
}

.dialog_gale {
 border: 5px solid #b366ff;
 border-radius: 10px;
 background-color: #dab3ff;
 padding: 30px;
 margin: 40px;
 padding-left: 160px;
 background-image: url(https://file.garden/Zb9-TxqH9DEExEfV/ABS/Dialog_Gale.png);
 background-size: 150px 150px;
 background-position: left top;
 background-repeat: no-repeat;
 align-items: center;
 text-align: left;
 line-height: 1.5;
}

.dialog_author {
 border: 5px solid green;
 border-radius: 10px;
 background-color: #ffff80;
 padding: 30px;
 margin: 40px;
 padding-left: 160px;
 background-image: url(https://file.garden/Zb9-TxqH9DEExEfV/ABS/Dialog_Author.png);
 background-size: 150px 150px;
 background-position: left top;
 background-repeat: no-repeat;
 align-items: center;
 text-align: left;
 line-height: 1.5;
}

.bookrow { 
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  
}

.bookrow::after {
  content: "";
  display: table;
  clear: both;
}

/***
EZ Gallery by netfriend - https://netfriend.neocities.org/ez-gallery/
Released under the Unlicense - https://unlicense.org/
***/

.row { 
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  
}

.row::after {
  content: "";
  display: table;
  clear: both;
}
