@import url('https://fonts.googleapis.com/css2?family=Fondamento:ital@0;1&family=Jacquard+24&display=swap');
    
   body {
 
  background-image: url(images/vintagebg.jpg);
  font-size: 18px;
  color: white;
}

.smallimg {
			width: 100px;
			height: 100px;
			color: white;
		}
		
.side-box {
			background: #000;
			height: 200px;
			width: 200px;
			font-size: 10px;
		}
.content {
			width: 300px;
			height: 300px;
		}
.content2 {
			width: 200px;
		}
	 
.table {
	        
            display:inline-block;
          
	}



  /* LInk Area */
        a:link {
            color: black;
            background-color: transparent;
            text-decoration: none;
            }

        a:visited {
             color: black;
             background-color: transparent;
              text-decoration: none;
            }

        a:hover {
            color: black;
            background-color: transparent;
            }

        a:active {
            color: black;
            background-color: transparent;
        }

/* Books Area */
.book {
  transform-style: preserve-3d;
  position: relative;
  height: 300px;
  cursor: pointer;
  backface-visibility: visible;
}
.book2 {
  transform-style: preserve-3d;
  position: relative;
  height: 300px;
  cursor: pointer;
  backface-visibility: visible;
}



.front, .back, .page1, .page2, .page3, .page4, .page5, .page6 {
  transform-style: preserve-3d;
  position: absolute;
  width: 200px;
  height: 100%;
  top: 0; left: 0;
  transform-origin: left center;
  transition: transform .5s ease-in-out, box-shadow .35s ease-in-out;
}
.front2, .back2, .page12, .page22, .page32, .page42, .page52, .page62 {
  transform-style: preserve-3d;
  position: absolute;
  width: 200px;
  height: 100%;
  top: 0; left: 0;
  transform-origin: left center;
  transition: transform .5s ease-in-out, box-shadow .35s ease-in-out;
}

.front, .back {
  background-image: url(images/poetrycover.jpg);
}
.front2, .back2 {
  background-image: url(images/journalcompcover.jpg);
}

.front, .page1, .page3, .page5 {
  border-bottom-right-radius: .5em;
  border-top-right-radius: .5em;
}
.front2, .page12, .page32, .page52 {
  border-bottom-right-radius: .5em;
  border-top-right-radius: .5em;
}

.back, .page2, .page4, .page6 {
  border-bottom-right-radius: .5em;
  border-top-right-radius: .5em;
}
.back2, .page22, .page42, .page62 {
  border-bottom-right-radius: .5em;
  border-top-right-radius: .5em;
}


.page1 { 
  background: #efefef;
}
.page12 { 
  background: #efefef;
}


.page2 {
  background: #efefef;
}
.page22 {
  background: #efefef;
}


.page3 {
  background: #f5f5f5;
}
.page32 {
  background: #f5f5f5;
}


.page4 {
  background: #f5f5f5;
}
.page42 {
  background: #f5f5f5;
}


.page5 {
  background-image: url(images/poetrypage.jpg);
  width: 200px;
  height: 300px;
}
.page52 {
  background-image: url(images/writingdesk.jpg);
  width: 200px;
  height: 300px;
}


.page6 {
  background: #fdfdfd;
}
.page62 {
  background: #fdfdfd;
}


.book:hover .front {
  transform: rotateY(-160deg) scale(1.1);
  box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
}
.book2:hover .front2 {
  transform: rotateY(-160deg) scale(1.1);
  box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
}


.book:hover .page1 {
  transform: rotateY(-150deg) scale(1.1);
  box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
}
.book2:hover .page12 {
  transform: rotateY(-150deg) scale(1.1);
  box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
}


.book:hover .page2 {
  transform: rotateY(-30deg) scale(1.1);
  box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
}
.book2:hover .page22 {
  transform: rotateY(-30deg) scale(1.1);
  box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
}


.book:hover .page3 {
  transform: rotateY(-140deg) scale(1.1);
  box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
}
.book2:hover .page32 {
  transform: rotateY(-140deg) scale(1.1);
  box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
}


.book:hover .page4 {
  transform: rotateY(-40deg) scale(1.1);
  box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
}
.book2:hover .page42 {
  transform: rotateY(-40deg) scale(1.1);
  box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
}


.book:hover .page5 {
  transform: rotateY(-130deg) scale(1.1);
  box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
}
.book2:hover .page52 {
  transform: rotateY(-130deg) scale(1.1);
  box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
}


.book:hover .page6 {
  transform: rotateY(-50deg) scale(1.1);
  box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
}
.book2:hover .page62 {
  transform: rotateY(-50deg) scale(1.1);
  box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
}


.book:hover .back {
  transform: rotateY(-20deg) scale(1.1);
}
.book2:hover .back2 {
  transform: rotateY(-20deg) scale(1.1);
}