body {
	background-color: black;
	padding:0px;
	margin:0px;
	min-width:100vw;
	max-width: 100%;
	min-height: 100vh;
	position: relative;
}
html {
	height: auto;
	/* min-height: 100%; */
}
#spinner {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background: url(https://i.imgur.com/A3t1ggf.gif) 50% 50% no-repeat #000000;
}

#hider {
	background-color: black;
	height: 100%;
	width: 100vw;
	position: absolute;
	pointer-events: none;
	touch-action: none;
	transition: all .5s;
	z-index: 9999;
}

#main_display { 
	height: 100vh;
}
#wallpaper {
	position: absolute;
	z-index:-1;
	height: auto;
	width: 100%;
	top: 0;
	left: 0;
}

.noscrollbar {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE 10+ */
}
.noscrollbar::-webkit-scrollbar { /* WebKit */
    width: 0;
    height: 0;
}
svg {
	align-self: center;
	justify-self: center;
	margin: 0;
	padding: 0;
}

#name_wrapper {
	padding: 1vw 1vw 2.1vw 1vw;
	opacity: 0.0;
}
@media(hover: hover) and (pointer: fine){
	#name_wrapper:hover{
		animation: flicker 0.3s;
		webkit-animation:flicker 0.3s;
	}
}

@media(pointer: coarse){
	.hover_effect{
		animation: flicker 0.3s;
		webkit-animation: flicker 0.3s;	
	}
}
	
@keyframes flicker{
    0%{ opacity: 0.1; }
	9%{ opacity: 0.5; }
	10%{ opacity: 1.0; }
	19%{ opacity: 1.0; }
	29%{ opacity: 0.4; }
	39%{ opacity: 1.0; }
    49%{ opacity: 0.2; }
	59%{ opacity: 1.0; }
	69%{ opacity: 0.5; }
	79%{ opacity: 0.8; }
	80%{ opacity: 0.4; }
	89%{ opacity: 0.0; }
    99%{ opacity: 1.0; }
    100%{ opacity: 0.2; }
}
@webkit-keyframes flicker{
    0%{ opacity: 0.1; }
	9%{ opacity: 0.5; }
	10%{ opacity: 1.0; }
	19%{ opacity: 1.0; }
	29%{ opacity: 0.4; }
	39%{ opacity: 1.0; }
    49%{ opacity: 0.2; }
	59%{ opacity: 1.0; }
	69%{ opacity: 0.5; }
	79%{ opacity: 0.8; }
	80%{ opacity: 0.4; }
	89%{ opacity: 0.0; }
    99%{ opacity: 1.0; }
    100%{ opacity: 0.2; }
}


.noselect {
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}
div {
	text-align:center;
	margin: 0px;
	padding: 0px;
}

.parent {
	display: grid;
}
.container {
	display: grid;
	grid-template-columns: 11.5% 32.25% 12.5% 32.25% 11.5%;
	justify-content: center; 
}

.flexbox {
	display:flex;
	flex-direction:row;
	justify-content: center; 
}

a {

} 
.afix {
	max-width: 100%;
    width: auto\9; /* ie8 */
	margin: 0 1vh; /* distance between the icons */
}

/*#region Showcase Icons*/
.showcase-icon-wrapper {
	max-width: 100%;
	max-height: 100%;
	width: auto\9; /* ie8 */
	margin: 0 1vw; /* distance between the icons */
}
	.showcase-icon-wrapper[data-scroll] {
		transition: opacity 0.5s;
	}
	.showcase-icon-wrapper[data-scroll="in"] {
		opacity: 0;
	}
	.showcase-icon-wrapper[data-scroll="out"] {
		opacity: 1;
	}

.showcase-icon {
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	max-width: 100%;
	width: auto\9; /* ie8 */
	-webkit-transition: all 0.3s;
	-webkit-transform-origin: 75% 120%; /* makes the icons grow upwards only */
}
	.showcase-icon:hover {
		-webkit-transform: scale(1.5);
		margin: 0 1vw; /* distance between the icons on hover */
	}
