@import "fonts/bozon/stylesheet.css";
@import "fonts/compass/stylesheet.css";

/*:root {
	--pageInnerPadding: 20px;
}*/


html, body, h1, h2, h3, p, a, ul, li, button {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

ul, li {
	list-style: none;
	text-decoration: none;
	
}

a {
	text-decoration: none;
}

button {
	border-style: none;
	cursor: pointer;
	background: none;
}

html {
	height: 100%;
	-moz-osx-font-smoothing: grayscale;
	 -webkit-font-smoothing: antialiased;
	 font-smoothing: antialiased;		 
}

body {
	height: 100%;
	font-family: Bozon;
	position: relative;
	/*background-color: hsl(20, 70%, 55%);*/
}

.preload {
	-webkit-transition: none !important;
	  -moz-transition: none !important;
	  -ms-transition: none !important;
	  -o-transition: none !important;
	transition: none !important;
}

/* @group Project Preview */

#project-preview {
	
	position: fixed;
	overflow-y: scroll;
	height: 100%;
	inset: 0;
	background-color: hsla(0, 0%, 0%, .5);
	padding: 60px 30px;
	
	z-index: 2;
		
	color: hsl(0, 0%, 10%);	
	
	opacity: 0;
	pointer-events: none;
	transform: translateY(-100%);
	
}

#project-preview.visible {
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
	transition: opacity 0.2s ease-in-out 0s, transform 0s ease-out 0s;
	
}

#project-preview.hidden {
	transform: translateY(-100%);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease-in-out 0s, transform 0s ease-out 0.2s;
	
}

.visible>#project-container {
	transform: translateY(0);
	transition: transform 0.2s ease-out 0s;
}

#project-container {
	
	position: relative;
	transform: translateY(60px);
	transition: transform 0.5s ease-out 0s;
	
	width: 700px;
	height: auto;
	margin: auto;
	background-color: hsl(200, 5%, 98%);
	padding: 30px;
	margin-bottom: 60px;
	border-radius: 50px;
	
	
	display: grid;
	grid-template-columns: 1fr 30px;
	grid-template-rows: auto 405px auto;
	justify-content: center;
	align-content: start;
	align-items: center;
	row-gap: 20px;
		
	box-shadow: 0px 2px 10px hsla(200, 5%, 5%, .5);	
	
}

#project-container header>h1 {
	font-size: 1.5em;
	margin-bottom: 0.5em;
}

#project-container header>p {
	font-size: 1.2em;
	font-weight: 600;
	text-indent: 1em;
	/*margin-bottom: 0;*/
}

#project-container button {
	position: absolute;
	top: -30px;
	right: -30px;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	
}

#project-container button:active {
	background-color: hsla(0, 0%, 0%, .1);
}

#project-container button>svg {
	width: 100%;
	height: 100%;
	pointer-events: none;
	
	
}

#project-container button>svg .cross {
	fill:none;stroke:hsl(0, 0%, 100%);
}

#project-container button>svg .circle {
	fill:hsl(0, 0%, 100%);
}


#video {
	grid-area: 2 / 1 / 3 / 3;
	width: 100%;
	height: 100%;
	position: relative;
	
}

#video iframe {
	width: 100%;
	height: 100%;
	background: url('../images/tubepressure.gif') no-repeat center center;	
}



#details {
	grid-area: 3 / 1 / 4 / 3;
	font-size: 1.2em;
	font-weight: 600;
	line-height: 1.2em;
	margin-bottom: 1em;
	
}

#details>section.link {
	text-align: center;
}

#details>section.credits p {
	margin-bottom: 0.5em;
}

#details>section.info p {
	margin-bottom: 1em;
	line-height: 1.5em;
}

#details a {
	background-color: gold;
	padding: 0.3em 0.6em;
	border-radius: 7px;
	font-family: Compass, Bozon;
	color: hsl(0, 0%, 10%);
	box-shadow: 0px 2px 2px hsla(50, 70%, 40%, 100%);
	
}

#details a:active {
	box-shadow: none;
	
}

/* @end */

#wrapper {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 100px calc(100% - 100px) repeat(3, auto) 50px;
	height: 100%;
	min-height: 700px;
	margin: auto;
	/*overflow-x: hidden;*/
	scroll-behavior: smooth;
}

#wrapper>section {
	position: relative;
	
	scroll-margin-top: 20px;
}

