@font-face {
	font-family: "Russo One";
	src: url('../font/RussoOne.ttf') format('truetype');
}

* {
	position: relative;
	margin: 0;
	padding: 0;
	text-decoration: none;
	list-style-type: none;
	backface-visibility: hidden;
	user-select: none;
	outline: none;
	border-radius: unset;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	text-shadow: 0px 0px 6px #06b306;
}

a {
	color: inherit;
}

:root {
	--txtColor: #06b306;
	--bgColor: #1b2916;
	--fontSize: 3vw;
	--lineWidth: 3px;
	--hoverColor: #6fb306;
}

::-webkit-scrollbar {
	display: none;
}

html,
body {
	width: 100%;
	height: 100svh;
}

body {
	position: relative;
	font-family: sans-serif;
	font-size: var(--fontSize);
	overflow: hidden;
	background: var(--bgColor);
	color: var(--txtColor);
}

.site-box {
	width: 100%;
	height: 100svh;

	.scrollzone {
		--shadow: 5px;
		width: 98%;
		height: 94%;
		margin: 2% auto;
		box-shadow: 0px 0px var(--shadow) var(--txtColor), 0px 0px var(--shadow) var(--txtColor) inset;
		border: var(--lineWidth) var(--txtColor) solid;
		overflow-y: scroll;
		overflow-x: hidden;

		&::before {
			 content: '';
			 position: fixed;
			 height: 4%;
			 width: calc(98% - var(--lineWidth) * 2);
			 background: linear-gradient(0deg, rgba(27,41,22,0) 0%, rgba(27,41,22,1) 70%);
			 z-index: 2;
		}
	}

	section {

		.lang {
			display: flex;
			display: none;
			flex-direction: row;
			font-family: 'Russo One';
			font-size: .6em;
			margin-bottom: .2em;

			li {
				display: flex;
			}
			li:not(li:last-child):after {
				content: '/';
				font-family: sans-serif;
				margin: 0 .3em;
			}
			li span {
				cursor: pointer;
			}
			li.active span {
				text-decoration: underline;
			}
		}
	}

	.home {
		display: flex;
		height: 100%;
		padding-bottom: 1%;
		flex-direction: column;
		justify-content: space-between;

		.title-line {
			display: flex;
			margin-top: calc(var(--fontSize) / 2);
			overflow: hidden;

			.home-title {
				font-family: "Russo One";
				font-size: 4em;
				padding-right: 1em;
				color: var(--txtColor);
				text-transform: uppercase;
				white-space: nowrap;
				line-height: 1;
				animation: infiniteLine 10s linear infinite;
			}
		}

		.content {
			padding: 0 2vw;

			.text-box {
				width: 50%;

				.text {
					width: 100%;
					font-size: .47em;
				}
			}
		}
	}
	.about {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 100%;
		padding-bottom: 1%;

		.title {
			font-family: "Russo One";
			font-size: 3em;
			text-transform: uppercase;
			text-align: end;
			padding: 0 .3em;

			&::before {
				content:'';
				position: absolute;
				top: 50%;
				left: 0;
				height: var(--lineWidth);
				background: var(--txtColor);
				width: 100%;
				box-shadow: 0px 0px var(--shadow) var(--txtColor), 0px 0px var(--shadow) var(--txtColor) inset;
				translate: 0% -50%;
			}
			&::after {
				 content: 'my skills';
				 position: absolute;
				 bottom: 0;
				 right: 2.7em;
				 font-family: sans-serif;
				 font-weight: 100;
				 font-size: .2em;
				 text-transform: uppercase;
			}

			span.txt {
				padding: 0em .25em;
				background: var(--bgColor);
			}
		}
		.content {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			padding: 0 2vw;

			.text-box {
				width: 50%;

				.text {
					font-size: .47em;
					width: 100%;
				}
			}

			.skilllist {
				width: 50%;

				li {
					font-family: "Russo one";
					font-size: 2em;
					text-align: end;
					text-transform: uppercase;
					line-height: .9;
				}
			}
		}
	}

	.works {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 100%;
		padding-bottom: 1%;

		h2.title {
			font-family: "Russo One";
			font-size: 3em;
			text-transform: uppercase;
			text-align: start;
			padding: 0 .3em;
			margin-bottom: 0.2em;

			&::before {
				 content:'';
				 position: absolute;
				 top: 50%;
				 left: 0;
				 height: var(--lineWidth);
				 background: var(--txtColor);
				 width: 100%;
				 box-shadow: 0px 0px var(--shadow) var(--txtColor), 0px 0px var(--shadow) var(--txtColor) inset;
				 translate: 0% -50%;
			}

			&::after {
				 content: 'my works';
				 position: absolute;
				 bottom: 0;
				 left: 2.7em;
				 font-family: sans-serif;
				 font-weight: 100;
				 font-size: .2em;
				 text-transform: uppercase;
			}

			span.txt {
				padding: 0em .25em;
				background: var(--bgColor);
			}
		}
		.content {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: flex-start;
			gap: 1em;
			width: calc((8.7em * 3) + 2em);
			margin: 0 auto;

			.preview-block {
				width: 8.7em;
				height: 29vh;
				background: #1f351c;
				border: var(--lineWidth) var(--bgColor) solid;

				&::before {
					content: '';
					position: absolute;
					top: 0%;
					left: 50%;
					width: 70%;
					height: calc(var(--lineWidth) * 6);
					translate: -50% -50%;
					background: var(--bgColor);
					opacity: 0;
					z-index: 0;
				}
				&::after {
					content: '';
					position: absolute;
					bottom: 0%;
					left: 50%;
					width: 70%;
					height: calc(var(--lineWidth) * 6);
					translate: -50% 50%;
					background: var(--bgColor);
					opacity: 0;
					z-index: 0;
				}
				.info {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					height: 100%;
					z-index: 2;

					.text {
						display: flex;
						flex-direction: column;
						padding: 0.2em 0.3em;

						.work-title {
							display: inline-block;
							font-size: .7em;
							text-transform: uppercase;

							.word:nth-child(1) {
								font-family: "Russo One";
							}
							.word:nth-child(2) {
								font-family: sans-serif;
								font-weight: lighter;
							}
							/*.bright {*/
							/*	font-family: "Russo One";*/
							/*}*/
							/*.light {*/
							/*	font-family: sans-serif;*/
							/*	font-weight: lighter;*/
							/*}*/
						}
						.list {
							display: none;

							li {
								font-size: .4em;
							}
						}
					}
					.tags-block {
						display: flex;
						align-items: flex-end;
						justify-content: space-between;

						.tags {
							display: flex;
							padding: 0.2em 0.3em;
							flex-wrap: nowrap;
							gap: .1em;

							.tag {
								display: inline-block;
								font-size: .4em;
								text-decoration: underline;
							}
						}
						.arrow {
							--shadow: 3px;
							content: url(../icon/arrow.svg);
							display: inline-block;
							height: 1.5em;
							padding: .2em;
							filter: drop-shadow(0px 0px var(--shadow) var(--txtColor));
						}
					}
				}
				.block-photos {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					padding: 1%;
					overflow: hidden;
					z-index: 1;

					img {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						object-fit: cover;
						transition: transform .5s ease;
					}

					img:nth-child(1) {
						clip-path: polygon(0 0%, 100% 0%, 100% 20%, 0 20%);
						transform: translateX(44%);
					}
					img:nth-child(2) {
						clip-path: polygon(0 20%, 100% 20%, 100% 40%, 0 40%);
						transform: translateX(-20%);
					}
					img:nth-child(3) {
						clip-path: polygon(0 40%, 100% 40%, 100% 60%, 0 60%);
						transform: translateX(40%);
					}
					img:nth-child(4) {
						clip-path: polygon(0 60%, 100% 60%, 100% 80%, 0 80%);
						transform: translateX(-10%);
					}
					img:nth-child(5) {
						clip-path: polygon(0 80%, 100% 80%, 100% 100%, 0 100%);
						transform: translateX(53%);
					}

					&:after {
						content: '';
						position: absolute;
						 top: -1px;
						 left: -1px;
						 width: calc(100% + 2px);
						 height: calc(100% + 2px);
						background: #1f351c;
						clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0 100%);
						transition: clip-path .5s ease;
					}
				}

				&:hover {
					 box-shadow: 0px 0px var(--shadow) var(--txtColor), 0px 0px var(--shadow) var(--txtColor) inset;
					 border: var(--lineWidth) var(--txtColor) solid;
				 }
				&:hover .work-title {opacity: 0;}
				&:hover .tags {opacity: 0;}
				&:hover:after, &:hover:before {opacity: 1;}
				&:hover .block-photos img {transform: translateX(0%);}
				&:hover .block-photos:after {clip-path: polygon(0 0%, 0% 0%, 0% 100%, 0 100%);}
			}
		}
	}
	.contact {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 100%;
		padding-bottom: 1%;

		.title {
			font-family: "Russo One";
			font-size: 3em;
			text-transform: uppercase;
			text-align: end;
			padding: 0 .3em;

			&::before {
				 content:'';
				 position: absolute;
				 top: 50%;
				 left: 0;
				 height: var(--lineWidth);
				 background: var(--txtColor);
				 width: 100%;
				 box-shadow: 0px 0px var(--shadow) var(--txtColor), 0px 0px var(--shadow) var(--txtColor) inset;
				 translate: 0% -50%;
			}

			&::after {
				 content: 'with me';
				 position: absolute;
				 bottom: 0;
				 right: 2.7em;
				 font-family: sans-serif;
				 font-weight: 100;
				 font-size: .2em;
				 text-transform: uppercase;
			}

			span.txt {
				padding: 0em .25em;
				background: var(--bgColor);
			}
		}

		.content {
			display: flex;
			width: 100%;
			padding: 0 1%;

			.contact-form {
				width: 50%;
				padding: 3% 5%;

				form {
					display: flex;
					flex-direction: column;
					align-items: flex-end;
					gap: 1em;
					font-size: .5em;

					label {
						--shadow: 5px;
						position: absolute;
						top: 0;
						left: 1em;
						translate: 0 -50%;
						padding: 0 0.3em;
						font-family: sans-serif;
						font-weight: lighter;
						text-transform: uppercase;
						pointer-events: none;
						background: var(--bgColor);
						box-shadow: 0px 0px var(--shadow) 5px var(--bgColor);
						z-index: 1;
					}
					input, textarea {
						--shadow: 5px;
						font-size: 1em;
						color: var(--txtColor);
						padding: 0.5em;
						background: var(--bgColor);
						box-shadow: 0px 0px var(--shadow) var(--txtColor), 0px 0px var(--shadow) var(--txtColor) inset;
						border: var(--lineWidth) var(--txtColor) solid;

						&:-internal-autofill-selected, &:autofill, &:autofill:hover, &:autofill:focus {
							background-color: var(--txtColor) !important;
							color: var(--bgColor) !important;
						}
						&:focus {
							 /*filter: hue-rotate(-30deg);*/
						}
					}
					textarea {
						height: 9em;
						resize: none;
					}
					.email, .subject, .message {
						display: flex;
						flex-direction: column;
						width: 100%;
					}
					button {
						display: block;
						background: none;
						padding: 0 0.2em;
						border: none;
						font-size: 2em;
						font-family: "Russo one";
						color: var(--txtColor);
						cursor: pointer;
						text-align: end;
						text-transform: uppercase;

						&:hover {
							 color: var(--bgColor);
							 background: var(--txtColor);
						}
					}
				}
			}
			.links {
				display: flex;
				flex-direction: column;
				justify-content: flex-end;
				align-items: flex-end;
				width: 50%;

				.link {
					display: flex;
					flex-direction: row;
					font-family: "Russo one";
					font-size: 2em;
					text-transform: uppercase;
					line-height: .9;
					padding: 0 0.12em;
					color: var(--txtColor);

					&:after {
						 --shadow: 3px;
						 content: url("../icon/arrow.svg");
						 width: .69em;
						 filter: drop-shadow(0px 0px var(--shadow) var(--txtColor));
						 margin-left: 0.1em;
					}
					&:hover {
						 color: var(--bgColor);
						 background: var(--txtColor);
					}
					&:hover:after {
						filter: brightness(0.1) contrast(.794);
					}
				}
			}
		}
	}
}

