/*
jede filmreihe ist ein eigenes Grid mit 87 Spalten (Anzahl der Jahre)
so dass sich die Filme in dieses Grid einfügen können
*/
h1 {
	font-family: sans-serif;
	position: absolute;
	font-weight: bold;
	color: #48D1CC;
   top: 490px;
   font-size: 60px;

   left: 70px;
}




h2 {
	font-family: sans-serif;
	position: absolute;
	font-weight: bold;
	color:  #F08080;
   top: 650px;
   left: 70px;
   font-size: 60px;
}
h3 {
	font-family: sans-serif;
	position: absolute;
	font-weight: bold;
	color:  #e1a100;
	top: 570px;
   font-size: 60px;

   left: 70px;
 
}
h4{ font-family: sans-serif;
	position: absolute;
	letter-spacing: 0.5px;

	-webkit-text-fill-color:transparent;
	-webkit-text-stroke:1.7px black;

	font-weight: bold;
	color:  black;
    font-size: 320%;
    top: 30px;
    left: 390px; }

h5{ font-family: sans-serif;
	position: absolute;
	font-weight: bold;
	color: black;
	font-size: 30px;
	top: 50px;
	left: 880px;


}

nav {
	padding: 50px;
	margin-bottom: 30px;
}

.tag {
	font-weight: bold;
	padding: 5px;
	padding-top: 10px;
	font-family: sans-serif;
	border-bottom: 1px solid;
}

.tag:hover {
	background-color: #48D1CC;
	color: #fff;
	cursor: pointer;
}
.tag1 {	
		padding: 5px;
		padding-top: 10px;
	font-weight: bold;
	
	font-family: sans-serif;
	border-bottom: 1px solid;
}

.tag1:hover {
	background-color:  #F08080;
	color: #fff;
	cursor: pointer;
}
.tag2 {		
	padding: 5px;
	padding-top: 10px;
	font-weight: bold;

	font-family: sans-serif;
	border-bottom: 1px solid;
}

.tag2:hover {
	background-color:  #e1a100;
	color: #fff;
	cursor: pointer;
}

.filmreihe {
	display: grid;
	grid-template-columns: repeat(87, 1fr);
	border-bottom: 1px solid rgb(230, 230, 230);

	
}

/*
ich hätte das gerne anders gelöst, aber Safari und Firefox
haben mich zu dieser Lösung gezwungen...

jeder Film bekommt eine Höhe zugewiesen, und zwar die Höhe
des Fensters 100vh (viewport height, analog zu viewport width)
geteilt durch die Anzahl der Filmreihen, also:

100vh / 30 = 3.33333333vh
*/
.film {
	height: 3.33333333333333vh;
	transition: 0.3s;
}


/*
jedes bild soll die Höhe der ganzen Zeile füllen
also height: 100%;
*/
img {
	height: 100%;
	width: 100% auto;
	transition: 0.3s;
}
#w {
	font-family: sans-serif;
	position: absolute;
	font-weight: bold;
	color:  white;
	top: 160px;
   font-size: 0px;
   writing-mode: vertical-lr;
   text-orientation: upright;

   left: 70px;
 
}
#r {
	font-family: sans-serif;
	position: absolute;
	font-weight: bold;
	color:  white;
	top: 160px;
   font-size: 0px;
   writing-mode: vertical-lr;
   text-orientation: upright;

   left: 485px;
 
}
#p {
	font-family: sans-serif;
	position: absolute;
	font-weight: bold;
	color:  white;
	top: 160px;
   font-size: 0px;
   writing-mode: vertical-lr;
   text-orientation: upright;

   left: 1310px;
 
}
#u {
	font-family: sans-serif;
	position: absolute;
	font-weight: bold;
	color:  white;
	top: 190px;
   font-size: 0px;
   writing-mode: vertical-lr;
   text-orientation: upright;

   left: 125px;
 
}
#n {
	font-family: sans-serif;
	position: absolute;
	font-weight: bold;
	color:  white;
	top: 190px;
   font-size: 0px;
   writing-mode: vertical-lr;
   text-orientation: upright;

   left: 125px;
 
}
#m {
	font-family: sans-serif;
	position: absolute;
	font-weight: bold;
	color:  white;
	top: 190px;
   font-size: 0px;
   writing-mode: vertical-lr;
   text-orientation: upright;

   left: 125px;
 
}
#i {
	font-family: sans-serif;
	position: absolute;
	font-weight: bold;
	color:  white;
	top: 300px;
   font-size: 0px;
   writing-mode: vertical-lr;
   text-orientation: upright;

   left: 125px;
 
}
#k {
	font-family: sans-serif;
	position: absolute;
	font-weight: bold;
	color:  white;
	top: 190px;
   font-size: 0px;
   writing-mode: vertical-lr;
   text-orientation: upright;

   left: 125px;
 
}

