html, body {width: 100%;height: 100%;}
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    overflow: hidden;
    background: linear-gradient(315deg, rgba(101,0,94,1) 3%, rgba(60,132,206,1) 38%, rgba(48,238,226,1) 68%, rgba(255,25,25,1) 98%);
    animation: gradient 15s ease infinite;
    background-size: 400% 400%;
    background-attachment: fixed;
}
#page {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	position: relative;
}

@keyframes gradient {
    0% {
        background-position: 0% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
    100% {
        background-position: 0% 0%;
    }
}

.wave {
    background: rgb(255 255 255 / 25%);
    border-radius: 1000% 1000% 0 0;
    position: fixed;
    width: 200%;
    height: 12em;
    animation: wave 10s -3s linear infinite;
    transform: translate3d(0, 0, 0);
    opacity: 0.8;
    bottom: 0;
    left: 0;
    z-index: -1;
}

.wave:nth-of-type(2) {
    bottom: -1.25em;
    animation: wave 18s linear reverse infinite;
    opacity: 0.8;
}

.wave:nth-of-type(3) {
    bottom: -2.5em;
    animation: wave 20s -1s reverse infinite;
    opacity: 0.9;
}

@keyframes wave {
    2% {transform: translateX(0%);}
    25% {transform: translateX(-25%);}
    50% {transform: translateX(-50%);}
    75% {transform: translateX(-25%);}
    100% {transform: translateX(0%);}
}













#book{
	display: flex;
	align-items: center;
	cursor: pointer;
	perspective: 1000px;
	max-width: 620px;
	height: 80%;
	max-height: 870px;
	transform: translate(0, 0);
	transition: all 3s;
	z-index: 2;
}




