@font-face {
	font-family: "dogica";
	src: url("fonts/press-start/prstartk.ttf");
}

body {
	margin: 0;
	padding: 0;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: 'dogica';
	background: linear-gradient(90deg, #c2e9dc 50%, #4a1010 50%);
	font-size: 1em;
	overflow:hidden;
	line-height: 1.6;
}

.content {
	display: flex;
	flex-direction: column;
	justify-content: start;
	align-items: center;
	position: absolute;
	top: 0%;
}

h2 {
	text-align: center;
}

input {
	display: none;
}

img {
	width: 100%;
	height: 100%;
}

.book {
	display: flex;
}

#cover {
	width: 375px;
	height: 480px;
	background-color: #000;
	display: flex;
	color: white;
}

.flip-book {
	width: 375px;
	height: 480px;
	position: relative;
	perspective: 1500px;
	top: 15%;
}

.flip {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	transform-origin: left;
	transform-style: preserve-3d;
	transform: rotateY(0deg);
	transition: .5s;
	color: #000;
}

p {
	font-size: 14px;
	line-height: 24px;
}

.front {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: #fff;
	box-sizing: border-box;
	padding: 0 13px;
	box-shadow: inset 20px 0 50px rgba(0, 0, 0, 0.5) 0 2px 5px rgba(0, 0, 0, .5);
	display: flex;
	align-items: center;
}

.back {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 199;
	transform: rotateY(180deg);
	backface-visibility: hidden;
	background: #000;
	display: flex;
	align-items: center;
	color: white;
	flex-direction: column;
	justify-content: center;
}

.next-btn {
	position: absolute;
	bottom: 13px;
	right: 13px;
	cursor: pointer;
	color: #000;
}

.back-btn {
	position: absolute;
	bottom: 13px;
	right: 13px;
	cursor: pointer;
	color: #fff;
}

#p1 {
	z-index: 80;
}

#p2 {
	z-index: 70;
}

#p3 {
	z-index: 60;
}

#p4 {
	z-index: 50;
}

#p5 {
	z-index: 40;
}

#p6 {
	z-index: 30;
}

#p7 {
	z-index: 20;
}

#p8 {
	z-index: 10;
}

#p9 {
	z-index: 0;
}

#c1:checked~.flip-book #p1 {
	transform: rotateY(-180deg);
	z-index: 10;
}

#c2:checked~.flip-book #p2 {
	transform: rotateY(-180deg);
	z-index: 20;
}

#c3:checked~.flip-book #p3 {
	transform: rotateY(-180deg);
	z-index: 30;
}

#c4:checked~.flip-book #p4 {
	transform: rotateY(-180deg);
	z-index: 40;
}

#c5:checked~.flip-book #p5 {
	transform: rotateY(-180deg);
	z-index: 50;
}

#c6:checked~.flip-book #p6 {
	transform: rotateY(-180deg);
	z-index: 60;
}

#c7:checked~.flip-book #p7 {
	transform: rotateY(-180deg);
	z-index: 70;
}

#c8:checked~.flip-book #p8 {
	transform: rotateY(-180deg);
	z-index: 80;
}

#c9:checked~.flip-book #p9 {
	transform: rotateY(-180deg);
	z-index: 90;
}

#video {
	z-index: 150;
}

#motto {
	background-color: white;
	flex-shrink: 5;
	background: white;
	width: 35%;
	position: relative;
	left: 32.5%;

}

#logo {
	width: 100%;
	height: min-content;
	background: #e6e6e6;
}

#ball {
	width: 100%;
	height: min-content;
}