html, body {width: 100%;height: 100%;}
body {
    margin: 0;
    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;
}

@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%);}
}































.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: 800px) {
	body {
		overflow: hidden;
		font-family: Brush Script Std;
		font-size: 36px;
	}
	
	#page {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		position: relative;
	}
	
	
	#book {
		display: flex;
		align-items: center;
		cursor: pointer;
		perspective: 1000px;
		width: 85%;
		max-width: 620px;
		height: 80%;
		max-height: 870px;
		transform: translate(0, 0);
		transition: all 3s;
		z-index: 2;
	}
	#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 .cover,
	#book .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;
	}
	#book .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;
	}
	#book .backsite {transform: rotateX(190deg);}
	#book .cover {
		z-index: 6;
		transition: all 3s;
	}
	#book .page:nth-child(3){
		transition-duration: 3s;
		z-index: 5;
	}
	#book .page:nth-child(4){
		transition-duration: 3s;
		z-index: 7;
	}
	#book .page:nth-child(5){
		transition-duration: 2.6s;
		z-index: 4;
	}
	#book .page:nth-child(6){
		transition-duration: 2.6s;
		z-index: 8;
	}
	#book .page:nth-child(7){
		transition-duration: 2.2s;
		z-index: 3;
	}
	#book .page:nth-child(8){
		transition-duration: 2.2s;
		z-index: 9;
	}
	#book .last-page{z-index: 2;}
	#book .back-cover{z-index: 1;}
	
	#book .zeiger,
	#book .zeiger_b {
		position: absolute;
		display: block;
		width: 40px;
		height: 180px;
		background-color: red;
		transition: all 1s
	}

	#book .zeiger {bottom: 0;}
	#book .zeiger_b {top: 0;}
	#book.open .zeiger {bottom: -180px;}
	#book.open .zeiger_b {top: -180px;}
	#book .p0 .zeiger,
	#book .p0 .zeiger_b {left: 30px;}
	#book .p1 .zeiger,
	#book .p1 .zeiger_b {left: 110px;}
	#book .p2 .zeiger,
	#book .p2 .zeiger_b {left: 190px;}
	#book .zeiger span,
	#book .zeiger_b span {
		display: block;
		transform: rotate(90deg);
		position: absolute;
	}
	#book .zeiger span {
		transform-origin: left;
		top: -20px;
		left: 20px;
	}
	#book .zeiger_b span {
		transform-origin: right;
		bottom: -10px;
		right: 20px;
	}
	
	
	

	#book .content {
		display: block;
		height: 96%;
		margin: 3% 0 3% 3%;
		padding-right: 3%;
		overflow: auto;
	}
	#book .backsite .content {
		padding-left: 3%;
		transform: scaleX(-1) scaleY(-1);
	}
	#book .content .border {
		display: none;
		height: 40%;
		border-width: 10px;
		border-color: brown;
		border-style: groove;
	}
	#book .content img {height: 100%;}
	#book .content img.mobile {display: none;}
	#book .content li {
		width: 80%;
		position: relative;
	}
	#book .content li span {
		position: absolute;
		right: -20%;
		top: 1px;
	}







	
	
	
	
}
@media only screen and (min-width: 1000px) {
	#book {width: 45%;}
	#book.open {transform: translate(50%, -5%);}
	#book .content .border {display: inline-block;}
}
@media only screen and (max-width: 799px) {
	.noMobile {display: none;}

	body {
		font-size: 20px;
		font-family: Comic Sans MS, Comic Sans, cursive;
	}
	#book {margin-top: 80%;}
	#book .cover {
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 1;
	}
	#book .page {
		position: relative;
		z-index: 2;
		background-color: rgba(255,255,255,0.8);
		margin: 20px;
		padding: 20px;
	}
	#book .content img.mobile {
		width: 50%;
		max-width: 230px;
		margin-bottom: 10px;
	}
	#book .content img.mobile.left {
		float: left;
		margin-right: 20px;
	}
	#book .content img.mobile.right {
		float: right;
		margin-left: 20px;
	}
	#book .content li {
		width: 80%;
		position: relative;
	}
	#book .content li span {
		position: absolute;
		right: -25%;
		top: 1px;
	}
}