@charset "UTF-8";
/*_____________________________________ */
/*------------------------------- Stuff */

#content h1{
	float: left;
	width: 100%;
	margin-top: 170px;
	border: 0px solid red;
	margin-bottom: 0px;
}
#content h2{
	float: left;
	width: 100%;
	border: 0px solid green;
	margin-top: 0px;
	border-bottom: 1px solid #ccc;
	color:#6d6d6d;
}
#content h2 span{
	font-size: 12px;
}
#content h2 div{
	float: right;
}
#content h2 div b{
	color: #ff6600;
}
#content h2 b{
	color: #ff6600;
}


@media (max-width: 600px) { 

	#content h1{
		margin-top: 230px;
	}

	#content h2{
		font-size: 16px;
	}
}

#content p{
	margin: 0px;
	padding: 0px;
	white-space: pre-line; /* Holly fu css... nice */
	/* text-align: justify; this is ugly... */ 
}

#content a.big{
	font-size: 24px;
}

#content video{
	width: 100%;
	border-radius: 7px;
}



/*_____________________________________ */
/*---------------------------------- ul */
#content ul{
	float: left;
	width: calc(100% - 40px);
	height: auto;
	border: 0px solid red;

	margin: 0px;
	padding: 0px;
	margin-bottom: 70px;
	margin-left: 40px;
	list-style: none;
	list-style-image: url('/data/nplus.svg');
	transition: 0.3s;
}
#content ul li.nope{
	list-style-image: url('/data/nminus.svg');
	color: red;
}
#content ul li.none{
	list-style-image: none;
}

#content ul li div{
	float: right;
}

#content ul.hover li:hover{
	background: rgba(255, 102, 0, 0.2);
}

#content ul.big li{
	font-size: 32px;
	margin-top: 27px;
}

#content ul.big li span{
	font-size: 12px;
	color: #ccc;
}

@media (max-width: 600px) { 

	#content ul{ margin-left: 20px;	}
}
/*_____________________________________ */
/*------------------------------- table */
#content table{
	float: left;
	width: calc(100% - 0px);
	transition: 0.3s;
}

#content table tr{
	float: left;
	width: calc(100% - 40px);
	padding: 15px 20px 15px 20px ;
}
#content table tr td{
	float: left;
	width: calc(50% - 2px);
	border:0px solid #ccc;
}

#content table tr:nth-child(odd){
	background: #eee;
}
body.theme_dark #content table tr:nth-child(odd){
	background: #111;
}

/*_____________________________________ */
/*-------------------------- pre + code */
#content pre{
	float: left;
	width: 100%;
	font-size: 12px;
	color: #ccc;
	margin-top: 40px;
}

/*for highlight js*/
#content pre code{
	
	width: 100%;
	max-height: 320px;
}

/*_____________________________________ */
/*-------------------- n77text & n77img */
#content .n77text{
	float: left;
	width: 100%;
	height: auto;
	border: 0px solid #ccc;
	margin-top: 40px;
}

#content .n77img{
	float: left;
	width: 100%;
	border-radius: 5px;
	transition: 1.7s;
	overflow: hidden;
}

#content .n77img img{
	float: left;
	width: 100%;
	transition: 0.6s;
}

#content .n77img span{
	font-size: 12px;
	color: #666;
}

#content .n77img img:hover{
	transform: scale(1.05);
	filter: brightness(1.2);
}




/*_____________________________________ */
/*---------------------------- n77block */
#content .n77block{
	float: left;
	width: 100%;
	height: auto;
	border: 0px solid #ccc;
	margin-top: 40px;
	margin-bottom: 170px;
}

#content .n77block .space{
	content: 's p a c e';
	float: left;
	width: 20px;
	height: 27px;
	border: 0px solid orange;
}
#content .n77block .block{
	float: left;
	width: calc(50% - 10px);
	height: auto !important;
	border: 0px solid #ccc;
}

@media (max-width: 800px) { /*falls kleiner als */
	
	#content .n77block .block{
		width: calc(100% - 2px);
	}
}




/*_____________________________________ */
/*----------------------------- n77code */
#content .n77code{
	float: left;
	width: 100%;
	height: 40px;
	border: 0px solid #ccc;
	overflow: hidden;
	transition: 1.3s;
	border: 0px solid red;
	cursor: pointer;
	border-radius: 5px;
}

#content .n77code:hover{
	background: rgba(255, 102, 0, 0.2);
}

