@font-face {
    font-family: 'Aniron';
    font-style: normal;
    font-weight: normal;
    src: local('Aniron'), url('fonts/anirm___.woff') format('woff');
}

@font-face {
    font-family: 'Aniron Bold';
    font-style: normal;
    font-weight: normal;
    src: url('fonts/anirb___.woff') format('woff');
}

body {
	background-image: url("images/backaar1.png");
	background-size: 1920px 1080px;
	background-repeat: no-repeat;

}


.zentrum {
	background-image: url("images/papyrus5.png");
	width: 900px;
	min-width: 900px;
	height: 100%;
	margin: 0% auto;
	background-size: 100% auto;
	background-repeat: repeat-y;
	overflow-y: scroll;
	overflow-x: visible;
	background-attachment: local;
	scrollbar-width: none;
	display: grid;
	grid-template-rows: 250px 200px 500px 500px 500px 500px 250px 350px 300px;
	grid-template-columns: 10% 40% 40% 10%;
	justify-items: center;
	align-items: center;
	grid-gap: 50px 0px;
	filter: drop-shadow(0px 0px 20px black);
	transition: height 2s;
	grid-row: 2/3;
	grid-column: 1/2;
	position: relative;
	bottom: 80px;
}

form button {
	margin: 0% auto;
	height: 180px;
	margin-top: 300px;
	display:grid;
	grid-template-rows: 150px 100px 150px;
	border: none;
	background: none;
	transition: grid-template-rows 2s, margin-top 2s, height 2s;
		
}

button:focus {
	grid-template-rows: 150px 680px 150px;
	height: 760px;
	margin-top: 0px;
}
button: focus .zentrum {
	height: 760px;
}	

.rolle {
	margin: 0% auto;
	margin-top: 0px;
	display: grid;
	width: 928px;
	min-width: 928px;
	height: 150px;
	grid-template-rows: 150px;
	grid-template-columns: 100%;
	grid-row: 3/4;
	grid-column: 1/2;
	position: relative;
	bottom: 80px;
}


.rolle2 {
	margin: 0% auto;
	display: grid;
	width: 928px;
	min-width: 928px;
	height: 150px;
	grid-template-rows: 150px;
	grid-template-columns: 100%;
	grid-column: 1/2;
	grid-row: 1/2;
}

	

#mitte {
	background-image: url("images/bild17.png");
	background-size: 100% 100%;
	grid-row: 1/2;
	grid-column: 1/2;
	z-index: 2;
	filter: drop-shadow(0px 20px 10px black);
}


#mitte2 {
	background-image: url("images/bild16.png");
	background-size: 100% 100%;
	grid-row: 1/2;
	grid-column: 1/2;
	z-index: 2;
	filter: drop-shadow(0px -20px 10px black);
}

h1 {
	text-align: center;
	grid-row: 1/2;
	grid-column: 2/4;
	font-size: 2.6rem;
	text-shadow: 0px 0px 10px white;
	font-family: "Aniron Bold";
	padding-top: 150px;
}


h2 {
	text-align: center;
	padding-top: 100px;
	font-size: 2.0rem;
	font-family: "Aniron Bold";
	text-shadow: 0px 0px 10px white;
}


p {
	text-align: justify;
	width: 90%;
	display: inline-block;
	font-size: 0.6rem;
	text-shadow: 0px 0px 5px white;
	font-family: "Aniron Bold";
}

.bild {
	width: 90%;
}


#tragr {
	position: fixed;
	top: 260px;
	right: 10%;
}

#eins {
	grid-column: 3/4;
	grid-row: 3/4;
}


#zwei {
	grid-column: 2/3;
	grid-row: 4/5;
	border: 5px double black;
}

#drei {
	grid-column: 3/4;
	grid-row: 5/6;
	width: 45%;
	filter: drop-shadow(0px 5px 4px black);
}

#vier {
	grid-column: 2/3;
	grid-row: 6/7;
}


#fuenf {
	grid-column: 2/4;
	grid-row: 8/9;
	align-self: start;
	width: 95%;
}

#sechs {
	grid-column: 2/4;
	grid-row: 10/11;
	border: 5px double black;
	width: 95%;
}

#sieben {
	grid-column: 2/4;
	grid-row: 12/13;
	border: 5px double black;
	width: 95%;
}

