.banner {
	background-image: url("../images/warning_bg.png");
	background-repeat: repeat;
	background-position: top left;
	background-size: 120px auto;
	background-attachment: scroll;
	color: #f1f1f1;
	border-color: yellow;
}

.banner-title {
	font-weight: 2000;
	color: #ffffff;
	text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.9);
}

.banner-subtitle {
	color: #ffffff;
	text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8), 2px 2px 0.5px rgba(0, 0, 0, 0.9), 2.5px 2.5px 5px rgba(0, 0, 0, 0.8);
}

.panel {
	border: none;
	background: none;
	padding-left: 100px;
	padding-right: 100px;
	text-align: center;
	font-size: 1.2em;
}


.cake img {
	image-rendering: pixelated;
	image-rendering: crisp-edges;
	min-width: 200px;
	max-width: 200px;
	height: auto;
}

.crumbs {
	text-align: center;
	margin-top: 5vh;
	overflow: hidden;
}

.crumbs img {
	image-rendering: pixelated;
	image-rendering: crisp-edges;
	min-width: 100px;
	max-width: 100px;
	height: auto;

	display: inline-block;
	transform: translateY(50%);
}

.text-trail {
	position: relative;
	min-height: 280000px;
	background: linear-gradient(to bottom, 
	#ffffff 0%, 
	#d9d9d9 20%, 
	#111111 50%,
	#3a1c04 60%,
	#ba901f 95%,
	#ffe647 97%,
	#fffef9 100%
	);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.secret-text {
	position: absolute;
	
}

.secret-text img {
	image-rendering: pixelated;
	image-rendering: crisp-edges;
	min-width: 100px;
	max-width: 100px;
	height: auto;
	
}

:root {
	--depth-unit: 10000px;
}

.t1  {	top: calc(var(--depth-unit) * 0.5); 
		left: 10%;}
.t2  {	top: calc(var(--depth-unit) * 1.5); 
		right: 20%;}
.t3  {	top: calc(var(--depth-unit) * 2.2); 
		right: 40%;}
.c1	 {	top: calc(var(--depth-unit) * 2.22); 
		right: 37%;}
.t4  {	top: calc(var(--depth-unit) * 3); 
		left: 26%;}
.t5  {	top: calc(var(--depth-unit) * 4.1); 
		left: 44%;}
.t6  {	top: calc(var(--depth-unit) * 5.3); 
		right: 40%;}
.t7  {	top: calc(var(--depth-unit) * 6.4); 
		right: 55%;}
.t7_1  {	top: calc(var(--depth-unit) * 6.7); 
		right: 66%;}
.t7_2  {	top: calc(var(--depth-unit) * 6.9); 
		right: 77%;}
.t7_3  {	top: calc(var(--depth-unit) * 7.1); 
		right: 69%;}
.t8  {	top: calc(var(--depth-unit) * 7.6); 
		right: 16%;}
.c2	 {	top: calc(var(--depth-unit) * 7.8); 
		left: 20%;}
.c3	 {	top: calc(var(--depth-unit) * 9.6); 
		right: 10%;}
.t9  {	top: calc(var(--depth-unit) * 12); 
		left: 17%;
		color: lightgray;}
.t10  {	top: calc(var(--depth-unit) * 14); 
		right: 30%;
		color: white;}
.t11  {	top: calc(var(--depth-unit) * 15); 
		left: 30%;
		color: white;
		text-shadow: 2px 2px 10px rgba(255, 255, 255, 0.8);}
.t12  {	top: calc(var(--depth-unit) * 16); 
		left: 50%;
		color: lightgrey;
		text-shadow: 3px 3px 8px rgba(255, 255, 230, 0.8);}
.t13  {	top: calc(var(--depth-unit) * 18.8); 
		right: 40%;
		text-shadow: 3px 3px 6px rgba(70, 70, 70, 0.8);}
.t14  {	top: calc(var(--depth-unit) * 19.5); 
		right: 20%;
		text-shadow: 3px 3px 5px rgba(30, 30, 30, 0.8);}
.t15  {	top: calc(var(--depth-unit) * 20.1); 
		right: 30%;
		text-shadow: 4px 4px 4px rgba(10, 10, 10, 0.8);}
.t16  {	top: calc(var(--depth-unit) * 22); 
		left: 50%;}
.t17  {	top: calc(var(--depth-unit) * 23.2); 
		left: 40%;}
.t18  {	top: calc(var(--depth-unit) * 24.5); 
		left: 20%;}
.t19  {	top: calc(var(--depth-unit) * 25); 
		right: 60%;
		text-shadow: 5px 5px 3px rgba(0, 0, 0, 0.8);}
.t20  {	top: calc(var(--depth-unit) * 25.7); 
		right: 30%;
		text-shadow: 6px 6px 2px rgba(100, 0, 0, 0.8);}
.t21  {	top: calc(var(--depth-unit) * 26.1); 
		left: 40%;
		text-shadow: 6.5px 6.5px 2px rgba(50, 0, 0, 0.77);}
.t22  {	top: calc(var(--depth-unit) * 26.3); 
		left: 55%;
		text-shadow: 7px 7px 2px rgba(50, 0, 0, 0.75);}
.t23  {	top: calc(var(--depth-unit) * 26.5); 
		left: 65%;
		text-shadow: 7.5px 7.5px 2px rgba(50, 0, 0, 0.71);}
.t24  {	top: calc(var(--depth-unit) * 27.2); 
		right: 30%;
		text-shadow: 8px 8px 1px rgba(40, 0, 0, 0.71);}
.t25  {	top: calc(var(--depth-unit) * 28.3); 
		right: 40%;
		text-shadow: 9px 9px 1px rgba(25, 0, 0, 0.71);}
.t26  {	top: calc(var(--depth-unit) * 29); 
		right: 50%;
		text-shadow: 10px 10px 1px rgba(7, 0, 0, 0.71);}
.t27  {	top: calc(var(--depth-unit) * 30.01); 
		left: 45%;}
.t28  {	top: calc(var(--depth-unit) * 30.012); 
		right: 5%;}
		
.rickroll {
	top: calc(var(--depth-unit) * 30);
	text-align: center;
	left: 50%;
} 
.rickroll img {
	min-width: 300px;
	height: auto;
} 