.cover,
.back-cover{
	height: 100%;
	width: 100%;
	background-image: url("/textures/leder.jpg");
	background-repeat: repeat;
	background-size: contain;
	border-radius: 3px 30px 30px 3px;
	border-width: 10px;
	position: absolute;
	box-shadow: 1px 1px 10px gray;
	transform: rotateX(10deg);
	transform-origin: center left;
	backface-visibility: hidden;
}
.page,
.last-page{
	height: 93%;
	width: 96%;
	background-image: url("/textures/papier.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
	border-radius: 3px 10px 10px 3px;
	transform: rotateX(10deg);
	transform-origin: center left;
	backface-visibility: hidden;
}
.backsite{transform: rotateX(190deg);}
.cover{
	z-index: 6;
	transition: all 3s;
}
.page:nth-child(3){z-index: 5;}
.page:nth-child(4){z-index: 7;}
.page:nth-child(5){z-index: 4;}
.page:nth-child(6){z-index: 8;}
.page:nth-child(7){z-index: 3;}
.page:nth-child(8){z-index: 9;}
.last-page{z-index: 2;}
.back-cover{z-index: 1;}


.page:nth-child(3),
.page:nth-child(4){transition-duration: 3s;}
.page:nth-child(5),
.page:nth-child(6){transition-duration: 2.6s;}
.page:nth-child(7),
.page:nth-child(8){transition-duration: 2.2s;}



.content {
	display: block;
	height: 96%;
	margin: 3% 0 3% 3%;
	padding-right: 3%;
	overflow: auto;
}
.backsite .content {transform: scaleX(-1) scaleY(-1);}





#book.open .cover {transform: rotateX(10deg) rotateY(-180deg);}
#book.open .cover.backsite {transform: rotateX(190deg) rotateY(180deg);}
#book.open .page.switch {transform: rotateX(10deg) rotateY(-180deg);}
#book.open .page.backsite.switch {transform: rotateX(190deg) rotateY(180deg);}
#book.open.p1 .page:nth-child(3) {transition-duration: 6.0s;}
#book.open.p1 .page:nth-child(4) {transition-duration: 6.0s;}
#book.open.p2 .page:nth-child(5) {transition-duration: 7.5s;}
#book.open.p2 .page:nth-child(6) {transition-duration: 7.5s;}
#book.open.p3 .page:nth-child(7) {transition-duration: 9.0s;}
#book.open.p3 .page:nth-child(8) {transition-duration: 9.0s;}

/*
#book:hover{transform: translate(50%, 0);}
#book:hover .cover,
#book:hover .page{transform: rotateX(10deg) rotateY(-180deg);}
#book:hover .backsite{transform: rotateX(190deg) rotateY(180deg);}
#book:hover .page:nth-child(3),
#book:hover .page:nth-child(4){transition-duration: 6.0s;}
#book:hover .page:nth-child(5),
#book:hover .page:nth-child(6){transition-duration: 7.5s;}
#book:hover .page:nth-child(7),
#book:hover .page:nth-child(8){transition-duration: 9.0s;}
*/


.zeiger, .zeiger_b {
	position: absolute;
	display: block;
	width: 40px;
	height: 90px;
	background-color: red;
}
.zeiger {bottom: -90px;}
.zeiger_b {top: -90px;}
.p0 .zeiger {left: 30px;}
.p1 .zeiger {left: 80px;}
.p2 .zeiger {left: 130px;}
.p0 .zeiger_b {left: 30px;}
.p1 .zeiger_b {left: 80px;}
.p2 .zeiger_b {left: 130px;}













.mystic{
    width: 60%;
    height: 0;
    padding-bottom: 60%;
	position: relative;
	margin: 20%;
}
.star,
.circle{
	position: absolute;
}
.star{
	width: 100%;
	height: 100%;
}
.star:nth-child(1){transform: rotate(-120deg);}
.star:nth-child(2){transform: rotate(120deg);}
.part,
.circle{
	box-sizing: border-box;
	border-color: #f00;
	border-style: solid;
	animation: glow 5s 0s linear infinite;
}
.part{
	width: 100%;
	height: 50%;
	border-radius: 2000px 2000px 0 0;
	transform-origin: bottom center;
	transform: translateY(58%) scaleY(50%);
	border-bottom-style: none;
	border-top-width: 20px;
	border-left-width: 10px;
	border-right-width: 10px;
}
.circle{
	width: 60%;
	height: 60%;
	border-radius: 100%;
	border-width: 10px;
	margin: 20%;
}

@keyframes glow {
    0%, 100% {box-shadow: 0 0 70px blue, 0 0 100px red;}
    25% {box-shadow: 0 0 40px blue, 0 0 120px yellow;}
    50% {box-shadow: 0 0 70px blue, 0 0 100px green;}
    75% {box-shadow: 0 0 100px blue, 0 0 120px purple;}
}




#table{
	z-index: 1;
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 70%;
	background-image: url("/textures/holz.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}


.candle{
	margin-top: 10rem;
	width: 9%;
	height: 67%;
	position: absolute;
	bottom: 80%;
	display: grid;
	max-width:160px;
	max-height: 300px;
}

.candle:first-child{left: 5%;}
.candle:last-child{right: 5%;}

.flame,
.thread,
.blue-part,
.glow,
.candle-bottom{
	position: absolute;
	justify-self: center;	
}
.thread::after,
.blue-part::after,
.wax::before{
	content: "";
	display: block;
}
.flame{
	bottom: 104%;
	border-radius: 50% 50% 20% 20%;
	height: 30%;
	z-index: 3;
	background: linear-gradient(white 80%, transparent);
	width: 14.8%;
	box-shadow: 00px -5px 7px 0px orange;
	transform-origin: bottom;
	animation: flame_animation 4s linear infinite, grow_flame 4s linear infinite;
}
.thread{
	width: 4.67%;
	height: 8%;
	margin: 0 auto;
	border-radius: 40% 40% 0 0;
	background: linear-gradient(#ff7800, black 40%);
	bottom: 100%;
	z-index: 2;
}
.thread::after{
	width: 100%;
	height: 30%;
	top: 71%;
	position: absolute;
	background: linear-gradient(0deg, #898989, #000000);
}
.blue-part{
	width: 16%;
	height: 13%;
	background: rgba(0,133,255,0.7);
	z-index: 2;
	bottom: 101%;
	border-radius: 50% 50% 35% 35%;
}
.blue-part::after{
	width:75%;
	border-radius: 50%;
	bacckground: rgb(0 0 0 / 39%);
	position: relative;
	height: 70%;
	margin: 0 auto;
	top: 30%;
}
.wax {
	width: 100%;
	height: 100%;
	z-index: 1;
	position: absolute;
	background: linear-gradient(180deg, #a7a2a2, #212121);
	box-shadow: inset 20px -30px 50px 0 rgba(0, 0, 0, 0.4), inset -20px 0px 50px 0 rgba(0, 0, 0, 0.4);
}

.candle.white .wax{
	background: linear-gradient(180deg, #ffffff, #212121);
}


.wax::before{
	width: 100%;
	height: 10%;
	bottom: 95%;
	position: absolute;
	border-radius: 50%;
	background: radial-gradient(#d1c3ac, #6f6f6f 46%, #817e7c 67%);
}
.candle-bottom{
	top: 96%;
	height: 8%;
	width: 115%;
	border-radius: 50%;
	background: radial-gradient(#121212, #101010);
}
.glow{
	border-radius: 100%;
	width: 66.67%;
	filter: blur(2.25rem);
	background: #ff6000;
	height: 40%;
	bottom: 100%;
	z-index: 2;
	animation: flicker_animation .1s infinite;
}
@keyframes flicker_animation{
	50% {
		opacity: 0.8;
	}
}
@keyframes flame_animation{
	0%,
	100% {
		transform: rotate(-2deg);
	}
	50% {
		transform: rotate(2deg);
	}
}
@keyframes grow_flame{
	0%,
	100% {
		height: 30%;
	}
	50% {
		height: 33%;
	}
}

@media only screen and (min-width: 1000px) {
	#book {width: 45%;}
	#book.open {transform: translate(50%, 0);}
}
@media only screen and (max-width: 999px) {
	#book {width: 85%;}
}