/* Original Source: https://github.com/RodFireProductions/lil-virtual-bookshelf */



:root {
    --spine-img: url("/textures/book_spine.png");
	--vhs-spine-img: url("/textures/vhs_spine.png");
	--pc-spine-img: url("/textures/pc_spine.png");
	--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) );
	--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 );
    --spine-hue: 0deg;
    --spine-saturation: 100%;
}

@font-face { 
  font-family: 'Kurland'; 
  font-style: normal; 
  src: url(/fonts/Kurland.ttf) format('truetype'); 
} 

.bookshelf {
    width: 100%;
    margin: 0em;
    padding-bottom: 1em;
    display: flex;
    flex-wrap: wrap;
    grid-gap: 1em 0px;
    max-height: 12em;
  	padding-top: 225px;
  	justify-content: center;
}

input[type="radio"] {
        display: none;
        }

.close-btn {
	position: absolute;
	top: 0;
	right: 15px;
	font-size: 32px;
	z-index: 1;
	cursor: pointer;
	color: var(--link-color);
}

.close-btn:hover {
	color: var(--link-state-color);
}

.bookshelf article {
    display: grid;
    grid-template-rows: 280px auto;
    grid-template-columns: 1fr;
    grid-gap: 1em;
    margin-right: 0.25em;
	max-width: 440px;

    & input {
        &:checked {
        }
    }

    & label {
        cursor: pointer;
        align-self: end;
    }

    & .description {
        display: none;
        width: 600px;
        text-align: center;

		font-size: 16px;

		transform: translateX(-130px);
			
        background: var(--card-color);
        border-radius: var(--card-border-radius); 
        border: 1px solid var(--card-border-color);
        padding: 4px;
    }

    & blockquote {
    	text-align: left;
    }
    
	& p {
        text-align: justify;
        margin-top: 0;
        margin-bottom: 0em;
        padding: 6px;
    }
    
    & hgroup {
        & h2 {
			max-width: 40ch;
			margin-left: auto;
			margin-right: auto;
            margin-top: 5px;
            margin-bottom: 0px;
        }
        
        & h3 {
            margin: -8px 0 -8px 0;
			font-size: 25px;
        }

        & p {
            text-align: right;
            margin-top: 0;
            font-style: italic;
            font-size: 14px;
        }
        
    }

    &:has(label input:checked) {
        & .description {
            display: block;
            z-index: 1;
            box-shadow: 4px 4px 5px var(--page-bg-color);
        }

        & label {
            cursor: default;
        }

        & .book {
            z-index: 1;
            /* transform: rotateY(-90deg); */
            /* translateZ(-50px); */
            transform: rotateY(-75deg) rotateX(-2deg) rotateZ(4deg); 
        }

        & .manga {
        	/* transform: rotateY(90deg) translateZ(180px);; */
        	transform: rotateY(75deg) rotateX(-2deg) rotateZ(-4deg) translateZ(280px) translateY(-10px);
        }

        margin-right: -110px;
    }
}

.bookshelf .book {
    width: 50px;
    position: relative;
    display: flex;
    margin-left: 4px;
    transform-style: preserve-3d;
    transform: translateZ(0) rotateY(0);
    transition: transform 1s;
    background: var(--page-bg-color);
}

.bookshelf .side {
    position: absolute;
    border: 2px solid black;
    border-radius: 0px;
    font-weight: bold;
    color: black;
    text-align: center;
    transform-origin: center left;
}

.bookshelf .spine {
    position: absolute;
    top: 0px;
    display: flex;
    justify-content: center;
    width: 48px;
    height: calc(100% - 3px);
    background-image: var(--spine-img);
    background-size: 100% 100%;
    background-position: center;
    filter: hue-rotate(var(--spine-hue)) saturate(var(--spine-saturation));
    transform: rotateY(0deg) translateZ(0px);
}



.bookshelf .spine-title {
    position: relative;
    display: block;

    font-size: 12px;
    color: white;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    filter: brightness(1);
}

.bookshelf .top {
    width: 50px;
    height: 190px;
    /* top: 0px;  /* hmm, why -2 and not 0? */
    background-image: linear-gradient(90deg, white 90%, gray 10%);
    background-size: 5px 5px;
    /* transform: rotateX(90deg) translateZ(95px) translateY(-95px); */
    transform: rotateX(-90deg);
    transform-origin: top;
}

.bookshelf .cover {
    position: relative;
    width: 190px;
    height: auto;
    max-height: 500px;
    max-width: none;
    margin: 0px;
    top: 0px;
    left: 52px;
    transform: rotateY(90deg) translateZ(0);
    transition: transform 1s;
}

.bookshelf .book:hover {
    z-index: 2;
    transform: rotateX(-25deg) rotateY(-40deg) rotateZ(-15deg) translateY(50px) 
    translateX(-30px);
}

.bookshelf .manga:hover {
    z-index: 2;
    /* transform: rotateX(-25deg) rotateY(-40deg) rotateZ(-15deg) translateY(50px) */
    transform: rotateX(-25deg) rotateY(40deg) rotateZ(15deg) translateY(50px) translateX(130px);

}

.vhs {
	--book-x: 50px;
	--book-y: 420px;
	--book-z: 280px;
	width: var(--book-x) !important;
}

