/*BOOKSHELF STUFF*/

:root {
    --spine-pyramid: linear-gradient(
      315deg,
      transparent 75%,
      rgba(255, 255, 255, 0.1) 0
      ),
      linear-gradient(
        45deg,
         transparent 75%,
          rgba(255, 255, 255, 0.1) 0
      ),
      linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.2) 166px,
        transparent 0
      ),
      linear-gradient(
        45deg,
        rgba(0, 0, 0, 0.1) 75%,
        transparent 0
      );
      background-size: 20px 20px;
    --spine-stairs: repeating-linear-gradient(
        63deg,
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0.1) 1px,
        transparent 3px,
        transparent 0
      ),
      linear-gradient(
        127deg,
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0.1) 90px,
        transparent 55%,
        transparent 0
      ),
      linear-gradient(
        transparent 51%,
        rgba(0, 0, 0, 0.1) 170px
      );
      background-size: 70px 120px;
      
      
      
    --spine-argyle: repeating-linear-gradient(
        120deg,
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0.1) 1px,
        transparent 1px,
        transparent 60px
      ),
      repeating-linear-gradient(
        60deg,
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0.1) 1px,
        transparent 1px,
        transparent 60px
      ),
      linear-gradient(
        60deg,
        rgba(0, 0, 0, 0.1) 25%,
        transparent 25%,
        transparent 75%,
        rgba(0, 0, 0, 0.1) 75%,
        rgba(0, 0, 0, 0.1)
      ),
      linear-gradient(
        120deg,
        rgba(0, 0, 0, 0.1) 25%,
        transparent 25%,
        transparent 75%,
        rgba(0, 0, 0, 0.1) 75%,
        rgba(0, 0, 0, 0.1)
      );
    background-size: 70px 120px;
    
    
    
    --spine-tartan: repeating-linear-gradient(
        transparent,
        transparent 50px,
        rgba(0, 0, 0, 0.4) 50px,
        rgba(0, 0, 0, 0.4) 53px,
        transparent 53px,
        transparent 63px,
        rgba(0, 0, 0, 0.4) 63px,
        rgba(0, 0, 0, 0.4) 66px,
        transparent 66px,
        transparent 116px,
        rgba(0, 0, 0, 0.5) 116px,
        rgba(0, 0, 0, 0.5) 166px,
        rgba(255, 255, 255, 0.2) 166px,
        rgba(255, 255, 255, 0.2) 169px,
        rgba(0, 0, 0, 0.5) 169px,
        rgba(0, 0, 0, 0.5) 179px,
        rgba(255, 255, 255, 0.2) 179px,
        rgba(255, 255, 255, 0.2) 182px,
        rgba(0, 0, 0, 0.5) 182px,
        rgba(0, 0, 0, 0.5) 232px,
        transparent 232px
      ),
      repeating-linear-gradient(
        270deg,
        transparent,
        transparent 50px,
        rgba(0, 0, 0, 0.4) 50px,
        rgba(0, 0, 0, 0.4) 53px,
        transparent 53px,
        transparent 63px,
        rgba(0, 0, 0, 0.4) 63px,
        rgba(0, 0, 0, 0.4) 66px,
        transparent 66px,
        transparent 116px,
        rgba(0, 0, 0, 0.5) 116px,
        rgba(0, 0, 0, 0.5) 166px,
        rgba(255, 255, 255, 0.2) 166px,
        rgba(255, 255, 255, 0.2) 169px,
        rgba(0, 0, 0, 0.5) 169px,
        rgba(0, 0, 0, 0.5) 179px,
        rgba(255, 255, 255, 0.2) 179px,
        rgba(255, 255, 255, 0.2) 182px,
        rgba(0, 0, 0, 0.5) 182px,
        rgba(0, 0, 0, 0.5) 232px,
        transparent 232px
      ),
      repeating-linear-gradient(
        125deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.2) 2px,
        rgba(0, 0, 0, 0.2) 3px,
        transparent 3px,
        transparent 5px,
        rgba(0, 0, 0, 0.2) 5px
      );
  }
  
  .bookshelf {
    width: 91%;
    margin-top: 20px;
	  margin-left: 20px;
    display: flex;
    flex-wrap: wrap;
	  background-color: #af9483;
    border: 5px solid black;
    border-radius: 3px;
    border-color: #af9483;
  }
  
  .book, .bookPOTO, .bookHMD, .bookMTL, .bookGGG, .bookBB, .bookED, .book2001, .bookP, .bookST, .bookO {
    width: 50px;
    height: 280px;
    position: relative;
    margin-left: 3px;
    transition: transform 0.5s;
	  
  }  
  .bookPOTO {
    background-image: url('https://i.imgur.com/BLnrP78.jpeg');
    background-repeat: no-repeat;
    background-attachment: fixed;
  }  
  .bookHMD {
	  background-image: url('https://i.imgur.com/nlNMB1d.jpeg');
	  background-repeat: no-repeat;
	  background-attachment: fixed;
  }
  .bookMTL {
	  background-image: url('https://i.imgur.com/HN1D8KX.jpeg');
	  background-repeat: no-repeat;
	  background-attachment: fixed;
  }
  .bookGGG {
	  background-image: url('https://i.imgur.com/FpbilVc.jpeg');
	  background-repeat: no-repeat;
	  background-attachment: fixed;
  }
  .bookBB  {
    background-image: url('https://i.imgur.com/D8l7NXY.jpeg');
    background-repeat: no-repeat;
    background-attachment: fixed;
  }
  .bookED {
	  background-image: url('https://i.imgur.com/AobdUlZ.jpeg');
	  background-repeat: no-repeat;
	  background-attachment: fixed;
  }  
  .book2001 {
	  background-image: url('https://i.imgur.com/UW6JL3f.jpeg');
	  background-repeat: no-repeat;
	  background-attachment: fixed;
  }
  .bookP {
	  background-image: url('https://i.imgur.com/WuJfzhy.jpeg');
	  background-repeat: no-repeat;
	  background-attachment: fixed;
  }
  .bookST {
	  background-image: url('https://i.imgur.com/qzMwfdn.jpeg');
	  background-repeat: no-repeat;
	  background-attachment: fixed;
  }
  .bookO  {
    background-image: url('https://i.imgur.com/zZYICoK.jpeg');
    background-repeat: no-repeat;
    background-attachment: fixed;
  }
  
  .side, .sidePOTO, .sideHMD, .sideMTL, .sideGGG, .sideBB, .sideED, .side2001, .sideP, .sideST, .sideO {
    position: absolute;
    border: 2px solid black;
    border-radius: 3px;
    font-weight: bold;
    color: #000000;
    text-align: left;
    transform-origin: center left;
  }  
  
  .sidePOTO {
    border: 2px solid;
    color: #000000;
  }  
  .sideHMD {
    border: 2px solid;
    color: #000000;
  }  
  .sideMTL {
    border: 2px solid;
    color: black;
  }
  .sideGGG {
    border: 2px solid;
    color: black;
  }
  .sideBB {
    border: 2px solid;
    color: black;
  }
  .sideED {
    border: 2px solid;
    color: black;
  }
  .side2001 {
    border: 2px solid;
    color: black;
  }
  .sideP {
    border: 2px solid;
    color: black;
  }
  .sideST {
    border: 2px solid;
    color: black;
  }
  .sideO {
    border: 2px solid;
    color: black;
  }

  
  .spinerose {
    position: relative;
    width: 48px;
    height: 278px;
   /*pattern designed by me*/
    background-image: url('https://i.imgur.com/BLnrP78.jpeg');
    transform: rotateY(0deg) translateZ(0px);
  }
  
  .spinesepia {
    position: relative;
    width: 48px;
    height: 278px;
    /*pattern designed by me*/
    background-image: url('https://i.imgur.com/nlNMB1d.jpeg');
    transform: rotateY(0deg) translateZ(0px);
  }
  
  .spinegear {
    position: relative;
    width: 48px;
    height: 278px;
    /*pattern designed by me*/
    background-image: url('https://i.imgur.com/HN1D8KX.jpeg');
    transform: rotateY(0deg) translateZ(0px);
  }
  
  .spinecloud {
    position: relative;
    width: 48px;
    height: 278px;
    /*pattern designed by me*/
    background-image: url('https://i.imgur.com/FpbilVc.jpeg');
    transform: rotateY(0deg) translateZ(0px);
  }
  .spinevictorian {
    position: relative;
    width: 48px;
    height: 278px;
    /*pattern designed by me*/
    background-image: url('https://i.imgur.com/D8l7NXY.jpeg');
    transform: rotateY(0deg) translateZ(0px);
  }
  .spineshock {
    position: relative;
    width: 48px;
    height: 278px;
    /*pattern designed by me*/
    background-image: url('https://i.imgur.com/AobdUlZ.jpeg');
    transform: rotateY(0deg) translateZ(0px);
  }
  .spineblack {
    position: relative;
    width: 48px;
    height: 278px;
    /*pattern designed by me*/
    background-image: url('https://i.imgur.com/UW6JL3f.jpeg');
    transform: rotateY(0deg) translateZ(0px);
  }
  .spinegel {
    position: relative;
    width: 48px;
    height: 278px;
    /*pattern designed by me*/
    background-image: url('https://i.imgur.com/WuJfzhy.jpeg');
    transform: rotateY(0deg) translateZ(0px);
  }
  .spinetrek {
    position: relative;
    width: 48px;
    height: 278px;
    /*pattern designed by me*/
    background-image: url('https://i.imgur.com/qzMwfdn.jpeg');
    transform: rotateY(0deg) translateZ(0px);
  }
  .spineO {
    position: relative;
    width: 48px;
    height: 278px;
    /*pattern designed by me*/
    background-image: url('https://i.imgur.com/zZYICoK.jpeg');
    transform: rotateY(0deg) translateZ(0px);
  }
  
  .spine-title, .spine-titlePOTO, .spine-titleHMD, .spine-titleMTL, .spine-titleGGG, .spine-titleBB, .spine-titleED, .spine-title2001, .spine-titleP, .spine-titleST, .spine-titleO {
    margin: 2px;
    position: absolute;
    top: 0px;
    left: 0px;
    font-size: 14px;
    color: #e8e3e3;
    writing-mode: vertical-rl;
    text-orientation: mixed;
  }  
  .spine-titlePOTO {
    color: #fff3bf;
  }  
  .spine-titleHMD {
    color: #633a41;
  }  
  .spine-titleMTL {
    color: #eceff4;
  }
  .spine-titleGGG {
    color: #a9370c;
  }
  .spine-titleBB {
    color: #dbe4ff;
  }
  .spine-titleED {
    color: #fff85b;
  }
  .spine-title2001 {
    color: #eceff4;
  }
  .spine-titleP {
    color: #5e81ac;
  }
  .spine-titleST {
    color: #eceff4;
  }
  .spine-titleO {
    color: #fdb924;
  }
  
  .spine-author2 {
    position: absolute;
    color: #e8e3e3;
    bottom: 0px;
    left: 20%; /* no idea why 20% centers it */
  }
  
