:root {
    font-size: .6rem;
    color: orangered;
 	font-family: 'Roboto', sans-serif;
	font-kerning: normal;
	
	
 
}


body {padding:0;
margin:0;
/*
height:200vh;
width: 150vw; 
*/

}


.background {display:grid;
 grid-template-columns: repeat(6,1fr);
    grid-template-rows: repeat(6,1fr);
    grid-gap: 0rem;
    padding: 0rem;
    height: 100vh;
    width:100vw;
    position: fixed;
background-image: url("./images/oelteppich.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}

.foreground {display:grid;
 grid-template-columns: repeat(9,1fr);
    grid-template-rows: repeat(9,1fr);
    grid-gap: 0rem;
    padding: 0rem;
width:200vw;
height:350vh;
cursor:ew-resize;}




#back1 {grid-area: 1/1/3/3;
    background-image: url("./images/hauswand.png");
    background-size:cover;
   
    }


#back2 {grid-area: 3/1/5/3;
    background-image: url("./images/polarnacht.png");

}

#back3 {grid-area: 4/4/7/7;
    background-image: url("./images/fluss.png");
}


#back4 {grid-area: 5/1/7/3;
    background-image: url("./images/flammen.png");
    mix-blend-mode: lighten;
}

#back5 {grid-area: 3/2/6/5;
    background-image: url("./images/landstra%C3%9Fe.png"); 
}



#back6 {grid-area: 1/4/4/7;
    background-image: url("./images/waldwiese.png");
    mix-blend-mode: lighten;
    background-blend-mode:darken
}


#back7 {grid-area:1/2/4/4;
    background-image: url("./images/unterholz.png"); 
}



.back {
    background-size:cover;
    background-position: center;
    z-index: 1;
    background-attachment: fixed;
   
}


.front {background-size:cover;
    background-position: top;
    z-index: 2;
    background-repeat: no-repeat;
}

#Weltall {background-image: url("./images/weltalltransparent.png");
    grid-area: 7/2/9/4;
	background-position: center;
 }

#Weltall:hover{
z-index: 3;
background-image: url("./images/weltall.jpg");
background-size: contain;
z-index: 4;
background-repeat: no-repeat;
}

#Großstadt {background-image: url("./images/gro%C3%9Fstadt.png");
    grid-area: 6/7/8/10;
    mix-blend-mode: lighten;
    
 }
#Großstadt:hover{
z-index: 3;
background-image: url("./images/gro%C3%9Fstadt.jpg");
background-size: contain;
z-index: 4;
background-repeat: no-repeat;
    mix-blend-mode: normal;
}

#Unterwelten {background-image: url("./images/unterwelten.png");
    grid-area: 4/1/7/3;

 }
#Unterwelten:hover{
z-index: 3;
background-image: url("./images/unterwelten.jpg");
background-size: contain;
z-index: 4;
background-repeat: no-repeat;
}

#Flammen {background-image: url("./images/flammen.png");
    grid-area: 1/8/3/10;
 }
#Flammen:hover{
z-index: 3;
background-image: url("./images/flammen.jpg");
background-size: contain;
z-index: 4;
background-repeat: no-repeat;
}

#Ölteppich {background-image: url("./images/oelteppich.png");
    grid-area: 3/5/5/7;
    mix-blend-mode: lighten; 
 }

#Ölteppich:hover{
z-index: 3;
background-image: url("./images/oelteppich.jpg");
background-size: contain;
z-index: 4;
background-repeat: no-repeat;
    mix-blend-mode: normal;
}

#Unterholz {background-image: url("./images/unterholz.png");
    grid-area:6/4/8/6;

 }

#Unterholz:hover{
z-index: 3;
background-image: url("./images/unterholz.jpg");
background-size: contain;
z-index: 4;
background-repeat: no-repeat;
    mix-blend-mode: normal;
}

#Plastikmeer {background-image: url("./images/plastikmeer.png");
    grid-area: 1/4/3/7;
    
 }

#Plastikmeer:hover{
z-index: 3;
background-image: url("./images/plastikmeer.jpg");
background-size: contain;
z-index: 4;
background-repeat: no-repeat;
}

#Polarnacht {background-image: url("./images/polarnacht.png");
    grid-area: 8/5/9/7;
    
 }