.vhs .spine {
	width: var(--book-x) !important;
	background-image: var(--vhs-spine-img);
}

.vhs .spine-title {
	color: black !important;
	font-size: 24px !important;
	font-family: Kurland, cursive;
}

.vhs .cover {
	width: var(--book-z) !important;
	height: var(--book-y);
	left: calc(var(--book-x) + 2px) !important;
}

.vhs .top {
	width: var(--book-x) !important;
	height: var(--book-z) !important;
	background-image: none !important;
	background-color: #1d2632;
}



.comic {
	--book-x: 10px;
	--book-y: 500px;
	--book-z: 325px;
	width: var(--book-x) !important;
}

.comic .spine {
	width: var(--book-x) !important;
	background-color: white;
	background-image: var(--argyle);
}

.comic .spine-title {
	color: black !important;
	font-size: 10px !important;
	font-family: Helvetica, Arial, sans;
}

.comic .spine-number {
	position: absolute;
	bottom: 0px;
	font-size: 8px;
	font-family: Helvetica, Arial, sans;
}

.comic .cover {
	width: var(--book-z) !important;
	height: var(--book-y);
	left: calc(var(--book-x) + 2px) !important;
}

.comic .top {
	width: var(--book-x) !important;
	height: var(--book-z) !important;
}



.pc {
	--book-x: 30px;
	--book-y: 420px;
	--book-z: 280px;
	width: var(--book-x) !important;
}

.pc .spine {
	width: var(--book-x) !important;
	background-image: var(--pc-spine-img);
	background-color: #FFFFFF;
}

.pc .spine-title {
	color: black;
	font-size: 18px;
	font-family: monospace;
}

.pc .spine-number {
	position: absolute;
	bottom: 2px;
	font-size: 16px;
}

.pc .cover {
	width: var(--book-z) !important;
	height: var(--book-y);
	left: calc(var(--book-x) + 2px) !important;
}

.pc .top {
	width: var(--book-x) !important;
	height: var(--book-z) !important;
	background: linear-gradient(90deg, #3d3e3f 45%, #000, #3d3e3f 65%);
	background-position: center;
}



.manga {
	--book-x: 27px;
	--book-y: 420px;
	--book-z: 280px;
	width: var(--book-x) !important;
}

.manga .spine {
	width: var(--book-x) !important;
	background-color: #fefefe;
	background-image: var(--argyle);
	font-family: Albertus Nova Light, serif;
}

.manga .spine-title {
	color: black;
	font-size: 16px;
	left: 1px;
	writing-mode: sideways-lr;
}

.manga .spine-number {
	position: absolute;
	bottom: 0px;
	font-size: 20px;
}

.manga .cover {
	width: var(--book-z) !important;
	height: var(--book-y);
	left: 0px !important;
	transform: rotateY(-90deg) translateX(-100%);
}

.manga .top {
	width: var(--book-x) !important;
	height: var(--book-z) !important;
}

#reset {
	color: var(--link-color);
	border: 2px solid var(--link-color);
	padding: 5px;
}

#reset:hover {
	color: var(--link-state-color);
	border: 2px solid var(--link-state-color);
	cursor: pointer;
}

@media (max-width: 840px) {
	.bookshelf {
		max-height: none;
	}

	.description {
		width: 400px !important;
		transform: translateX(-60px) !important;
	}

	.bookshelf article {
	  &:has(label input:checked) {
		& label {
	      transform: TranslateX(0%)
	    }
	     & .description {
	      margin-left: 2em;
	    }
	  }
	}
}

@media print {
	.close-btn {
		display: none;
	}
	
    .bookshelf {
   		max-height: none;
   		display: grid;
   		justify-content: left;
 		/* padding: 0em; */
   		}
    .bookshelf article{

	  display: flex !important;
	  align-items: flex-end;
	  gap: 60%;
				
   		& .description{
			display: block;
			max-width: 800px !important;
			border: 2px solid grey;
		}

		& label {
		   align-self: start;
		 }
		
   		&:has(label input:checked) {

   		   	        & label {
   		   	            cursor: default;
   		   	        }
   		   	
   		   	        & .book {
   		   	            /* transform: rotateY(-90deg); */
   		   	            /* translateZ(-50px); */
   		   	            transform: rotateX(-25deg) rotateY(-40deg) rotateZ(-15deg) translateY(50px) 
   		   	        }
   		   	
   		   	        & .manga {
   		   	        	/* transform: rotateY(90deg) translateZ(180px);; */
   		   	        	transform: rotateX(-25deg) rotateY(40deg) rotateZ(15deg) translateY(50px) translateX(130px);
   		   	        }
   		   	    }

   		   	    
   	}
   	.bookshelf .book {
   	    z-index: 1;
   	    transform: rotateX(-25deg) rotateY(-40deg) rotateZ(-15deg) translateY(50px) 
   	    translateX(-30px);
   	}
   	
   	.bookshelf .manga {
   	    z-index: 1;
   	    /* transform: rotateX(-25deg) rotateY(-40deg) rotateZ(-15deg) translateY(50px) */
   	    transform: rotateX(-25deg) rotateY(40deg) rotateZ(15deg) translateY(50px) translateX(130px);
   	
   	}

	.description {
        display: block;
        max-width: 800px !important;
        position: relative;
    }

    .hgroup {
    	display: block !important;
    }
   	
}