:root {
	--ligcol:#CE0387;
    --mcol:#FFF;
    --hfcol:#06070bFF;
	--hfcoltrans:#06070bFF;
	--hftrt:#0b0606FF;
    --hfcol2:#1c1d21;
	--greenhov:#ff0000;
    --navhov:#FF2929FF;
	--doorhov:#ff199eFF;
	--doorhovbutton:#06070bdd;
    --topnavmoz: -moz-linear-gradient(178deg, var(--hfcol) 0%, var(--hfcol) 52%, var(--hfcol2) 93%);
    --topnavweb: -webkit-linear-gradient(178deg, var(--hfcol) 0%, var(--hfcol) 52%, var(--hfcol2) 93%);
    --topnavgrad: linear-gradient(178deg, var(--hfcol) 0%, var(--hfcol) 52%, var(--hfcol2) 93%);
    --blgrad: linear-gradient(124deg, var(--hfcol) 0%, rgba(0,0,0,0) 36%);
    --wgrad: linear-gradient(124deg, white 0%, rgba(0,0,0,0) 36%);

}
p {
  line-height: 1.5;
  height:auto;
}

html {
    position: relative;
    height: 100%;
}

.sepline {
background: var(--navhov);
height:.1em;
z-index: 3;
transform: skew(-23deg, -.1deg);
}
.lel {
	transform: skew(3deg, 1deg);
}
.scribble2 h1 {
	transform: skew(-2deg, -1deg);
}
.scribble h2 {
	transform: skew(-2deg, -2deg);
}
.scribble h1 {font-family: 'Title', Sans-Serif;}

.iconmenu  img {max-width: 30px;}
.main h1 {
  margin:0;
  font-size: 2rem;
  font-family: 'Title', Sans-Serif;
}
.main h2 {
  margin:0;
  font-size: 1rem;
  font-family: 'Island Roman', Sans-Serif;
  text-align: center;
}
.main h3 {
  margin:0;
  font-size: 2rem;
  font-family: 'Title', Sans-Serif;
}
.main-size {
  padding: 4%;
  border-radius: 1%;
  background: var(--hfcol);
}
.main-size h3 {
  color:#fff;
  margin: -1%;
  font-family: 'Title', Sans-Serif;
}

.fishybg{
	background: var(--hfcol);
	padding: 5% 0 10% 0;
	width:100%;
}

.trtbg{
	background: var(--hfcol);
	padding: 5% 0 10% 0;
	width:100%;

}
.geline img, .wlpline img {
  image-rendering: -webkit-crisp-edges;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  -ms-interpolation-mode: nearest-neighbor;
}
.fishy a {
  position: relative;
  color: #FFF;
  text-decoration: none;  
}

.nothing a, .nothing2 a{
color:inherit;
text-decoration: inherit;
}
.nothing a, .nothing2 a:hover {
color:var(--greenhov);
text-decoration:underline;
}