#acht {
	grid-column: 3/4;
	grid-row: 13/14;
	border: 5px double black;
}

#neun {
	grid-column: 2/4;
	grid-row: 14/15;
	border: 5px double black;
	width: 95%;
}

#zehn {
	grid-column: 2/3;
	grid-row: 17/18;
	border: 5px double black;
}

#elf {
	grid-column: 3/4;
	grid-row: 16/17;
	border: 5px double black;
}

#zwoelf {
	grid-column: 3/4;
	grid-row: 18/19;
	border: 5px double black;
}

#vierundzwanzig {
	grid-column: 2/4;
	grid-row: 20/21;
	border: 5px double black;
	width: 95%;
}

#fuenfundzwanzig {
	grid-column: 2/4;
	grid-row: 24/25;
	border: 5px double black;
	width: 95%;
}

#dreizehn {
	grid-column: 2/3;
	grid-row: 21/22;
	border: 5px double black;
}

#vierzehn {
	grid-column: 3/4;
	grid-row: 22/23;
}

#fuenfzehn {
	grid-column: 2/4;
	grid-row: 26/27;
	border: 5px double black;
	width: 95%;
}

#sechzehn {
	grid-column: 3/4;
	grid-row: 27/28;
	border: 5px double black;
}

#siebzehn {
	grid-column: 2/4;
	grid-row: 29/30;
	border: 5px double black;
	width: 95%;
}

#achtzehn {
	grid-column: 2/4;
	grid-row: 31/32;
	border: 5px double black;
	width: 95%;
}

#neunzehn {
	grid-column: 2/3;
	grid-row: 32/33;
	border: 5px double black;
}

#zwanzig {
	grid-column: 2/4;
	grid-row: 34/35;
	border: 5px double black;
	width: 95%;
}

#einundzwanzig {
	grid-column: 3/4;
	grid-row: 35/36;
	border: 5px double black;
}

#zweiundzwanzig {
	grid-column: 2/3;
	grid-row: 36/37;
}

#dreiundzwanzig {
	grid-column: 2/4;
	grid-row: 37/38;
	width: 95%;
}

#schrift1 {
	grid-column:2/4;
	grid-row:2/3;
}

#absatz1 {
	grid-column: 2/3;
	grid-row: 3/4;
}

#absatz2 {
	grid-column: 3/4;
	grid-row: 4/5;
}

#schrift2 {
	grid-column: 2/4;
	grid-row: 15/16;
}

#absatz3 {
	grid-column: 2/3;
	grid-row: 5/6;
}

#absatz4 {
	grid-column: 3/4;
	grid-row: 6/7;
}

#schrift3 {
	grid-column: 2/4;
	grid-row: 23/24;
}

#absatz5 {
	grid-column: 2/4;
	grid-row: 7/8;
	width: 95%;
}

#absatz6 {
	grid-column: 2/4;
	grid-row: 9/10;
	width: 95%;
}

#absatz7 {
	grid-column: 2/4;
	grid-row: 11/12;
	width: 95%;
}

#absatz8 {
	grid-column: 2/3;
	grid-row: 13/14;
}

#absatz9 {
	grid-column: 2/3;
	grid-row: 16/17;
}

#absatz10 {
	grid-column: 3/4;
	grid-row: 17/18;
}

#absatz11 {
	grid-column: 2/3;
	grid-row: 18/19;
}

#absatz12 {
	grid-column: 2/4;
	grid-row: 19/20;
	width: 95%;
}

#absatz13 {
	grid-column: 3/4;
	grid-row: 21/22;
}

#absatz14 {
	grid-column: 2/3;
	grid-row: 22/23;
}

#absatz15 {
	grid-column: 2/4;
	grid-row: 25/26;
	width: 95%;
}

#absatz16 {
	grid-column: 2/3;
	grid-row: 27/28;
}

#absatz17 {
	grid-column: 2/4;
	grid-row: 28/29;
	width: 95%;
}

#absatz18 {
	grid-column: 2/4;
	grid-row: 30/31;
	width: 95%;
}

#absatz19 {
	grid-column: 3/4;
	grid-row: 32/33;
}

#absatz20 {
	grid-column: 2/4;
	grid-row: 33/34;
	width: 95%;
}

#absatz21 {
	grid-column: 2/3;
	grid-row: 35/36;
}

#absatz22 {
	grid-column: 3/4;
	grid-row: 36/37;
}