#head {
	position: absolute;
	height: 150px;
	width: 500px;
	left: 50%;
	transform: translate(-50%);
	top: 50px;
	z-index: 10;
}
#head > * {
	position: relative;
	float: left;
}
#head p {
	width: 100px;
	text-align: center;
	margin: 60px 0px;
	font-size: 18px;
	font-family: sans-serif;
	font-weight: bold;
}
#head a {
	text-decoration: none;
	color: black;
}
#logo {
	width: 100px;
	margin: 13px 100px;
}

.entries {
	position: absolute;
}
.entry {
	position: relative;
	float: left;
	clear: right;
	width: 1000px;
	left: 50%;
	transform: translate(-50%);
	z-index: 1;
	margin-top: 250px;
}

.book { 
	width: 650px;
	float: left;
	margin-right: 50px;
 }
.book > * {
	position: relative;
	width: 300px; 
	z-index: 9;
}
#one, #three {
	float: left;
	margin-right: 50px;
}
#one:hover {
	opacity: 0;
}
#three {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1;
	outline: 1px solid silver;
	outline-offset: -1px;
}
#two, #four {
	float: right;
}
#four:hover {
	opacity: 0;
}
#two {
	position: absolute;
	top: 0px;
	left: 350px;
	z-index: 1;
	outline: 1px solid silver;
	outline-offset: -1px;
}
#scroll {
	position: relative;
	margin: 0;
	height: 0;
	opacity: 0;
}
#scroll p {
	position: absolute;
	font-family: sans-serif;
	color: silver;
	text-align: right;
	margin: 0;
	right: 0;
	bottom: -495px;
	font-size: 14px;
}

 .text  {
 	width: 300px; 
 	float: right;
 	overflow: visible;
 	text-align: justify;
 	font-family: sans-serif;
 }
 .text > * {
 	font-size: 16px;
 	padding: 0;
 	margin: 0;
 	font-weight: normal;
 }
 #info {
 	outline: 1px solid black;
	padding: 10px;
 }
 #info a {
 	cursor: pointer;
 	color: blue;
 	text-decoration: none;
 }
 #info a:hover {
 	text-decoration: underline;
 }

 .entry button {
 	position: absolute;
 	top: 0px;
 	right: 0px;
 	font-size: 16px;
 	background-color: white;
 	outline: 1px solid black;
 	color: black;
 	padding: 10px;
 	cursor: pointer;
 }
 .entry button:hover {
 	background-color: black; 
 	color: white;
 	transition: 0.7s ease;
 }
 .entry #error-message {
 	position: absolute;
 	font-size: 16px;
 	font-family: sans-serif;
 	text-align: justify;
 	text-align-last: center;
 	outline: 1px;
 	padding: 10px;
 	bottom: -50px;
 	left: 50%;
 	transform: translate(-50%);
 }

#foot {
	position: fixed;
	margin-top: 250px;
	clear: left;
	font-family: sans-serif;
	font-size: 14px;
	color: silver;
	text-align: center;
	width: 100%;
	bottom: 0px;
}



/* Device width < 1100*/


@media screen and (max-width: 1050px) {

	body { 
		margin: 0px; 
	}

	#head {
		top: 0;
		height: 250px;
		width: 100vw;
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	#logo {
		margin: 13px 25px;
	}



	.entries {
		width: 100vw;
	}
	.entry {
		width: 300px;
		height: auto;
	}

	.book {
		width: 300px;
		height: 476.47px;
		margin-bottom: 50px;
		display: flex;
		overflow-x: auto;
		margin-right: 0;
	}
	#one, #two, #three, #four {
		flex-shrink: 0;
		position: relative;
		margin-right: 50px;
		z-index: 8;
		left: 0;
	}
	#one:hover, #four:hover {
		opacity: 100;
	}
	#scroll {
		opacity: 100;
	}

	.text button {
		position: relative;
		float: right;
		top: -70px;
	}

}