.menu {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	position: absolute;
	width: 100%;
	translate: 0 -50%;
	z-index: 3;

	.name {
		font-family: "Russo One";
		font-size: 1em;
		color: var(--txtColor);
		padding: .1em .5em;

		&::before {
			 --shadow: 8px;
			 content: '';
			 position: absolute;
			 top: 50%;
			 left: 0;
			 height: 75%;
			 width: 100%;
			 translate: 0 -50%;
			 background: var(--bgColor);
			 box-shadow: 0px 0px var(--shadow) 5px var(--bgColor);
			 border-radius: 52px;
			 z-index: -1;
		}
	}
	.menu-nav {
		display: flex;
		flex-direction: row;
		font-family: sans-serif;
		font-size: 0.7em;
		gap: 2em;
		color: var(--txtColor);
		padding: .1em;

		.links {
			display: flex;
			flex-direction: row;
			align-items: center;
			text-transform: uppercase;
			padding: 0 .5em;
			cursor: pointer;
			/*background: var(--bgColor);*/

			&:hover {color: var(--bgColor)}
			&:after {
				 --shadow: 8px;
				 content: '';
				 position: absolute;
				 left: 50%;
				 translate: -50% 0%;
				 display: inline-block;
				 width: 100%;
				 height: 75%;
				 background: var(--bgColor);
				 box-shadow: 0px 0px var(--shadow) 5px var(--bgColor);
				 border-radius: 52px;
				 z-index: -2;
			}
			&:before {
				 content: '';
				 position: absolute;
				 left: 50%;
				 translate: -50% 0%;
				 display: inline-block;
				 width: 85%;
				 height: 60%;
				 background: var(--bgColor);
				 z-index: -1;
			}
			&:hover:before {
				 background: var(--txtColor);
			}
		}
	}

}