#wrapper h2 {
	font-size: clamp(5em, 9vw, 8em);
	/*font-size: 8em;*/
	font-weight: 800;
	line-height: 0.7em;
}
/* @group Header */

#wrapper>header {
	display: grid;
	grid-template-columns: auto auto;
	justify-content: space-between;
	align-items: center;
	padding: 0 5vw;
}

#wrapper>header>a {
	font-family: Compass, Bozon;
	font-size: 1.7em;
	font-weight: 700;
	color: inherit;
	
	/*background-color: hsl(0, 0%, 10%);
	padding: 6px 25px 6px 10px;
	color: #fff;
	text-shadow: 0 3px 0px hsl(0, 0%, 10%);*/
}

nav {
	font-size: 1.5em;
	font-weight: 500;
}

nav>ul {
	display: grid;
	grid-auto-columns: auto;
	grid-auto-flow: column;
	text-align: center;
	
}

nav>ul>li {
	position: relative;
	padding: 0 40px;
	/*background-color: teal;*/
}

nav>ul>li:last-child {
	padding-right: 0;
}

nav>ul>li::after {
	position: absolute;
	content: "";
	top: 0;
	bottom: 0;
	right: 0;
	width: 2px;
	border-radius: 2px;
	background-color: hsl(0, 0%, 50%);
}

nav>ul>li:last-child::after {
	display: none;
}

nav a {
	color: hsl(0, 0%, 10%);
}


/* @end */



/* @group Banner */

#banner {
	margin-bottom: 100px;
}

#banner-images {
	position: relative;
	margin: auto;
	width: 95%;
	height: 100%;
	
	
}


#banner-images ul {
	position: relative;
	height: 100%;	
}

#banner-images ul>li {
	position: relative;
	height: 100%;
	border-radius: 5vw;
	overflow: hidden;
	z-index: 0;
	
}

#banner-images ul>li:before {
	position: absolute;
	inset: 0;
	content: "";
	border: 5px solid hsl(0, 0%, 10%);
	border-radius: inherit;
	z-index: 1;
}

#banner-images picture{
	position: absolute;
	inset: 0;
	transform: scale(105%);
	transition: transform 1s ease-out;
	overflow: inherit;
	border-radius: inherit;
	background-color: hsl(0, 0%, 10%);
	
	
	
}

#banner-images picture.animate {
	
	transform: scale(100%);
	transition: transform 7s ease-out 0s;
	
}

#banner-images picture>img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}


.image-tag {
	position: absolute;
	background-color: hsl(0, 0%, 10%);
	color: #fff;
	bottom: -1px;
	right: 5vw;
	padding: 10px 20px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	font-weight: 600;
	font-size: 1em;
}

#banner-context {
	position: absolute;
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: auto auto;
	justify-content: center;
	align-content: center;
	inset: 0;
	text-align: center;
	row-gap: 30px;
	color: #fff;
	
	transform: scale(95%);
	transition: transform 1s ease-out;
/*	animation: grow 7s ease-out 0s 1;
	animation-fill-mode: both;*/
}

#banner-context.animate {
	transform: scale(100%);
	transition: transform 7s ease-out 0s;
}

#banner-context h1 {
	font-family: Compass, Bozon;
	font-size: clamp(4.5em, 5.5vw, 7em);
	line-height: 0.9em;
	text-shadow: 0 0 40px hsla(30, 90%, 10%, .5);
}

#banner-context h1>span {
	font-size: 0.7em;
}

#banner-context ul {
	font-size: clamp(1.3em, 1.6vw, 2.1em);
	font-weight: 700;
	
}

#banner-context li {
	position: relative;
	display: inline-block;
	
	padding: 0 15px;
	text-shadow: 0 0 20px hsla(30, 90%, 10%, .5);
	
}

#banner-context li::after {
	position: absolute;
	content: "";
	top: 0;
	bottom: 0;
	right: -4px;
	width: 2px;
	border-radius: 2px;
	background-color: #fff;
}

#banner-context li:last-child::after {
	display: none;
}

/* @end */

/* @group About */

#about {
	display: grid;
	grid-template-columns: clamp(2.4em, 4vw, 4em) clamp(200px, 20vw, 250px) minmax(400px, 700px);
	justify-content: center;
	margin: 0 60px 100px 60px;
}

#about h2 {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	margin-top: -10px;
}


