* {
	cursor: url(cursor/praying_hands.png), auto;
}

body {
	font-family:serif;
	image-rendering: pixelated;
	overflow-x: hidden;
	margin: 0;
}

figure {
	height: 100%;
	width: 100%;
	position: fixed;
	overflow: hidden;
	background:url("media/background/dkcclouds.png") repeat center;
	background-size: 20vw;
	animation:clouds_anim 12s linear infinite;
	z-index: -10;
	transform: scale(1.2);
}

@keyframes clouds_anim{
	0%{background-position:0 0;}
	100%{background-position:-20vw 0;}
}

/*@keyframes holylight_anim {
	0%{transform: scale(2.4,2);}
	50%{transform: scale(2,2.4)}
	100%{transform: scale(2.4,2)}
}*/

#grid-container {
	display: grid;
	grid-template-rows: 1fr;
}

.grid-item {
	grid-area: 1 / 1;
}

@keyframes holylight_anim {
	0% {transform: rotate(0deg) scale(2);}
	100%{transform: rotate(359deg) scale(2);}
}

/*
@keyframes s_anim{
	0%{top: -10px;} 
	50%{top: 50px;}
	100%{top: -10px;}
}

@keyframes k_anim{
	0%{top: -5px;}
	50%{top: 80px;}
	100%{top: -5px;}
}

@keyframes r_anim{
	0%{top: 5px;}    
	50%{top: 120px;}
	100%{top: 5px;}
}

@keyframes u_anim{
	0%{top: 5px;}
	50%{top: 120px;}
	100%{top: 5px;}
}

@keyframes d_anim{
	0%{top: -5px;}
	50%{top: 80px;}
	100%{top: -5px;}
}

@keyframes g_anim{
	0%{top: -10px;}
	50%{top: 50px;}
	100%{top: -10px;}
}
*/

h1 {font-family: timesbd, serif;
color: #000000;
z-index: 10;}

h1 span span {
	z-index: 10;
	margin-top: calc(10% + 100px);
}

h1 span span:nth-child(1),
h1 span span:nth-child(2),
h1 span span:nth-child(3),
h1 span span:nth-child(4),

h1 span span:nth-child(10),
h1 span span:nth-child(11),
h1 span span:nth-child(12),

h1 span span:nth-child(18),
h1 span span:nth-child(19)

{text-shadow:
	1px 0px 0px #FFFFFF, 0px 1px 0px #666b6c,
	2px 1px 0px #FFFFFF, 1px 2px 0px #666b6c,
	3px 2px 0px #FFFFFF, 2px 3px 0px #666b6c,
	4px 3px 0px #FFFFFF, 3px 4px 0px #666b6c,
	5px 4px 0px #FFFFFF, 4px 5px 0px #666b6c,
	6px 5px 0px #FFFFFF, 5px 6px 0px #666b6c,
	7px 6px 0px #FFFFFF, 6px 7px 0px #666b6c,
	8px 7px 0px #FFFFFF, 7px 8px 0px #666b6c,
	9px 8px 0px #FFFFFF, 8px 9px 0px #666b6c,
	10px 9px 0px #FFFFFF, 9px 10px 0px #666b6c,
	11px 10px 0px #FFFFFF, 10px 11px 0px #666b6c,
	12px 11px 0px #FFFFFF, 11px 12px 0px #666b6c,
	13px 12px 0px #FFFFFF, 12px 13px 0px #666b6c,
	14px 13px 0px #FFFFFF, 13px 14px 0px #666b6c;
	}

h1 span span:nth-child(5),
h1 span span:nth-child(6),
h1 span span:nth-child(7),
h1 span span:nth-child(8),

h1 span span:nth-child(14),
h1 span span:nth-child(15),
h1 span span:nth-child(16),

h1 span span:nth-child(21),
h1 span span:nth-child(22)

