:root {
	--step--1: clamp(0.75rem, 0.7503rem + -0.0003vw, 0.7502rem);
	--step-0: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);
	--step-1: clamp(1.333rem, 1.2097rem + 0.6165vw, 1.6875rem);
	--step-2: clamp(1.7769rem, 1.5145rem + 1.3119vw, 2.5313rem);

	--1: oklch(100% 0.006 95);
	--2: oklch(90% 0.006 95);
	--3: oklch(60% 0.006 95);
	--4: oklch(25% 0.006 95);
	--5: oklch(16% 0.006 95);

	--shadow-color: 48deg 8% 20%;
	--shadow-elevation-low: 0px 0.2px 0.2px hsl(var(--shadow-color) / 0.39),
		0px 1px 1.2px -1.9px hsl(var(--shadow-color) / 0.51);
	--shadow-elevation-medium: 0px 0.2px 0.2px hsl(var(--shadow-color) / 0.36),
		0px 1.3px 1.6px -0.9px hsl(var(--shadow-color) / 0.44),
		0.1px 4.8px 5.8px -1.9px hsl(var(--shadow-color) / 0.51);
	--shadow-elevation-high: 0px 0.2px 0.2px hsl(var(--shadow-color) / 0.4),
		0px 2.7px 3.3px -0.5px hsl(var(--shadow-color) / 0.45),
		0.1px 5.9px 7.2px -0.9px hsl(var(--shadow-color) / 0.51),
		0.2px 12.2px 14.8px -1.4px hsl(var(--shadow-color) / 0.56),
		0.3px 23.7px 28.8px -1.9px hsl(var(--shadow-color) / 0.61);

	--shelf: url("images/noise.png"),
		linear-gradient(
			0deg,
			rgba(72, 70, 58, 1) 0%,
			rgba(82, 80, 78, 1) 25%,
			rgba(62, 60, 58, 1) 100%
		);
	--back: url("images/noise.png"),
		linear-gradient(
			0deg,
			rgba(72, 70, 68, 1) 0%,
			rgba(112, 110, 108, 1) 25%,
			rgba(112, 110, 108, 1) 75%,
			rgba(52, 50, 48, 1) 100%
		);
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
}


.bookcase {
	justify-self: center;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
	border: 24px solid var(--2);
	border-bottom: 0px;
	border-left-color: #444444;
	border-left-width: 8px;
	border-left-style: solid;
	border-right-color: #444444;
	border-right-width: 8px;
	border-right-style: solid;
	padding: 0px 0px;
	max-width: 800px;
}

.bookwrap {
	height: clamp(130px, 15vh, 160px);
	width: clamp(88px, 6vw, 130px);
	border-bottom: 24px solid var(--2);
	background-image: var(--back);
	display: flex;
	flex-grow: 1;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	padding: 0px;
	margin: 0px;
	perspective: 500px;
	perspective-origin: left center;
}

.bookwrap::after {
	content: "";
	height: 48px;
	width: 100%;
	background-image: var(--shelf);
}
.bookbigwrap {
	
	border-bottom: 14px solid var(--2);
	background-image: var(--back);
	display: flex;
	flex-grow: 1;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	padding: 0px;
	margin: 0px;
	perspective: 200px;
	perspective-origin: left center;
}

.bookbigwrap::after {
	content: "";
	height: 45px;
	width: 100%;
	background-image: var(--shelf);
}

.book {
	width: 75px;
	min-height: 115px;
	background: var(--5);
	position: relative;
	bottom: -14px;
	margin: 0px;
	transition: all 0.2s ease-in-out;
}

.bookbig {
	width: 138px;
	min-height: 115px;
	padding-left: 10px;
	background: var(--5);
	position: relative;
	bottom: -8px;
	margin: 0px;
	transition: all 0.2s ease-in-out;
}

.book:hover {
	box-shadow: var(--shadow-elevation-high);
	transform: rotateX(0deg) rotateY(-20deg) scale(1.08);
	transform-style: preserve-3d;
}
.bookbig:hover {
	box-shadow: var(--shadow-elevation-high);
	transform: rotateX(0deg) rotateY(-20deg) scale(1.08);
	transform-style: preserve-3d;
}

.book img {
	border: 0px solid var(--5);
}
.bookbig img {
	border: 0px solid var(--5);
}

.book .thumb0 {
width:75px;
height:115px;
}

.book .thumb1{
	width:73px;
	height:115px;
}

.book .thumb2{
	width:74px;
	height:115px;
}

.book .thumb3{
	width:74px;
	height:115px;
}

.book .thumb4{
	width:74px;
	height:115px;

}
.book .thumb5{
	width:76px;
	height:115px;
	padding-right: 5px;
}

.book .thumb6{
	width:72px;
	height:115px;
	padding-right: 5px;
}

.book .thumb7{
	width:74px;
	height:115px;
	padding-right: 5px;
}
.book .thumb8{
	width:76px;
	height:115px;
}
.book .thumb9{
	width:77px;
	height:115px;
}
.bookbig .thumb10{
	width:138px;
	height:115px;
}
.book .thumb11{
	width:77px;
	height:115px;
}
.book .thumb12{
	width:74px;
	height:115px;
}
.book .thumb13{
	width:74px;
	height:115px;
}
.book .thumb14{
	width:74px;
	height:115px;
}
.book .thumb15{
	width:74px;
	height:115px;
}
.book .thumb16{
	width:75px;
	height:115px;
}


.simple-sample:after{
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	height:0;
}

.simple-sample .code{
	width:400px;
	float:left;
}

.simple-sample .sample{
	width:600px;
	line-height:250px;
	float:left;
	text-align:center;
}

.simple-sample .sample a{
	cursor:pointer;
}