.noise {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	pointer-events: none;
  	opacity: 1;
	z-index: 450;
}

.noise:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url('https://ice-creme.de/images/background-noise.png');
	pointer-events: none;
  	will-change: background-position;
	animation: noise 1s infinite alternate;
}

.lines {
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	pointer-events: none;
	z-index: 300;
	opacity: 0.6;
	will-change: opacity;
	animation: opacity 3s linear infinite;
}

.lines:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	transform: translateY(-100%);
	width: 100%;
	height: 100%;
	background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(255,255,255,0.05) 30%, rgba(255,255,255,0.05) 70%, rgba(0,0,0,0) 100%);
	animation: screenLine 10s linear infinite;
}

.lines:after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, .5) 51%);
	background: repeating-linear-gradient(rgba(0, 0, 0, .5) 0px, rgba(0, 0, 0, .5) 2px, transparent 2px, transparent 4px);
	background-size: 100% 4px;
	will-change: background, background-size;
	/*animation: scanlines 0.2s linear infinite;*/
}

.main {
	position: fixed;
	top: 0;
	left: 0;
	pointer-events: none;
	font-family: 'Press Start 2P', cursive;
	font-size: 2rem;
	width: 100vw;
	height: 100vh;
}

.main .noise:after {
	background-size: 150%;
}