{text-shadow:
	-0px 1px 0px #666b6c, -1px 0px 0px #FFFFFF,
	-1px 2px 0px #666b6c, -2px 1px 0px #FFFFFF,
	-2px 3px 0px #666b6c, -3px 2px 0px #FFFFFF,
	-3px 4px 0px #666b6c, -4px 3px 0px #FFFFFF,
	-4px 5px 0px #666b6c, -5px 4px 0px #FFFFFF,
	-5px 6px 0px #666b6c, -6px 5px 0px #FFFFFF,
	-6px 7px 0px #666b6c, -7px 6px 0px #FFFFFF,
	-7px 8px 0px #666b6c, -8px 7px 0px #FFFFFF,
	-8px 9px 0px #666b6c, -9px 8px 0px #FFFFFF,
	-9px 10px 0px #666b6c, -10px 9px 0px #FFFFFF,
	-10px 11px 0px #666b6c, -11px 10px 0px #FFFFFF,
	-11px 12px 0px #666b6c, -12px 11px 0px #FFFFFF,
	-12px 13px 0px #666b6c, -13px 12px 0px #FFFFFF,
	-13px 14px 0px #666b6c, -14px 13px 0px #FFFFFF;
	}
	
h1 span span:nth-child(13),
h1 span span:nth-child(20)

{text-shadow:
	-0px 1px 0px #666b6c, -0px 0px 0px #FFFFFF,
	-0px 2px 0px #666b6c, -0px 1px 0px #FFFFFF,
	-0px 3px 0px #666b6c, -0px 2px 0px #FFFFFF,
	-0px 4px 0px #666b6c, -0px 3px 0px #FFFFFF,
	-0px 5px 0px #666b6c, -0px 4px 0px #FFFFFF,
	-0px 6px 0px #666b6c, -0px 5px 0px #FFFFFF,
	-0px 7px 0px #666b6c, -0px 6px 0px #FFFFFF,
	-0px 8px 0px #666b6c, -0px 7px 0px #FFFFFF,
	-0px 9px 0px #666b6c, -0px 8px 0px #FFFFFF,
	-0px 10px 0px #666b6c, -0px 9px 0px #FFFFFF,
	-0px 11px 0px #666b6c, -0px 10px 0px #FFFFFF,
	-0px 12px 0px #666b6c, -0px 11px 0px #FFFFFF,
	-0px 13px 0px #666b6c, -0px 12px 0px #FFFFFF,
	-0px 14px 0px #666b6c, -0px 13px 0px #FFFFFF;
	}
	
h1 span span:nth-child(1) {font-size: 150px; position: absolute; width: 100%; left:-350px; top:310px; /*animation:s_anim 18s infinite; transition-timing-function:ease-in-out;*/} /* vorher 340*/
h1 span span:nth-child(2) {font-size: 120px; position: absolute; width: 100%; left:-240px; top:360px; /*animation:k_anim 18s infinite; transition-timing-function:ease-in-out;*/} /* vorher 370*/
h1 span span:nth-child(3) {font-size: 100px; position: absolute; width: 100%; left:-150px; top:390px; /*animation:r_anim 18s infinite; transition-timing-function:ease-in-out;*/} /* vorher 410*/
h1 span span:nth-child(4) {font-size: 80px; position: absolute; width: 100%; left:-50px; top:410px; /*animation:u_anim 18s infinite; transition-timing-function:ease-in-out;*/}
h1 span span:nth-child(5) {font-size: 80px; position: absolute; width: 100%; left:50px; top:410px; /*animation:d_anim 18s infinite; transition-timing-function:ease-in-out;*/}
h1 span span:nth-child(6) {font-size: 100px; position: absolute; width: 100%; left:150px; top:390px; /*animation:g_anim 18s infinite; transition-timing-function:ease-in-out;*/}
h1 span span:nth-child(7) {font-size: 120px; position: absolute; width: 100%; left:240px; top:360px; /*animation:g_anim 18s infinite; transition-timing-function:ease-in-out;*/}
h1 span span:nth-child(8) {font-size: 150px; position: absolute; width: 100%; left:350px; top:310px; /*animation:g_anim 18s infinite; transition-timing-function:ease-in-out;*/}