.hljs-copy,
.hljs-down {
	float: right;
	cursor: pointer;
	background: #333;
	border: 1px solid #ff6600;
	padding: 10px;
	margin-right: 10px;
	color: #fff;
	transition: 0.3s;
}
.hljs-copy:hover,
.hljs-down:hover {
	background: #ff6600;
	color: #000;	
}


/*_____________________________________ */
/*---------------------------- Reg Form */
input,textarea,selection{
	font-size: 16px;
}

#content .n77_form{
	float: left;
	width: 100%;
	height: auto;
	margin-top: 40px;
	margin-bottom: 70px;
	& label{
		float: left;
		width: calc(100% - 2px);
		margin-bottom: 27px;

		font-size: 16px;
		font-weight: bold;
		border: 0px solid red;

		height: 40px;
	};
	& label:has(textarea){
		height: 200px;
		margin-bottom: 52px;
	};

	
	& label b{
		position: absolute;
		left: 1px;
		margin-top: 30px;
		
		line-height: 0px;
		overflow: hidden;	

		font-size: 18px;
		
		padding: 0px;
		z-index: 100;
		width: calc(30% - 32px);
		background: #fff;
		padding-left: 20px;
		color:#777;

		transition: 0.3s;
		transition-timing-function:ease-out;
		
	};

	& label input:focus ~ b,
	& label textarea:focus ~ b,
	& label select:focus ~ b{

		font-size: 12px;
		line-height: 16px;
		margin-top: -12px;
		left: 20px;
		padding: 3px;
		
		border: 1px solid #ff6600;

		background: #fff;
		width: auto;
		opacity: 1;
	};


	& label input,
	& label textarea,
	& label select{
		position: absolute;
		width: calc(100% - 42px);
		padding: 20px;
		z-index: 50;
		font-size: 16px;

		background: rgba(255, 255, 255, 1.0);
		border: 1px solid #ccc;
		outline: none;
	};
	& label input::placeholder {
		opacity: 0.5;
	}

	& label textarea{
		min-height: 200px;
	};
	& label select{
		width: calc(100% - 0px);
		color: #c1c1c1;
	};

	
	& label input:focus,
	& label textarea:focus,
	& label select:focus{

		width: calc(100% - 42px);
		transition: 0.3s;
		left: 0%;
		margin-left: 0%;
		z-index: 70;
		border: 1px solid #ff6600;

	};


	/*for select.. n77_fix */
	& label select:focus{
		
		width: calc(100% - 0px);
	};

	

	/*for input type color.. n77_fix */
	& label input.cfix{
		padding: 0px; 
		height: 60px; 
		width: calc(100% - 0px);
		outline: none;
	};

	& label input.p70{
		width: calc(70% - 47px);
		&:focus{
			width: calc(70% - 47px);
		}
	}

}

#content .n77_form input.p70{
	width: calc(70% - 47px);
	&:focus{
		width: calc(70% - 47px);
	}
}

#content .n77_form input.p30{
	width: calc(30% - 42px);
	margin-left: 70%;
	&:focus{
		width: calc(30% - 42px);
	}
}

#content .n77_form input.p30r{
	width: calc(30% - 47px);
	&:focus{
		width: calc(30% - 47px);
	}
}

#content .n77_form input.p70r{
	width: calc(70% - 42px);
	margin-left: 30%;
	&:focus{
		width: calc(70% - 42px);
	}
}

.btn {
	float: right;
	border-radius: 5px;

	border: none;
	color: #fff;
	text-align: center;
	font-size: 28px;
	padding: 20px;
	width: 50%;
	transition: all 0.5s;
	cursor: pointer;

	background-color: rgba(255, 102, 0, 0.7);
}

.btn span {
	cursor: pointer;
	display: inline-block;
	position: relative;
	transition: 0.5s;
}

.btn span:after {
	content: '\00bb';
	position: absolute;
	opacity: 0;
	top: 0;
	right: -20px;
	transition: 0.5s;
}

.btn:hover {
	background-color: rgba(255, 102, 0, 1.0);
}

.btn:hover span {
	padding-right: 25px;
}

.btn:hover span:after {
	opacity: 1;
	right: 0;
}


/*_____________________________________ */
/*----------------------------- .n77obj */
#content .n77obj{
	float: left;
	width: 100%;
	height: 50px;
	transition: 0.3s;
	margin-bottom: 17px;
	overflow: hidden;
	cursor: pointer;
}