/*
:hover => die Maus befindet sich über diesem Element

testhalber färbe ich die ganze Filmreihe ein
*/
.filmreihe:hover {
	background: rgb(230, 230, 230);
}

/*
und wenn sich die Maus über der Filmreihe befindet,
skalieren wir alle Bilder, die sich innerhalb
dieser Filmreihe befinden, auf 300% / scale(3)
*/
.filmreihe:hover img {
	transform: scale(5);
}
 .filmreihe:hover #w {
	font-family: sans-serif;
	position: absolute;
	font-weight: bold;
	color:  black;
	top: 160px;
   font-size: 20px;
   writing-mode: vertical-lr;
   text-orientation: upright;

   left: 85px;
 
}
.filmreihe:hover #r {
	font-family: sans-serif;
	position: absolute;
	font-weight: bold;
	color:  black;
	top: 160px;
   font-size: 20px;
   writing-mode: vertical-lr;
   text-orientation: upright;

   left: 490px;
 
}
.filmreihe:hover #p {
	font-family: sans-serif;
	position: absolute;
	font-weight: bold;
	color:  black;
	top: 160px;
   font-size: 20px;
   writing-mode: vertical-lr;
   text-orientation: upright;

   left: 1300px;
 
}
.filmreihe:hover #u {
	font-family: sans-serif;
	position: absolute;
	font-weight: bold;
	color:  black;
	top: 190px;
   font-size: 20px;
   writing-mode: vertical-lr;
   text-orientation: upright;

   left: 133px;
 
}
.filmreihe:hover #n {
	font-family: sans-serif;
	position: absolute;
	font-weight: bold;
	color:  black;
	top: 190px;
   font-size: 20px;
   writing-mode: vertical-lr;
   text-orientation: upright;

   left: 1197px;
 
}
.filmreihe:hover #m {
	font-family: sans-serif;
	position: absolute;
	font-weight: bold;
	color:  black;
	top: 190px;
   font-size: 20px;
   writing-mode: vertical-lr;
   text-orientation: upright;

   left: 1420px;
 
}
.filmreihe:hover #i {
	font-family: sans-serif;
	position: absolute;
	font-weight: bold;
	color:  black;
	top: 225px;
   font-size: 20px;
   writing-mode: vertical-lr;
   text-orientation: upright;

   left: 158px;
 
}
.filmreihe:hover #k {
	font-family: sans-serif;
	position: absolute;
	font-weight: bold;
	color:  black;
	top: 225px;
   font-size: 20px;
   writing-mode: vertical-lr;
   text-orientation: upright;

   left: 1294px;
 
}

.container{
	padding-right: 15px;
	padding-left: 15px;

	padding-top: 50px;
}
/* tag-navigation
==================================== */


/* elemente
==================================== */



body.show-prinzessin .film,
body.show-maerchen .film,
body.show-zauber .film,
body.show-ozean .film,
body.show-helden .film,
body.show-lovestory .film,
body.show-tiere .film,
body.show-asien .film,
body.show-afrika .film,
body.show-europa .film,
body.show-amerika .film,
body.show-australien .film,
body.show-zeichentrick .film,
body.show-animation .film,
body.show-realverfilmung .film{
visibility: hidden;

}

body.show-prinzessin .prinzessin,
body.show-maerchen .maerchen,
body.show-zauber .zauber,
body.show-ozean .ozean,
body.show-helden .helden,
body.show-lovestory .lovestory,
body.show-tiere .tiere,
body.show-asien .asien,
body.show-afrika .afrika,
body.show-europa .europa,
body.show-amerika .amerika,
body.show-australien .australien,
body.show-zeichentrick .zeichentrick,
body.show-animation .animation,
body.show-realverfilmung .realverfilmung{
visibility: visible;
}

body.show-prinzessin .tag-prinzessin,
body.show-zauber .tag-zauber,
body.show-maerchen .tag-maerchen,
body.show-ozean .tag-ozean,
body.show-helden .tag-helden,
body.show-lovestory .tag-lovestory,
body.show-tiere .tag-tiere{
background: #48D1CC;
}

body.show-asien .tag-asien,
body.show-afrika .tag-afrika,
body.show-europa .tag-europa,
body.show-amerika .tag-amerika,
body.show-australien .tag-australien{
	background:  #F08080;
}
body.show-zeichentrick .tag-zeichentrick,
body.show-animation .tag-animation,
body.show-realverfilmung .tag-realverfilmung{
	background:  #e1a100;
}