h1 span span:nth-child(10) {font-size: 150px; position: absolute; width: 100%; left:-350px; top:450px; /*animation:g_anim 18s infinite; transition-timing-function:ease-in-out;*/}
h1 span span:nth-child(11) {font-size: 120px; position: absolute; width: 100%; left:-220px; top:470px; /*animation:g_anim 18s infinite; transition-timing-function:ease-in-out;*/}
h1 span span:nth-child(12) {font-size: 100px; position: absolute; width: 100%; left:-100px; top:490px; /*animation:g_anim 18s infinite; transition-timing-function:ease-in-out;*/}
h1 span span:nth-child(13) {font-size: 80px; position: absolute; width: 100%; left:0px; top:500px; /*animation:g_anim 18s infinite; transition-timing-function:ease-in-out;*/}
h1 span span:nth-child(14) {font-size: 100px; position: absolute; width: 100%; left:100px; top:490px; /*animation:g_anim 18s infinite; transition-timing-function:ease-in-out;*/}
h1 span span:nth-child(15) {font-size: 120px; position: absolute; width: 100%; left:220px; top:470px; /*animation:g_anim 18s infinite; transition-timing-function:ease-in-out;*/}
h1 span span:nth-child(16) {font-size: 150px; position: absolute; width: 100%; left:350px; top:450px; /*animation:g_anim 18s infinite; transition-timing-function:ease-in-out;*/}

h1 span span:nth-child(18) {font-size: 150px; position: absolute; width: 100%; left:-350px; top:600px; /*animation:g_anim 18s infinite; transition-timing-function:ease-in-out;*/}
h1 span span:nth-child(19) {font-size: 110px; position: absolute; width: 100%; left:-170px; top:600px; /*animation:g_anim 18s infinite; transition-timing-function:ease-in-out;*/}
h1 span span:nth-child(20) {font-size: 80px; position: absolute; width: 100%; left: 0px; top:600px; /*animation:g_anim 18s infinite; transition-timing-function:ease-in-out;*/}
h1 span span:nth-child(21) {font-size: 110px; position: absolute; width: 100%; left:170px; top:600px; /*animation:g_anim 18s infinite; transition-timing-function:ease-in-out;*/}
h1 span span:nth-child(22) {font-size: 150px; position: absolute; width: 100%; left:350px; top:600px; /*animation:g_anim 18s infinite; transition-timing-function:ease-in-out;*/}

h2 {text-align: center; 
	letter-spacing: 2px;
	font-family: roboto thin;
	color:#FFFFFF;}

h3 {
	color: #FFFFFF;
}

td[colspan="3"] {
	text-align: center;
}

.title {
	width:650px; 
	text-align: center;
	margin-top: 600px;;
	}

.hands {
	width: 100px;
	text-align: center;
	overflow: hidden;
	margin: 170px;
	opacity: 0;
	display: none;
}

.messias {
	position: absolute; 
	width: 800px;
	transform: scale(1); 
	margin-top: calc(10% + 40px);
    left: calc(50% - 400px);
    object-fit: cover;
    height: 500px;
    object-position: 50% 0%;
}

#eightball {
    position: absolute;
    width: 450px;
    left: calc(50% - 225px);
    top: 23%;
}

.holylight {
	position:absolute;
	width: 800px;
	left: calc(50% - 400px); 
	top: 0vh;
	z-index: -9;
	animation: holylight_anim 60s infinite linear;
	overflow:hidden;
}

#holylightcontainer {
	position: relative;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}

.center {margin-left: auto; margin-right:auto;}

.third {margin-left: 330px; margin-right:330px;}

.portrait {background-color:rgba(255,255,255,0.6);}

.portrait_desc {padding-top: 4px; padding-right: 8px; padding-left: 8px; vertical-align:top; text-align: justify; width: 220px;}

.links {width:175px; height:50px; text-align: center; background-color: #fceccf; border-radius:8px;}

.weiterlesen {text-align: right;}

#textbox {
	width: 55%;
	text-align: center;
	border: outset grey 10px;
	position: absolute;
	top: 55vh;
	left: calc(50% - (55% / 2) - 5px);
	background-color: #AAA;
}

#text {
    text-decoration: none;
}