#content .n77obj h2{
	float: left;
	width: calc(100% - 42px);
	padding-left: 42px;
	height: 40px;
	text-transform: none;


	background:url(/data/files_icon_pdf.svg);

	background-position: 0px -5px;
	background-size: auto 100%;
	background-repeat: no-repeat;
}

#content .n77obj object{
	float: left;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: 0.7s;
	filter: blur(10px);

	
}

#content .n77obj.active{
	float: left;
	width: 100%;
	height: 777px;
	border-bottom: 5px solid #ff6600;
}

#content .n77obj.active > object{
	opacity: 1;
	filter: blur(0px);
}



/*_____________________________________ */
/*------------------------------ .n77qr */
#content .n77qr{
	float: left;
	width: 100%;
	height: auto;
	margin-top: 177px;
}
#content .n77qr h3{
	margin: 0px;
	padding: 0px;
	margin-bottom: 10px;
}

#content .n77qr img{
	float: left;
	height: 117px;
	transition: 0.3s;
	margin-right: 10px;
}

body.theme_dark #content .n77qr img{
	filter: invert(100%);
}


/*_____________________________________ */
/*---------------------------- .n77time */
#content .n77time{
	position: fixed;
	bottom: 20px;
	right: 20px;
	font-size: 10px;
}
#content .n77time span{
	color:#ff6600;
}




/*_____________________________________ */
/*------------------------ Custom Stuff */

/* shape LU */
#content img.shapelu{

	float: left;
	shape-outside: url('/data/icon_lu.svg');
	shape-margin: 10px;
	width: 77px;

	margin-right: 50px;

}


/*for rustd rotationg logo > support*/
#content img.rustd{
	transition: 0.3s;

	shape-outside: circle();
	width: 97px;
	margin-right: 50px;
}

#content a:hover > img.rustd{
	animation: rotate 7s linear infinite;
}



/* table me */
#content table.me{

	width: calc(100% - 270px);
}
#content .me{
	width: 270px;
}

@media (max-width: 600px) { 

	#content table.me{
		float: left;
		width: calc(100% - 0px);
	}

	#content .me{
		width: 100%;
	}
}


/*for Joda & Linux > projects*/
#content .n77_joda, #content .n77_linux{
	float: left;
	width: 100%;
	height: auto;	
	overflow: hidden;
	transition: background-image 0.5s ease-in-out;
	/*transition: background-size 0.2s ease-in-out;*/

	transition: 0.3s;
}

#content .n77_joda{
	background:url(/data/nav/62/joda_dark.png);

	background-position: 0px 0px;
	background-size: 100%;
	border-radius: 15px;
	background-repeat: no-repeat;

}
#content .n77_linux{
	background:url(/data/nav/60/mint_desktop.png);

	background-position: 0px 0px;
	background-size: 100%;
	border-radius: 15px;
	background-repeat: no-repeat;
	
}

#content .n77_joda img, #content .n77_linux img{
	float: left;
	width: 100%;
}

#content .n77_joda img{
	opacity: 1.0;
	transition: 1.3s;
}
#content .n77_linux img{

	transform: scale(0.0);
	transform: translateY(100%);
	transition: 0.7s;
}
#content .n77_joda img:hover{
	opacity: 0.0;
}

#content .n77_linux:hover > img{

	transform: scale(1.0);
	transform: translateY(0px);
}


/*for qr visit card > kontakt*/
#content .qr_visit{
	float: left;
	width: 300px;
	height: auto;
	background: #fff;
	border-radius: 15px;
	overflow: hidden;
}
#content .qr_visit img{
	width: 100%;
}



/*_____________________________________ */
/*---------------------------- N77 flex */
#content .n77flex{
	float: left;
	width: 100%;
	display: flex;
	align-items: stretch;
	flex-direction: row;

	background-color: #f1f1f1;
	transition: 0.3s;
	& div {

		background-color: DodgerBlue;
		color: white;
		margin: 0px;
		

		text-align: center;
		line-height: 75px;
		font-size: 30px;

	};
	& div:nth-child(1){

		flex-grow: 5;
		margin-right: 20px;

	};
	& div:nth-child(2){

		flex-grow: 5;
		margin-left: 20px;

	};
}

@media (max-width: 1020px) {
	#content .n77flex {
		flex-direction: column;

		& div:nth-child(1){

			flex-grow: 5;
			margin-right: 0px;

		};
		& div:nth-child(2){

			flex-grow: 5;
			margin-left: 0px;
			margin-top: 177px;

		};
	}
}