#about aside {
	z-index: 1;
	margin-top: 20px;
	position: relative;
	
}

#profile-image {
	position: relative;
	border: 7px solid hsl(0, 0%, 10%);
	background-color: hsl(0, 0%, 10%);
	box-sizing: border-box;
	border-radius: 50%;
	overflow: hidden;
}

#about aside picture {
	display: block;
	width: 100%;
	height: auto;
	
}

#about aside picture>img {
	display: block;
	position: relative;
	width: 100%;
	height: auto;
	/*border-radius: inherit;*/
	
}

#glitch {
	position: absolute;
	inset: 0;
	background: url('../images/glitch.png') no-repeat left top;
	background-size: cover;
	background-position-x: -25%;
	/*opacity: 0;*/
}

#about aside ul {
	text-align: center;
	display: grid;
	grid-auto-columns: 50px;
	grid-template-rows: 50px;
	grid-auto-flow: column;
	justify-content: center;
	align-items: center;
	grid-gap: 10px;
	
	margin-top: 20px;
}

#about aside ul>li {
	position: relative;
	height: 100%;
}

#about aside ul>li>a {
	position: absolute;
	padding: 18%;
	inset: 0;
}

#about a>img {
	height: 100%;
	/*background-color: orange;*/
}


#about article {
	margin-left: 10%;
	font-size: clamp(1.1em, 1.5vw, 1.5em);
	font-weight: 500;
	line-height: 1.6em;
}

#about article p {
	margin-bottom: 1.5em;
	transition: opacity 0.2s ease-out, transform 0.4s ease-out;
	position: relative;
}

#about article p:first-child {
	font-weight: 600;
}

#about article p.observe {
	opacity: 0;
	transform: translateX(50px);

}

#about article p>span{
	font-weight: 700;
	
}

#contact {
	display: inline;
	width: auto;
	height: clamp(1.3em, 1.8vw, 1.3em);
	bottom: -0.3em;
	left: 2px;
	position: relative;
}

#about .paranthesis {
	font-weight: 500;
}

/* @end */

/* @group Works */

#works {
	display: grid;
	grid-template-rows: clamp(1.8em, 5vw, 4.5em) repeat(3, auto);
	margin-bottom: -50px;
}

#works header {
	text-align: right;
	padding-right: 80px;
	
}

#works header h2 {
	max-width: 1440px;
	margin: auto;
}

#works>.row {
	overflow-x: hidden;
	padding-bottom: 50px;
}

#works>.row:nth-child(4) {
	transform: translateY(-50px);
}

#works>.row:nth-child(5) {
	transform: translateY(-100px);
}


#works ul {
	/*background-color: crimson;*/
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: clamp(200px, 21vw, 400px);
	grid-template-rows: clamp(200px, 21vw, 400px);
	column-gap: 5vw;
	justify-content: center;
	margin: 0;
	
}

#works ul>li {
	background-color: hsl(0, 0%, 20%);
	border-radius: 50%;
	border: 6px solid hsl(0, 0%, 20%);
	box-sizing: border-box;
	overflow: hidden;
	position: relative;
	transition: opacity 0.4s ease-in-out, transform 0.4s ease-out;
}

#works ul>li.observe {
	opacity: 0;
	transform: translateY(50px);
}

#works li>img {
	position: absolute;
	border-radius: inherit;
	inset: 0;
	width: 100%;
	height: auto;
	pointer-events: none;
	
}


#works li>button, #works li>a {
	position: relative;
	border-radius: inherit;
	height: 100%;
	width: 100%;
	margin: auto;
	display: none;
	/*background-color: green;*/
	
	
}

#works li>button:active {
	background-color: hsla(0, 0%, 100%, .2);
}





/* @end */

/* @group Lab */

#lab {
	margin-top: 1.5em;
	margin-bottom: 100px;
	text-align: center;
}

#lab>header {
	position: relative;
	display: inline-block;
	margin: auto;
	
}

#lab>header>h2 {
	text-align: left;
}

#lab>header>p {
	position: relative;
	text-align: left;
	top: -5px;
	background-color: #fff;
	margin-left: 130px;
	margin-right: 5px;
	margin-bottom: 10px;
	padding-left: 5px;
	font-weight: 500;
	font-size: clamp(1.1em, 1.5vw, 1.5em);
	width: clamp(500px, 50vw, 700px);
	line-height: 1.4em;
	transition: opacity 0.2s ease-out, transform 0.4s ease-out;
}