.spine-author3 {
    position: absolute;
    color: #e8e3e3;
    bottom: 0px;
    left: 14%; /* no idea why 20% centers it */
  }
  
.spine-author4 {
    position: absolute;
    color: #e8e3e3;
    bottom: 0px;
    left: 4%; /* no idea why 20% centers it */
  }
  
  .book:hover, .bookPOTO:hover, .bookHMD:hover, .bookMTL:hover, .bookGGG:hover, .bookBB:hover, .bookED:hover, .book2001:hover, .bookP:hover, .bookST:hover, .bookO:hover {
    z-index: 1;
    transform: translateY(-20px);
  } 
  
/*red info box*/  
.box {
	position: fixed;
	border: 2px solid black;
	border-radius: 3px;
	height: 87vh;
	width: 45vw;
	margin-right: 20px;
	margin-top: 20px;
	background-color: #940404;
	padding: 20px;
	color: #e8e3e3;
	font-family: Times New Roman;
}
  
/*SPACING STUFF*/
  
.column {
  float: left;
  width: 50%;
}
  
.columnT {
  float: left;
  width: 30%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* GENERAL */
body {
	background-color: #000000;
}

a {
	color: white;
	font-size: 16px;
}

#tbTitle {
	margin-bottom: 0;
}

.lilguy {
	float: right;
	position: relative;
	top: 0;
	border: 2px solid black;
	border-radius: 3px;
	height: 22px;
	width: 80px;
	background-color: white;
	color: black;
	text-align: center;
	padding: 0px;
	margin: 0px;
}

.centertext {
	text-align: center;
}

.byemargins {
	margin: 0 auto;
}

.floatright {
	float: right;
}