#Polarnacht:hover{
z-index: 3;
background-image: url("./images/polarnacht.jpg");
background-size: contain;
z-index: 4;
background-repeat: no-repeat;
}

#Frühling {background-image: url("./images/fruehling.png");
    grid-area: 9/6/10/8;
    
 }

#Frühling:hover{
z-index: 3;
background-image: url("./images/fruehling.jpg");
background-size: contain;
z-index: 4;
background-repeat: no-repeat;
}

#Fluss {background-image: url("./images/fluss.png");
    grid-area: 8/1/10/3;
    
 }

#Fluss:hover{
z-index: 3;
background-image: url("./images/fluss1.png");
background-size: contain;
z-index: 4;
background-repeat: no-repeat;
}

#Wand {background-image: url("./images/hauswand.png");
    grid-area: 5/8/6/9;
    
 }

#Wand:hover{
z-index: 3;
background-image: url("./images/hauswand.jpg");
background-size: contain;
z-index: 4;
background-repeat: no-repeat;
}

#Waldwiese {background-image: url("../images/waldwiese.png");
    grid-area: 3/8/5/10;
    
 }

#Waldwiese:hover{
z-index: 3;
background-image: url("./images/waldwiese.jpg");
background-size: contain;
z-index: 4;
background-repeat: no-repeat;
}

#front13 {background-image: url("./images/spinnennetz.png")
	background-size: cover;
	z-index: 2;
 }

#front14 {background-image: url("./images/aufzug.png");
    grid-area: 8/8/10/10;
	z-index: 2;
    
 }
#front15 {background-image: url("./images/lichtung.png");
    grid-area: 1/2/5/5;
	background-position: center;
	background-size: contain;
	z-index: 2;

 }
#Landstraße {background-image: url("./images/landstra%C3%9Fe.png");
    grid-area: 1/1/3/3;
	background-position: center;
	background-size: cover;
	z-index: 2 }

#Landstraße:hover {background-image: url("./images/landstra%C3%9Fe.jpg");
	background-size: contain;
z-index: 4;
background-repeat: no-repeat;
  
}

#front17 {background-image: url("./images/weltweit.png");
    grid-area: 8/3/10/6;
	background-position: center;
	background-size: contain;
	z-index: 2 
}

#front18 {background-image: url("./images/graben.png");
    grid-area: 2/7/4/9;
	background-position: center;
	background-size: contain;
	z-index: 2 
}

.foregroundBox {
    position:fixed;
    width:100vw;
    height:100vh;
    overflow:scroll;
    z-index:0;
}



#text {
    z-index:auto;
	height: 3vh;
	width:100vw;
	background-color: whitesmoke;	
	position:fixed;
	text-align:center;
	padding-top: 2pt;
}



h2 {
	color: orangered;
	display: inline;
	padding-top: 1pt;
	
	
}
a {	color: orangered;
	vertical-align: top;
	text-decoration: none;
	display: inline;
	font-family: 'Lora', serif;
	font-weight:normal;
	font-size:0.8em;
	background-color: whitesmoke;
 	
	
}


#headline {
	vertical-align: bottom;
	text-decoration: none;
	display: inline;
	font-weight:bold;
	font-size:1.6em;
	margin: 1pt;
	background-color: whitesmoke;
	
}



@keyframes yourAnimation{
    0%{
        height: 350vh;
		
        }
    50%{
        height: 330vh;
		width:210vw
        }
    100%{
        height: 350vh;
		
        }
}

.foreground{
    animation: yourAnimation 4s infinite 0s ease-in-out;
}


 .foregroundBox::-webkit-scrollbar {
    display: none; /* Chrome Safari */
}

footer {position:fixed;
    bottom:0px;
    width:100vw;
    background-color:whitesmoke;
    z-index:3000;
    display:flex;
    justify-content: center;
	height: 3vh;
	padding:1pt ; 
}

#Bildtitel {
    font-size:1.6rem;
    margin:0;
}

@media screen and (min-width:800px){
	
	#text {
    z-index:auto;
	height: 3vh;
	width:100vw;
	background-color: whitesmoke;	
	position:fixed;
	text-align:center;
	padding-top: 2pt;

	
}
	
	
}