#lab>header>p>b {
	white-space: nowrap;
}

#lab>header>p.observe {
	opacity: 0;
	transform: translateX(-50px);
}

#lab-projects {
	margin: 20px auto;
}

#lab-projects>ul {
	display: grid;
	grid-auto-flow: row;
	grid-template-columns: repeat(3, auto);
	grid-auto-columns: auto;
	grid-auto-rows: auto;
	justify-content: center;
	justify-items: center;
	column-gap: clamp(60px, 7%, 120px);
	row-gap: 60px;
	margin: 0 40px;
	
}

#lab-projects>ul>li {
	display: grid;
	grid-template-rows: clamp(200px, 21vw, 360px) auto auto;
	grid-template-columns: clamp(200px, 21vw, 360px);
	color: hsl(0, 0%, 10%);
	
	position: relative;
	transition: opacity 0.4s ease-in-out, transform 0.4s ease-out;

}

#lab-projects>ul>li.observe {
	opacity: 0;
	transform: translateY(50px);
}

#lab-projects>ul>li picture {
	/*pointer-events: none;*/
}

#lab-projects li>button, #lab-projects li>a {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: 22%;
	display: none;
}


#lab-projects h1{
	font-weight: 800;
	font-size: 1.5em;
	margin-top: 15px;
	margin-bottom: 5px;
}

#lab-projects p {
	font-weight: 600;
	font-size: clamp(0.7em, 1.4vw, 1.2em);
	line-height: 1.2em;
}

#lab-projects picture {
	grid-area: 1 / 1 / 2 / 2;
	border-radius: 30%;
	overflow: hidden;
	border: 5px solid hsl(0, 0%, 20%);
	box-sizing: border-box;
}

#lab-projects img {
	width: 100%;
	height: 100%;
	border-radius: 25%;
	object-fit: cover;
}

#lab-projects aside {
	background-color: hsl(0, 0%, 20%);
	grid-area: 1 / 1 / 2 / 2;
	width: clamp(1.7em, 3vw, 2.5em);
	margin: 25% 4px;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	border-top-right-radius: 15px;
	border-bottom-right-radius: 15px;
	box-shadow: 3px 0 3px hsla(0, 0%, 0%, .2);
	position: relative;
}

#lab-projects .project-tag {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	height: 100%;
	margin: auto;
	font-weight: 600;
	font-size: clamp(0.9em, 1.5vw, 1.2em);
	position: absolute;
	inset: 0;
	line-height: clamp(1.5em, 2.3vw, 1.6em);
	color: hsl(0, 0%, 90%);
}

#lab-projects .project-tag.app {
	color: hsl(30, 90%, 70%);
}

#lab-projects .project-tag.video {
	color: hsl(190, 90%, 60%);
}

#lab-projects .project-tag.download {
	color: hsl(345, 90%, 60%);
}



/* @end */

#wrapper>footer {
	text-align: center;
	font-weight: 500;
}