h4 {
	background-image: linear-gradient(to left, #EE82EE, #4B0082, #0000FF, #008000, #FFFF00, #FFA500, #FF0000);
	-webkit-background-clip: text;
	font-size: 30pt;
	color: transparent;
	text-decoration: underline;
	animation: text 1s linear infinite;
	font-family: timesbd, serif;
}

@keyframes text {
	0%		{background-image: linear-gradient(to left, #EE82EE, #4B0082, #0000FF, #008000, #FFFF00, #FFA500, #FF0000);
	}
	14.2%	{background-image: linear-gradient(to left, #4B0082, #0000FF, #008000, #FFFF00, #FFA500, #FF0000, #EE82EE);
	}
	28.5%	{background-image: linear-gradient(to left, #0000FF, #008000, #FFFF00, #FFA500, #FF0000, #EE82EE, #4B0082);
	}
	43%		{background-image: linear-gradient(to left, #008000, #FFFF00, #FFA500, #FF0000, #EE82EE, #4B0082, #0000FF);
	}
	57.5%	{background-image: linear-gradient(to left, #FFFF00, #FFA500, #FF0000, #EE82EE, #4B0082, #0000FF, #008000);
	}
	71%		{background-image: linear-gradient(to left, #FFA500, #FF0000, #EE82EE, #4B0082, #0000FF, #008000, #FFFF00 );
	}
	85.5%	{background-image: linear-gradient(to left, #FF0000, #EE82EE, #4B0082, #0000FF, #008000, #FFFF00, #FFA500);
	}
	100%	{background-image: linear-gradient(to left, #EE82EE, #4B0082, #0000FF, #008000, #FFFF00, #FFA500, #FF0000);
	}
}


#linkzeile {position: relative; bottom: 35px;}

#zeile {background-color:#000000; position:relative; bottom: 25px;}

#fußzeile {background-color: #000000; font-family: roboto regular; font-size: 12px;}



h5 {
	font-size: 60px;
	text-align: center;
	margin-top: 1vw;
	margin-bottom: 0vw;
}

h6 {
	font-size: 40px;
	text-transform: uppercase;
	margin-top: 1vw;
	text-align: center;
	text-decoration: underline;
	color: darkred;
	margin-bottom: 0vw;
	filter: drop-shadow(0 0 0.2vw rgba(255, 215, 0, 0.8));
}

#frame {
	text-align: center;
	margin: 0vw;
}

#frame img {
	width: 40%;
	margin: 0vw;
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	z-index: 6;
}

#thelord {
	text-align: center;
	margin: 6vw;
}

#thelord img {
	width: 28%;
	margin: 5.8vw;
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
}

#holylight_lord {
	top: 43vh;
	transform:scale(3.3);
}

#holylight_cont {
	overflow: hidden;
}

#nametag span {
	font-weight: bold;
}

#cross_right, #cross_left, #light_right, #light_left {
    position: absolute;
    top: 55%;
    width: 300px;
	z-index: 5;
}

#cross_right, #light_right {
	right: 0%;
}

#cross_left, #light_left {
	left: 0%;
}

#light_left, #light_right{
	animation: holylight_anim 60s infinite linear;
}

#footer {
    position: absolute;
    top: 85%;
    margin-left: 3%;
    margin-right: 3%;
    text-align: center;
}

#footer a {
    font-size: 28px;
    color: darkblue;
    text-decoration: underline;
    font-family: sans-serif;
}

#link_clicked {
    color: #681da8;  
    text-decoration: underline;
}

#buttons {
    position: absolute;
    top: 76%;
    margin-left: 10%;
    margin-right: 10%;
}

#buttons img {
    width: 200px;
}
    

@font-face {
	font-family: "timesbd";
	src: url(font/timesbd.ttf);
}

@font-face {
	font-family: "times";
	src: url(font/times.ttf);
}

@font-face {
    font-family: "adolphus";
    src: url(font/adolphus.ttf)
}

@font-face {
    font-family: "upheaval";
    src: url(font/upheaval.ttf)
}

@font-face {
    font-family: "deathcrowregular";
    src: url(font/deathcrowregular.ttf)
}