@charset "UTF-8";
:root {
	--dark_body_color: #ddd;
	--dark_body_bg: #000;

	--light_body_color: #1d1d1d;
	--light_body_bg: #fff;

}
/*_____________________________________ */
/*-------------------------------- BODY */
body {
	-webkit-animation: fadein 2s;
	animation: fadein 2s;
	transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;

	color: var(--light_body_color);
	background-color: var(--light_body_bg);
	&.theme_dark {
		color: var(--dark_body_color);
		background-color: var(--dark_body_bg);
	};
}




/*_____________________________________ */
/*------------------------------- LINKS */
a:link, a:visited, a:active{
	color:#ff6600;
	font-weight: bold;
	transition: color 0.3s ease;
	display: inline-block;
	position: relative;
}
a:hover{
	color:#ff6600;
}

/* Effect one: Underline - Inside Out */
a::before {
	content: "";
	position: absolute;
	width: 0%;
	height: 2px;
	bottom: -1px;
	left: 50%;
	background-color: #ff6600;
	transition: width 0.3s ease, left 0.3s ease;
}

a:hover::before {
	width: 100%;
	left: 0;
}



/*_____________________________________ */
/*-------------------------- PILATUS_BG */
#pilatus_bg{
	position: fixed;
	bottom: 130px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 0;
	opacity: 0.3;
	border: 0px solid red;


}
#pilatus_bg video{
	position: absolute;

	top: 0px;
	height: 200%;
}
#pilatus_bg div{
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: left bottom;
}
#pilatus_bg .dragon{
	background-image:url(/data/pilatus/layers/dragon.svg);
	background-size: 100% 100%;
	width: 200px;
	height: 200px;
	opacity: 0.1;

	bottom: 7%;
	left: calc(50% - 100px);
}
#pilatus_bg .pilatus{
	background-image:url(/data/pilatus/layers/pilatus.svg);
}
#pilatus_bg .unterberg{
	background-image:url(/data/pilatus/layers/unterberg.svg);
}
#pilatus_bg .luzern{
	background-image:url(/data/pilatus/layers/luzern.svg);
}

#pilatus_bg .lake{
	background-image:url(/data/pilatus/layers/luzern.svg);
	transform: rotate(180deg) scaleX(-1.0);
	bottom: initial;
	top: 100%;
	filter: blur(1px);
	

}

body.theme_dark #pilatus_bg{
	filter: invert(100%);

}

/*_____________________________________ */
/*-------------------------- NAV BUTTON */
body .lines,
body .lines:before, 
body .lines:after {

	background:#333;
	filter: drop-shadow(5px 5px 1px rgba(0, 0, 0, 0.1));
}

body.theme_dark .lines,
body.theme_dark .lines:before,
body.theme_dark .lines:after {

	background:#ccc;
	filter: drop-shadow(5px 5px 1px rgba(0, 0, 0, 0.1));
}

.the_lines.open .lines:before, .the_lines.open .lines:after {

	background:red;
	filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.1));
}













/*_____________________________________ */
/*------------------------------ BOTTOM */

#bottom{
	background-image:url(/data/nsun.svg);
	background-repeat: no-repeat;
	background-size: auto 70%;
	background-position: right top;

	background-color: rgba(230, 230, 230, 0.1);
	border-top:1px solid #ccc;
}


body.theme_dark #bottom{
	background-color: #222;
	border-top:1px solid #333;
}










/*_____________________________________ */
/*-------------------------- Animations */
@keyframes fadein {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes rotate {
	from { transform: rotate(0deg) }
	to   { transform: rotate(360deg) }
}

@keyframes changewidth {
  from {
    width: 100px;
  }

  to {
    width: 300px;
  }
}

.n77_animation_nav {
  animation-duration: 0.1s;
  animation-name: changewidth;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}








#n77_circle{
	position: absolute;
	top: 350px;
	left: calc(10% - 1000px);
	z-index:6;
	height: 3000px;
	width: 3000px;
	border-radius: 1000px;
	background: #ff6600;
	background: rgba(255, 102, 0, 0.2);

	transform: translateX(-77px) rotate(0deg) scaleY(1.0);	

	animation: n77_circle 77s ease infinite;
	opacity: 1.0;
	z-index: 1;
}





#n77_circle_filter {
	position: absolute;
	top: 60px;
	left: calc(10% - 100px);
	z-index:6;
	height: 300px;
	width: 300px;
	border-radius: 1000px;
	background: rgba(255, 102, 0, 0.2);

	transform: translateX(-77px) rotate(0deg) scaleY(1.0);	
	
	animation: n77_circle 27s ease infinite;
	z-index: 15;
	/*backdrop-filter: invert(100%);*/
	opacity: 0.2;
}

/*.n77_circle:hover {
animation: 0;
	-webkit-animation: 0;
	animation: n77_circle 1s ease infinite;
}*/

@keyframes n77_circle {
	0% {
	}
	50% {
		/*border-bottom-left-radius: 300px;
		border-top-right-radius: 0px;*/

		border-top-right-radius: 500px;
		border-top-left-radius: 700px;
		transform: translateX(77px) rotate(90deg) scaleY(1.1);	

		
	}
}

/*
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
*/