.nothing, .nothing2 {
	padding: 35% 20% 20% 0;
	background: -moz-linear-gradient(29deg, var(--hfcol) 13%, #9b59b600 90%);
	background: -webkit-linear-gradient(29deg, var(--hfcol) 13%, #9b59b600 90%);  
	background: linear-gradient(29deg, var(--hfcol) 13%, #9b59b600 90%); 
	z-index:-2;
}

.themen{
	background-image: url(image/trt.webp);
	background-attachment: fixed;
	background-position: center; 
	background-repeat:no-repeat;
	background-size:cover;
	z-index:-3;
}
.f {
	position:relative;
	bottom:0px;
    background: var(--hfcol);
    max-width: 100%;
    background-size:cover;
	
}
.f-c {
    max-width: 60%;
    text-align: center;
    color: #fff;
    margin: auto;
}
.f p {
	margin:0;
    padding:20px 0 10px 0; 
}

body {
	margin: 0;
	font-family: Body, Sans-Serif;
	background-color: var(--hfcol);
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: center;
	background-size: cover;  
}


.topnav {background-color: var(--hfcol);}
.row {display: flex;}

.column { 
	margin-left: auto;  
	margin-right: auto;  
	flex: 20%;
	padding: 10px;
}

.main {
	color: var(--mcol);
	text-align: center;
}
.video-container {
	position:relative;
	padding-bottom:56.25%;
	height:0;
	overflow:hidden;
}

.active {
	color: #fff;
	text-decoration: underline;
}


@media only screen and (max-width: 600px) {
.fishy {
	z-index:1;
	font-family: "Island Roman", Serif;
}
.scribble2{
	border: 2px solid var(--navhov);
	background: var(--doorhovbutton);
	border-radius: .4em;
	margin: 0 0 2% 4%;
	padding: 2% 0 2% 4%;
}
.themen{
	background-image: url(image/trts.webp);
	background-position: right;
	background-size: contain;
	z-index:-3;
}
.scribble {
	/* background: var(--doorhovbutton); */
	border-radius: .4em;
	text-shadow: 1px 5px 5px black;
	text-shadow: 0px -2px 5px black;
	text-align: center;
	min-width:25%;
	max-width:75%;
	position: relative;
	font-size: 1.5em;
    font-family: 'Island Roman', Sans-Serif;
	top:50%;
	

	margin: -4% auto 0 auto;
}
.nothing2 {
	padding: 35% 20% 20% 0;

	background: -moz-linear-gradient(3deg, var(--hfcoltrans) 24%, #9b59b600 65%), url(image/splashsmol.webp);
	background: -webkit-linear-gradient(3deg, var(--hfcoltrans) 24%, #9b59b600 65%), url(image/splashsmol.webp);  
	background: linear-gradient(3deg, var(--hfcoltrans) 24%, #9b59b600 65%),url(image/splashsmol.webp); 

	background-repeat: no-repeat;
	background-size: contain;
}
	@media only screen and (-moz-min-device-pixel-ratio: 2), 
       only screen and (-o-min-device-pixel-ratio: 2/1), 
       only screen and (-webkit-min-device-pixel-ratio: 2), 
       only screen and (min-device-pixel-ratio: 2) {
		.nothing2 {
			padding: 35% 20% 20% 0;
	
			background: -moz-linear-gradient(3deg, var(--hfcoltrans) 24%, #9b59b600 65%), url(image/splashbig.webp);
			background: -webkit-linear-gradient(3deg, var(--hfcoltrans) 24%, #9b59b600 65%), url(image/splashbig.webp);  
			background: linear-gradient(3deg, var(--hfcoltrans) 24%, #9b59b600 65%),url(image/splashbig.webp); 
	
			background-repeat: no-repeat;
			background-size: contain;
}
		
	}

video {
display:none;
}
.column {
	flex: 10%;
	padding: 10px;
    
}
.column img {max-width:100%; height:auto;}
.main-size {
  margin: -7%;
  border-radius: 0; 
}
.main-size h1 {
		font-size: 2.2rem;

}
.main h1 {
	font-size: 1.2em;
	max-width: 100%;
}
.content-bg {
    background: var(--hfcol);
    height:auto;
}

.video-container iframe, .video-container object, .video-container embed {
	position:absolute;
	top:1.25%;
	left:1.25%;
	width:97.5%;
    min-height: 97.5%;
	height:auto;
}
	body {
  font-size: 1.2rem;
}
  .topnav #myLinks {
    display: none;
  }
  .topnav img {
    max-height: 1.5cm;
    width: auto;
    position: sticky;
    left: 20%;
  }
  .topnav {
    overflow: hidden;
    background-color: var(--hfcol);
	background: var(--topnavmoz);
	background: var(--topnavweb);
	background: var(--topnavgrad);
    position: relative;
  }
  .topnav a {
    color: #fff;
    padding: 20px 16px 10px 10px;
    text-decoration: none;
    font-size: 1.3rem;
    display: block;
    text-align:center;
  }
  .topnav a.icon {

    display: block;
    position: absolute;
    right: 0;
    top: 0;
  }

}


@media only screen and (min-width: 600px) {
.fishy {
	z-index:1;
	font-family: "Island Roman", Serif;
}

.themen{
	background-image: url(image/trtm.webp);
	background-position: right;
	background-size: cover;
	z-index:-3;
}
.nothing2 {
	background: -moz-linear-gradient(3deg, var(--hfcoltrans) 24%, #9b59b600 65%), url(image/splashbig.webp);
	background: -webkit-linear-gradient(3deg, var(--hfcoltrans) 24%, #9b59b600 65%), url(image/splashbig.webp);  
	background: linear-gradient(3deg, var(--hfcoltrans) 24%, #9b59b600 65%),url(image/splashbig.webp); 
	background-repeat: no-repeat;
	background-size: contain;
}
.scribble{
	/* background: var(--doorhovbutton); */
	border-radius: .4em;
	color:#fff;
	text-shadow: 1px 5px 5px black;
	text-shadow: 0px -2px 5px black;
	text-align: center;
	min-width:25%;
	max-width:75%;
	position: relative;
	font-size: 2rem;
    font-family: 'Island Roman', Sans-Serif;
	top:50%;
	margin: 0 auto;
}
.scribble2{
	border: 2px solid var(--navhov);
	background: var(--doorhovbutton);
	border-radius: .4em;
	color:var(--navhov);
	min-width:14%;
	max-width:35%;
	font-size: 2em;
    font-family: 'Island Roman', Sans-Serif;
	margin: 0 auto;
	z-index:-2;
	
}
video {
display:none;
}
.column {
  flex: 10%;
  padding: 10px;
}
.column img {max-width:78%; height:auto;}
.content-bg {
    background: var(--hfcol);
}

	.video-container iframe, .video-container object, .video-container embed {
	position:absolute;
	top:5%;
	left:5%;
	width:90%;
    min-height: 90%;
    height:auto;
}
	.main-size {
	background: none;

}
	
  .topnav #myLinks {
    display: none;
  }
  .topnav img {
    max-height: 1.5cm;
    width: auto;
    position: sticky;
    left: 22%;
  }
  .topnav {
    overflow: hidden;
	box-shadow: 1px 1px 0px #888;
/*    background-color: var(--hfcol);
	background: var(--topnavmoz);
	background: var(--topnavweb);
	background: var(--topnavgrad);*/
    position: relative;
  }
  .topnav a {
    color: #fff;
    padding: 20px 16px 10px 10px;
    text-decoration: none;
    font-size: 1.2rem;
    display: block;
    text-align: center;
  }
  .topnav a.icon {

    display: block;
    position: absolute;
    right: 0;
    top: 0;
  }

}

@media only screen and (min-width: 768px) {
.nothing2 {
	background: -moz-linear-gradient(3deg, var(--hfcoltrans) 24%, #9b59b600 65%), url(image/splashbig.webp);
	background: -webkit-linear-gradient(3deg, var(--hfcoltrans) 24%, #9b59b600 65%), url(image/splashbig.webp);  
	background: linear-gradient(3deg, var(--hfcoltrans) 24%, #9b59b600 65%),url(image/splashbig.webp); 
	background-repeat: no-repeat;
	background-size: contain;
}
.column img {max-width:80%; height:auto;}

.scribble{
	margin: 0;
	color:#FFF;
	text-align: center;
	min-width:14%;
	max-width:55%;
	position: relative;
	font-size: 2rem;
    font-family: 'Island Roman', Sans-Serif;
	top:50%;
	margin: 0 auto;
	/* left:14%; */
}
.scribble2{
	color:var(--navhov);
	min-width:24%;
	max-width:45%;
	font-size: 2rem;
    font-family: 'Island Roman', Sans-Serif;
	margin-top:auto;
	margin-left:15%;
	z-index:-2;
}
.fishy {
z-index:1;
  font-family: "Island Roman", Serif;
  margin-left: auto;
  margin-right: auto;
  width:60%;
}

.main-size h1 {
	font-size: 3rem;
	
}
.video-container iframe, .video-container object, .video-container embed {
    margin-bottom:5%;
}
  .topnav #myLinks {
    display: none;
  }
  .topnav img {
    max-height: 2cm;
    width: auto;
    position: sticky;
    left: 30%;
  }
  .topnav {
    overflow: hidden;
    position: relative;
  }
  .topnav a {
    color: #fff;
    text-decoration: none;
    padding: 20px 56px 12px 10px;
    font-size: 1.2rem;
    display: block;
    text-align: center;
  }
  .topnav a.icon {

    display: block;
    position: absolute;
    font-size: 1.4rem;
    right: 0;
    top: 0;
  }

}

@media only screen and (min-width: 1200px) {
.trtbg {max-height: 50vh;}
.fishybg {max-height: 80vh;}

.themen{
	background-image: url(image/trt.webp);
	background-position: right;
	background-size: cover;
	z-index:-3;
}
.scribble{
	background: none;
	border-radius: none;
	margin: 0 10%;
}
.nothing2 {
	background: none;
	background-repeat: no-repeat;
	background-size: contain;
}
.nothing2 br {
        display: none;
    }
.main-size h1 {
		font-size: 3rem;
}
.content-bg {
    background: url(image/gl2.webp);
}
.column img {max-width:70%; height:auto;}
.vierdreissig {
	min-height: 100%; 
	padding-bottom: 10%;
	width:40%;
	left: 15%; 
	position: relative;
	font-size: 3rem;
}
.vierdreissig h1{
	font-size: 4rem;
}

.ligma {
	width:15%;
	padding: 2%;
	border-radius: 11%;
	background: var(--ligcol); 
	position: center;
}
.main-size {
	height: 100%;
    max-width: 1200px;
    margin: 0 auto;
    height:100%;
	background: none;


}
video {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index:-1;
  display:flex;
}
body {
	height: 100%;
	background: var(--hfcol);
	font-size:1.1rem;
}
  .topnav #myLinks {
    display: inline;
  }
  .topnav img {
    max-height: 1.2cm;
    width: auto;
    position: relative;
    float: none;
  }
  .topnav a {
    float: left;
    display: block;
    padding: 20px 66px 12px 10px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-size: 1.2rem;
  }
  .topnav a.icon {
    display: none;
  }
}


@media (hover:hover){
/*HOVER*/
.farline a::before {
  content: "Watch MV";
  transform-origin: top left;
}
.farline a::after{
  content: "Seek the Truth";
  transform-origin: bottom right;
}

.fishline a::before {
  content: "Watch MV";
  transform-origin: bottom right;
}
.fishline a::after{
  content: "Catch the Red Herring";
  transform-origin: bottom left;
}

.doorline a::before {
  content: "Watch MV";
  transform-origin: bottom right;
}
.doorline a::after{
  content: "Enter the Doorway";
  transform-origin: bottom left;
}

.geline a::before {
  content: "Watch MV in the Rain";
  transform-origin: bottom left;
}
.geline a::after{
  content: "";
  transform-origin: bottom right;
}

.wlpline a::before {
  content: "Watch MV on the TRain";
  transform-origin: bottom right;
}
.wlpline a::after{
  content: "";
  transform-origin: bottom;
}

.fishy a::after {
  position: absolute;
  width: 100%;
  height: 2rem;
  bottom: 0;
  left: 0;
  transform: scaleX(0);
  transition: transform .2s ease;
}
.fishy a::before {
  position: absolute;
  width: 100%;
  height: 2rem;
  bottom: 0;
  left: 0;
  transform: scaleX(0);
  transition: transform .1s ease;
}



.farline a:hover::before {transform: scaleX(1) skewY(3deg);}
.farline a:hover::after{transform: scaleX(1) skewY(-11deg);}

.fishline a:hover::before {transform: scaleX(1) skewY(2deg);}
.fishline a:hover::after {transform: scaleX(1) skewY(3deg);}

.doorline a:hover::before {transform: scaleX(1) skewY(3deg);}
.doorline a:hover::after {transform: scaleX(1) skewY(1deg);}

.geline a:hover::before {transform: scaleX(1) skewY(1deg);}
.geline a:hover::after {transform: scaleX(1) skewY(-2deg);}

.wlpline a:hover::before {transform: scaleX(1) skewY(-8deg) rotateZ(-2deg);}
.wlpline a:hover::after {transform: scaleX(1) skewY(8deg);}

.farline a:hover::before, .fishline a:hover::before, .geline a:hover::before, .wlpline a:hover::before {color: var(--navhov);}
.doorline a:hover::before {color: var(--doorhov);}
}