/*#endregion*/

/*#region Footer */
.info-icon{
}
	.info-icon:hover {
		filter: blur(3px);
		filter: saturate(2.2);
		-webkit-filter: blur(3px);
		-webkit-filter: saturate(2.2);
	}

footer {
	height: 50vh; 
	padding: 0px;
	bottom: 3vh;
	width: 100%;
}
#footer-wrapper {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: flex-end;
}
/*#endregion*/

/*#region vimeo settings */
.vimeodiv {
	overflow:hidden; 
	position:relative; 
	height:100%;
}
.vimeoframe {
	left:0; 
	top:0;
}
.vimeobody {
	position:relative;
	overflow: hidden;
}
.vimeohtml {
	max-width:1920px; 
	/* height:56.25vw;  */
}
.vimeohtmlsq {
	max-width:1080px; 
}
.vimeohtmlgame {
	max-width:450px; 
}
/*#endregion*/

/*#region Gallery Arrows*/
.slideshow {
	position:absolute; 
	top:0; 
	bottom:0; 
	left:0;
	right:0; 
	margin:0; 
	z-index:1
}
.slidebutton {
	height:50px;
	max-height: 18%;
	position:absolute; 
	bottom:0; 
	margin:0; 
	z-index:2; 
	cursor: pointer;
}
	.slidebutton:hover {
		filter: invert(1);
		-webkit-filter: invert(1);
	}

.left-arrow {
	left: 0;
	animation: 1s ease-out 0s 1 leftArrowAnimation;
	-webkit-animation: 1s ease-out 0s 1 leftArrowAnimation;
	transform: rotate(90deg);
}
.right-arrow {
	right: 0;
	animation: 1s ease-out 0s 1 rightArrowAnimation;
	-webkit-animation: 1s ease-out 0s 1 rightArrowAnimation;
}

@keyframes leftArrowAnimation {
	0% {
		transform: translateY(-500%) scale(2) rotate(180deg);
	}

	100% {
		transform: translateY(0) rotate(90deg) scale(1);
	}
}
@-webkit-keyframes leftArrowAnimation {
	0% {
		-webkit-transform: translateY(-500%) scale(2) rotate(180deg);
	}

	100% {
		-webkit-transform: translateY(0) rotate(90deg) scale(1);
	}
}

@keyframes rightArrowAnimation {
	0% {
		transform: translateY(-500%) rotate(-90deg) scale(2);
	}

	100% {
		transform: translateY(0) rotate(0deg) scale(1);
	}
}
@-webkit-keyframes rightArrowAnimation {
	0% {
		-webkit-transform: translateY(-500%) rotate(-90deg) scale(2);
	}

	100% {
		-webkit-transform: translateY(0) rotate(0deg) scale(1);
	}
}
/*#endregion*/

/* icon padding */
.ai, .ae {
	padding-top: 0.0vw;
}
.ps, .android {
	padding-top: 2.4vw;
}
.unity {
	padding-top: 3.8vw;
}
.c4d {
	padding-top: 2.5vw;
}
.arduino {
	padding-top: 3.9vw;
}
.processing {
	padding-top: 2.9vw;
}
.p5 {
	padding-top: 0.4vw;
}

.egg {
	display:none; z-index:2; position:absolute; left:25vw; width:50%; height:auto;
}

.background{
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9998;
	pointer-events: none;
  -webkit-animation: bg-move 2s linear infinite;
          animation: bg-move 2s linear infinite;
  background-size: 100% .3em;
  background-image: linear-gradient(0, rgba(0,0,0,80) 10%, transparent 10%, transparent 50%, rgba(42,13,17,40) 50%, rgba(0,0,0,40) 60%, transparent 60%, transparent);
	opacity: 0.3;
}
@-webkit-keyframes bg-move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -32px;
  }
}
@keyframes bg-move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -32px;
  }
}