@media only screen and (max-width: 833px) {
	
	#project-preview {
	
		padding: 10px;
					
	}
	
	#project-container {
		
		width: 100%;
		height: auto;
		margin: auto;
		padding: 3vw;
		border-radius: 6vw;
		
		grid-template-rows: auto auto auto;
		box-sizing: border-box;	
		
		row-gap: 3vw;	
	}
	
	#project-container header {
		font-size: clamp(0.7em, 3.5vw, 1em);
		
	}
	
	#project-container button {
		top: 3vw;
		right: 3vw;
		width: 30px;
		height: 30px;
		
	}
	
	#project-container button>svg .cross {
		fill:none;stroke:hsl(0, 0%, 10%);
	}
	
	#project-container button>svg .circle {
		fill:hsl(0, 0%, 10%);
	}

	
	#details {
		font-size: clamp(0.7em, 3.2vw, 1.2em);
		
	}
	
	#video {
		height: 51vw;	
	}
	
	

	
	#wrapper {
		
		grid-template-columns: 1fr;
		grid-template-rows: auto 60% repeat(3, auto) 50px;
		height: 100%;
		
	}
	
	/*#wrapper>section {
		margin-bottom: 10vw;
	}*/
	
	#wrapper h2 {
		font-size: clamp(3em, 9vw, 8em);
		
	}

	
	#wrapper>header {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
		padding: 0 4vw;
		margin: 20px 0;
	}
	
	#wrapper>header>a {
		
		font-size: clamp(1em, 5vw, 1.8em);
		margin-bottom: 20px;
		text-align: center;
		padding-left: 0;
		padding-right: 0;
	}
	
	nav {
		font-size: clamp(1em, 4vw, 1.5em);
	}
	
	nav>ul {
		grid-template-columns: repeat(3, 1fr);		
	}
	
	nav>ul>li {
		padding: 0;
	}
	
	#banner {
		margin-bottom: 10vw;
	}
	
	#banner-context {

		row-gap: 4vw;
		
	}

	#banner-context h1 {
		font-size: clamp(2em, 9vw, 4em);
		line-height: 0.9em;
	}
	
	#banner-context ul {
		font-size: clamp(0.9em, 3vw, 3em);
		width: 70%;
		margin: auto;
	}
	
	#banner-context ul>li {
		margin-bottom: 0.7 vw;
	}
	
	#banner-context ul>li:nth-child(2)::after {
		display: none;
	}
	
	.image-tag {
		border-top-left-radius: 15px;
		border-top-right-radius: 15xpx;
		font-size: clamp(0.6em, 2vw, 1em);
	}
	
	#about {
		grid-template-columns: clamp(1em, 4vw, 4em) clamp(90px, 22vw, 200px) minmax(200px, 750px);
		justify-content: center;
		margin: 0 2vw 10vw 2vw;
	}
	
	#about aside {
		margin-top: 10px;
		
	}
	
	#profile-image {
		
		border-width: 1vw;
		
	}
	
	#about aside ul {

		grid-auto-columns: 6vw;
		grid-template-rows: 6vw 6vw;
		grid-auto-flow: row;
	
	
	}
	
	#about article {
		margin-left: 5%;
		font-size: clamp(0.8em, 2vw, 1.6em);
		overflow: hidden;
	}
	
	
	
	
	
	
	#works {
		margin-bottom: calc(10vw - 150px);
	}
	
	#works header {
		text-align: right;
		padding-right: 5vw;
		
	}
	
	#works ul {
	/*background-color: crimson;*/
		
		grid-auto-columns: clamp(100px, 29vw, 200px);
		grid-template-rows: clamp(100px, 29vw, 200px);
		column-gap: 5vw;
		margin: 0px 0;
		
	}
	
	#works ul>li {
		
		border-width: 0.7vw;
		
	}
	
	#lab-projects h1{
		
		font-size: clamp(1em, 4vw, 1.5em);
		margin-top: 10px;
		margin-bottom: 5px;
	}
	
	#lab>header>p {
		top: -2px;
		margin-left: 70px;
		width: clamp(200px, 60vw, 600px);
		line-height: 1.4em;
		font-size: clamp(0.8em, 1.5vw, 1.5em);
		
	}
	
	#lab-projects>ul {
		
		grid-template-columns: repeat(auto-fill, minmax(160px, auto));
		column-gap: clamp(10px, 5%, 120px);
		row-gap: 40px;
		margin: 0 5%;
		justify-content: space-around;
		
	}
	
	#lab-projects>ul>li {
		grid-template-rows: clamp(160px, 22vw, 360px) auto auto;
		grid-template-columns: clamp(160px, 24vw, 360px);
		
	}
	
	#lab-projects picture {
		border-width: 0.8vw;
	}
	
	#lab-projects aside {
		width: 25px;
		margin: 25% 1px;
		border-top-left-radius: 1px;
		border-bottom-left-radius: 1px;
		border-top-right-radius: 10px;
		border-bottom-right-radius: 10px;
		
	}
	
	#lab-projects .project-tag {
		font-size: clamp(0.7em, 2vw, 1.3em);
		line-height: 20px;
	}
	
	/*#lab-projects .project-tag {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	height: 100%;
	margin: auto;
	font-weight: 600;
	font-size: clamp(0.9em, 1.5vw, 1.2em);
	position: absolute;
	inset: 0;
	line-height: 2.3vw;
	color: hsl(0, 0%, 90%);
}*/


	
}

@keyframes shrink {

	from {
		transform: scale(105%);
	}
	
	to {
		transform: scale(100%);
	}

}


@keyframes grow {
	from {
		transform: scale(95%);
	}
	
	to {
		transform: scale(100%);
	}
}