@media (orientation: portrait) {
	:root {
		--fontSize: 8vw;
	}

	.site-box {
		margin-top: 3vh;

		section {
			height: 97% !important;
		}
		.scrollzone {
			height: 96%;
		}

		.home
		.content {
			.text {
				padding-left: unset;
			}
		}

		.home {
			height: 100% !important;
		}

		.about
		.content
		.skilllist {
			display: none;
		}

		.works
		.content {
			flex-direction: column;
			width: 100%;
			padding: 1em 0;
		}

	}
	.menu-nav {
		display: none !important;
	}
	section.works {
		height: unset !important;
		min-height: calc(100vh - var(--fontSize) / 2 - 2vh);
	}
	.title {
		font-size: 2em !important;
	}
	.text-box {
		width: 100% !important;
	}

	.contact {

		.content {
			height: 100%;
			justify-content: space-between;
			flex-direction: column !important;

			.contact-form, .links {
				width: 100% !important;
			}

			.contact-form {
				margin-top: 15svh;
			}

			.links {
				font-size: .8em !important;
			}
		}
	}
	
}

@keyframes noise {
	0%,
	100% {
		background-position: 0 0;
	}
	10% {
		background-position: -5% -10%;
	}
	20% {
		background-position: -15% 5%;
	}
	30% {
		background-position: 7% -25%;
	}
	40% {
		background-position: 20% 25%;
	}
	50% {
		background-position: -25% 10%;
	}
	60% {
		background-position: 15% 5%;
	}
	70% {
		background-position: 0 15%;
	}
	80% {
		background-position: 25% 35%;
	}
	90% {
		background-position: -10% 10%;
	}
}

@keyframes opacity {
	0% {
		opacity: 0.6;
	}
	20% {
		opacity: 0.3;
	}
	35% {
		opacity: 0.5;
	}
	50% {
		opacity: 0.8;
	}
	60% {
		opacity: 0.4;
	}
	80% {
		opacity: 0.7;
	}
	100% {
		opacity: 0.6;
	}
}

@keyframes scanlines {
	from {
		background: repeating-linear-gradient(rgba(0, 0, 0, .5) 0px, rgba(0, 0, 0, .5) 2px, transparent 2px, transparent 4px);
	}
	to {
		background: repeating-linear-gradient( transparent 2px, transparent 4px, rgba(0, 0, 0, .5) 0px, rgba(0, 0, 0, .5) 2px);
	}
}

@keyframes type {
	0%,
	19% {
		opacity: 0;
	}
	20%,
	100% {
		opacity: 1;
	}
}

@keyframes screenLine {
	0% {transform: translateY(-100%)}
	30% {transform: translateY(100%)}
	100% {transform: translateY(300%)}
}

@keyframes blink {
	0% {opacity: 1;}
	1% {opacity: 0;}
	50% {opacity: 0;}
	51% {opacity: 1;}
	99% {opacity: 1;}
	100% {opacity: 0;}
}

@keyframes infiniteLine {
	0% {transform: translateX(0%)}
	100% {transform: translateX(-100%)}
}