:root{
	--fadein: 0.5s;
	--fadeout: 1.5s;
	--paneheight:100vh;
	--bgblack:#111111;
	--bggrey:#171717;
	--shadowdepth:1vh;
	@media only screen and (orientation: landscape) {
		--panewidth:50vw;
	}
	@media only screen and (orientation: portrait) {
		--panewidth:100vw;
	}
}

body {
	font-family: 'JetBrains Mono';
	margin:0;
	background-color:--bgblack;
	overflow-x:hidden
}
.grid{
	display:grid;
	@media only screen and (orientation: landscape) {
		grid-template-rows:repeat(4,var(--paneheight));
		grid-template-columns: repeat(2,var(--panewidth))h;
	}
	@media only screen and (orientation: portrait) {
		grid-template-rows:repeat(5,var(--paneheight));
		grid-template-columns: var(--panewidth);
	}
}

.pane{
	position:sticky;
	bottom:0;
	background-image: linear-gradient(var(--bgblack) 75%, #222222 100%);
	color:#eeeeee;
	display:flex;
	flex-direction:column;
	flex-wrap:nowrap;
	@media only screen and (orientation: landscape) {
		width:50vw;
	}
	@media only screen and (orientation: portrait) {
		width:100vw;
	}
	filter: drop-shadow(0vh var(--shadowdepth) var(--shadowdepth) black);
}
.pane:nth-child(5){
	@media only screen and (orientation: landscape) {
		grid-row:1;
		grid-column:1;
	}
	@media only screen and (orientation: portrait) {
		grid-row:1;
		grid-column:1;
	}
}
.pane:nth-child(4){
	@media only screen and (orientation: landscape) {
		grid-row:2;
		grid-column:2;
	}
	@media only screen and (orientation: portrait) {
		grid-row:2;
		grid-column:1;
	}
}
.pane:nth-child(3){
	@media only screen and (orientation: landscape) {
		grid-row:3;
		grid-column:1;
	}
	@media only screen and (orientation: portrait) {
		grid-row:3;
		grid-column:1;
	}
}
.pane:nth-child(2){
	@media only screen and (orientation: landscape) {
		grid-row:4;
		grid-column:2;
	}
	@media only screen and (orientation: portrait) {
		grid-row:4;
		grid-column:1;
	}
}
.pane:nth-child(1){
	@media only screen and (orientation: landscape) {
		grid-row:4;
		grid-column:1;
	}
	@media only screen and (orientation: portrait) {
		grid-row:5;
		grid-column:1;
	}
}
.sheep{
	display: block;
	@media only screen and (orientation: landscape) {
		margin-left: 10vw;
		margin-right: 10vw;
		width: 20vw;
	}
	@media only screen and (orientation: portrait) {
		margin-left: 20vw;
		margin-right: 40vw;
		width: 40vw;
	}
}
.expflexbox{
	display:flex;
	flex-direction: column;
	justify-content: space-evenly;
	height:80vh;
	align-items: center;
}
.expbox{
	display:flex;
	@media only screen and (orientation: landscape) {
		width: 45vh;
		height: 15vh;
	}
	@media only screen and (orientation: portrait) {
		width: 80vw;
		height: 30vw;
	}
	perspective:100vw;
}
.expboxpicbg{
	position:relative;
	@media only screen and (orientation: landscape) {
		width: 15vh;
		height: 15vh;
	}
	@media only screen and (orientation: portrait) {
		width: 30vw;
		height: 30vw;
	}
	z-index:1;
	background-color:var(--bggrey);
	transform:translateZ(0vmin);
}
.expboxpic{
	position:relative;
	@media only screen and (orientation: landscape) {
		width: 15vh;
		height: 15vh;
	}
	@media only screen and (orientation: portrait) {
		width: 30vw;
		height: 30vw;
	}
	z-index:1;
	transition-duration:var(--fadeout);
}
.textbox{
	position:relative;
	background-color:var(--bggrey);
	@media only screen and (orientation: landscape) {
		width: 30vh;
	}
	@media only screen and (orientation: portrait) {
		width: 50vw;
	}
	transition-duration:var(--fadeout);
}
.lefttextbox{
	left:0;
	transform-origin:left;
	@media only screen and (orientation: landscape) {
		transform:translateX(-15vh) scaleX(0.5);
	}
	@media only screen and (orientation: portrait) {
		transform:translateX(-30vw) scaleX(0.6);
	}
}
.righttextbox{
	right:0;
	transform-origin:right;
	@media only screen and (orientation: landscape) {
		transform:translateX(15vh) scaleX(0.5);
	}
	@media only screen and (orientation: portrait) {
		transform:translateX(30vw) scaleX(0.6);
	}
}
.expbox:hover .expboxpic{
	transform:translateZ(5vh);
	transition-duration:var(--fadein);
}
.expbox:hover .textbox{
	transform:translateX(0) scaleX(1);
	transition-duration:var(--fadein);
}
.expboxtext{
	@media only screen and (orientation: landscape) {
		padding:2vh;
		font-size:1.75vh;
		width:28vh;
	}
	@media only screen and (orientation: portrait) {
		padding:3vw;
		font-size:3.5vw;
		width:44vw;
	}
}
.expbox:hover:nth-child(1) > .expboxpicbg > .expboxpic{
	filter: drop-shadow(var(--shadowdepth) var(--shadowdepth) var(--shadowdepth) #2d75ba);
}
.expbox:hover:nth-child(2) > .expboxpicbg > .expboxpic{
	filter: drop-shadow(var(--shadowdepth) var(--shadowdepth) var(--shadowdepth) #ffe777);
}
.expbox:hover:nth-child(3) > .expboxpicbg > .expboxpic{
	filter: drop-shadow(var(--shadowdepth) var(--shadowdepth) var(--shadowdepth) #a179dc);
}
.expbox:hover:nth-child(4) > .expboxpicbg > .expboxpic{
	filter: drop-shadow(var(--shadowdepth) var(--shadowdepth) var(--shadowdepth) #5c8ebd);
}
.dblprojbox{
	display:grid;
	@media only screen and (orientation: landscape) {
		grid-template-rows:auto auto;
		grid-template-columns: 25vw 25vw;
	}
	@media only screen and (orientation: portrait) {
		grid-template-rows:auto auto;
		grid-template-columns: 50vw 50vw;
	}
}
.proj{
	display:flex;
	flex-direction: column;
	height:70vh;
	justify-content:space-evenly;

}
.projboxcontainer{
	display:flex;
	position:relative;
	align-self: center;
	@media only screen and (orientation: landscape) {
		height:calc(5vh+4vw);
		width: 19vw;
	}
	@media only screen and (orientation: portrait) {
		height:calc(5vh+4vw);
		width:44vw;
	}
	font-size:2.5vh;
	align-items: center;
	justify-content: center;
	transform-origin:center;
	transition-duration: 0.25s;
}
.projbox{
	display:flex;
	position:relative;
	align-self: center;
	text-decoration: none;	
	background-image: linear-gradient(var(--bgblack) 0%,#1c1c1c 50%,var(--bgblack)  100%);
	@media only screen and (orientation: landscape) {
		height:5vh;
		width: 15vw;
	}
	@media only screen and (orientation: portrait) {
		height:5vh;
		width:40vw;
	}
	padding:2vw;
	filter: drop-shadow(var(--shadowdepth) var(--shadowdepth) var(--shadowdepth) black);
	font-size:2.5vh;
	align-items: center;
	justify-content: center;
	transition-duration: 0.25s;
}
.projboxcontainer:hover .projbox{
	transform: rotateX(360deg);
	z-index:1;
	transition-duration: 0.25s;
}
.projboxcontainer:hover .projbox span{
	display: none;
}
.projboxcontainer:hover .projbox:before{
	@media only screen and (orientation: landscape) {
		font-size:2vh;
	}
	@media only screen and (orientation: portrait) {
		font-size:3vw;
	}
	text-align: center;
}
.projboxcontainer:hover .p1:before{
	content:"Fractal generation by chaos game";
}
.projboxcontainer:hover .p2:before{
	content:"An esolang where all code is in the form of ipv6 adresses";
}
.projboxcontainer:hover .p3:before{
	content:"Bouncing DVD animation that only hits the corner when you are not looking";
}
.projboxcontainer:hover .p4:before{
	content:"Image to braille art converter";
}
.projboxcontainer:hover .p5:before{
	content:"Particle based two fluid mixing simulator";
}
.projboxcontainer:hover .p6:before{
	content:"Firefly blinking synchronisation simulator";
}
.projboxcontainer:hover .p7:before{
	content:"Neuron-like animation";
}
.projboxcontainer:hover .p8:before{
	content:"Iterative Sorting algorithm simulator";
}
.projboxcontainer:hover .p9:before{
	content:"Real time photo sharing app";
}
.projboxcontainer:hover .p10:before{
	content:"Website made in only HTML and CSS";
}
.projboxcontainer:active .projbox{
	transform:scale(0.9);
	transition-duration: 0.25s;
}
.heading{
	@media only screen and (orientation: landscape) {
		padding:5vh;
		font-size: 5vh;
	}
	@media only screen and (orientation: portrait){
		padding-left: 5vh;
		padding-right: 5vh;
		padding-top: 9vh;
		padding-bottom: 1vh;
		font-size: 5vh;
	}
}
.text{
	padding:4vmin;
	font-size: 3vh;
	@media only screen and (orientation: landscape) {
		max-width:40vw; 	
		max-height:80vh;
	}
	@media only screen and (orientation: portrait) {
		max-width:90vw;
		max-height:80vh;
	}
	
}
.ico{
	width:5vh;
	height:5vh;
}
.title{
	display:flex;
	justify-content: center;
}
.aligned{
	display: flex;
	align-items:center;
	text-decoration: none;
}
.link{
	color:#2d75ba;
}
.icogrid{
	@media only screen and (orientation: landscape) {
		display:flex;
		justify-content: space-around;	
		padding:5vw;
	}
	@media only screen and (orientation: portrait) {
		display: grid;
		grid-template-rows:20vw 20vw;
		grid-template-columns:20vw 20vw;
		grid-row-gap:20vw;
		grid-column-gap:20vw;
		padding-right:20vw;
		padding-left:20vw;
		padding-top:10vw;
	}
}
.icogrid > a > img{
	@media only screen and (orientation: landscape) {
		width:10vmin;
		height:10vmin;
	}
	@media only screen and (orientation: portrait) {
		width:20vw;
		height:20vw;
	}
}