@charset "UTF-8";
/* Z INDEX GUIDE */
/*
Loading animation = 102
Grid fallback = 101
Page header = 99
Mobile navigation dropdown = 100
shadow layer behind menus = 98
footer = 97
*/

#shade {
	height: 100%;
	width: 100%;
	margin: 0;
	background: black;
	position: fixed;
	z-index: 98;
	opacity: 0;
	-webkit-transition: opacity 2s;
	transition: opacity 1s;
	display: none;
}

/* Page Loading Animation */
.loading {
	width:100%;
	height:100%;
	background:#fff;
	z-index:102;
	position:fixed;
}

.loadingimage {
	width: 273px;
	height: 150px;
	background:url(//www.maxvandoorn.com/images/logo.png) center center no-repeat;
	background-size:100%;
	margin: 30vh auto auto;
	animation:bounce 3s infinite;
	-webkit-transform-origin: bottom center;
  	/* Chrome */
  	-ms-transform-origin: bottom center;
  	/* IE 9 */
	transform-origin:bottom center;
	/* IE 10+, Firefox, etc. */
}
.logo-shadow {
	width:273px;
	height:25px;
	/*background:#BCBCBC;*/
	background:#000;
	opacity:0.25;
	filter:blur(10px);
	border-radius:50%;
	margin:auto;
	animation:shadowbounce 3s infinite;
}
@keyframes bounce{
	0%{transform:scaleY(1);}
	30% {transform:scaleY(1);}
	40%{transform:scaleY(0.75);}
	50% {transform:translateY(-100px) scaleY(1.25);}
	75%{transform:translateY(0px) scaleY(0.9);}
	85%{transform:scaleY(1.1);}
	100%{transform:scaleY(1);}
}
@keyframes shadowbounce{
	0%{}
	40%{transform:scaleX(1);
		opacity:0.25;
	}
	50%{transform:scaleX(0.75);
		opacity:0.15;
	}
	75%{transform:scaleX(1);
		opacity:0.35;
	}
	100%{opacity:0.25;}
}
/* Header Stylesheet */
.navbar {
	/* font-family: 'Trebuchet MS', sans-serif;
	color: #767676; 
	font-size: 14px;
	*/
	-webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.15);
	-moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.15);
	box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.15);
	width: 100%;
	height: 100px;
	position: fixed;
	top: 0;
	left: 0;
	background: #fff;
	z-index: 99;
	
	display:flex;
	flex-direction:row;
	justify-content:space-between;
}
.container::before {
    content: '';
    display: block;
	height:100px;
}

/*Mobile Navbar*/
#myLinks {
	display: block;
	position:fixed;
	top:75px;
	left:-340px;
	z-index:100;
	overflow:auto; /*Will make it scrollable when the contents are taller than the height*/
}
#myLinks ul {
	z-index: 100;
	position: relative;
	margin: 0;
	background: #fff;
	list-style-type: none;
	width: 300px;
	font-family: 'Palanquin', 'Arial', sans-serif;
	font-size:12pt;
	line-height:12pt;
}
#myLinks ul li {
	float: none;
	text-align: left;
	width: 100%;
	margin: 0;
}
#myLinks ul li:hover {
	background: #253940;
}
#myLinks ul li:hover a {
	color: #fff;
}
#myLinks ul li a {
	color: #767676;
	text-decoration: none;
	padding: 20px;
	border-bottom: 2px solid #b8b8b8;
	display: block;
	margin: 0;
	font-size: 16px;
}

.nav-icon {
	width: 25px;
	height: 25px;
	margin: auto;
	display: none;
	background:url(//www.maxvandoorn.com/images/nav-icon.svg)center center no-repeat;
}

.navbar-links {
    display:flex;
    flex-direction:row;
    justify-content:flex-start;
    width:80%;
    max-width:720px;
}
.resume-link {
    
    display:flex;
    flex-direction:column;
    justify-content:center;
    font-family: 'Trebuchet MS', sans-serif;
    font-size:14px;
    text-align:center;
    height:100px;
    margin:auto 20px auto auto;
}
.resume-icon {
    display:block;
    margin:auto;
    height:30px;
}
.resume-text {
    color: #767676;
    margin-top:3px;
}

/* Updated Navbar Styling */
.navbar .logo {
    height:90px;
    display:block;
    margin:5px auto auto 20px;
    transform:scale(0.85);
}
.navbar .logo:hover {
	transform:scale(0.95);
}
.navbar-text {
    font-family: 'Palanquin', 'Arial', sans-serif;
    /*font-family: 'Palanquin-Regular', 'Arial', sans-serif;*/
    text-transform: uppercase;
    margin:auto;
    text-align:center;
    color:#000;
    text-decoration:none;
}
.navbar-text:hover {
    /*color:#4CC2E7;*/
    color:#787878;
    /*font-family: 'Palanquin', 'Arial Bold', sans-serif;*/
}

.navbar a:hover {
    cursor:pointer;
}


/*Mobile social media icons*/
.mobile-icon-grid {
	display:grid;
	margin:auto;
	grid-template-columns: 45px 45px 45px 45px;
	grid-template-rows:100%;
	border-bottom: 2px solid #b8b8b8;
	padding-left:15px;
	width:285px !important;
}
.mobile-icon-grid a {
	padding:9px 0px !important;
	border-bottom:none !important;
}
.twitter-mobile,.dribbble-mobile,.linkedin-mobile,.instagram-mobile,.twitch-mobile,.bsky-mobile {
	height:40px;
	width:40px;
	margin:auto;
}
.twitter-mobile,.instagram-mobile,.bsky-mobile {
	border-radius:25%;
}
.twitter-mobile {
	background:url(//www.maxvandoorn.com/images/twitter-app.svg) center center no-repeat;
	background-size:100%;
}
.bsky-mobile {
	background:url(//www.maxvandoorn.com/images/bsky-app.svg) center center no-repeat;
	background-size:100%;
}
.dribbble-mobile {
	background:url(//www.maxvandoorn.com/images/dribbble-app.svg) center center no-repeat;
	background-size:100%;
}
.linkedin-mobile {
	background:url(//www.maxvandoorn.com/images/linkedin-app.svg) center center no-repeat;
	background-size:100%;
	fill:#fff;
}
.instagram-mobile {
	background:url(//www.maxvandoorn.com/images/instagram-app.jpg) center center no-repeat;
	background-size:100%;
}
.twitch-mobile {
    background:url(//www.maxvandoorn.com/images/twitch-app.png) center center no-repeat;
	background-size:contain;
}
@media screen and (max-height:435px) {
	#myLinks {
		height:calc(100% - 75px);
	}
}
@media screen and (min-width:1280px) {
	.navbar {
	    /*
		display:grid;
		grid-template-columns: auto 273px 194px 194px 194px 194px auto;
		grid-template-rows: 130px 30px;
		column-gap: 10px;
		*/
	}
	#myLinks {
		left:-340px;
	}
}
@media screen and (max-width:1279px) and (min-width:799px) {
	.navbar {
	    /*
    	display:grid;
    	grid-template-columns: auto 273px 15% 15% 15% 15% auto;
    	grid-template-rows: 130px 30px;
    	column-gap: 10px;
    	*/
    }
	#myLinks {
		left:-340px;
	}
}
@media screen and (min-width:799px) {
	.character-text,.graphic-text,.package-text,.resume-text {
		display:block;
	}
	/* Make sure that the mobile-only dropdown doesn't stay open when transitioning to larger screens. */
	#myLinks {
        display:none !important;
        }
    #shade {
        display:none !important;
    }
}


@media screen and (max-width:798px) {
	.container::before {
		height:75px;
	}
	.navbar {
		height: 75px;
		display:grid;
		grid-template-columns: 30px auto 120px auto 40px;
		grid-template-rows: 75px;
	}
	.nav-icon {
		display:block;
		grid-column:1/3;
		grid-row:1/2;
		margin-left: 25px;
		cursor: pointer;
		background:url(//www.maxvandoorn.com/images/nav-icon.svg)center center no-repeat;
	}
	.navbar .logo {
		height: 65px;
		grid-column:3/4;
		grid-row:1/2;
		transform:scale(0.95);
		margin:5px auto auto auto;
	}
	.navbar .logo:hover {
		transform:scale(1);
	}
	
	.resume-link {
	    height:75px;
	    position:absolute;
        right:20px;
        margin:auto;
	}
	
	.navbar .logo a {
	    /*
		display: block;
		width: 113px;
		height: 62px;
		*/
	}
	.navbar .navbar-text {
	    display:none;
	}

}

/* DARK MODE */
.darkMode .loading {
    background-color:#1f1f1f;
}
.darkMode .navbar {
    background-color:#1f1f1f;
}
.darkMode .character-text,.darkMode .graphic-text,.darkMode .package-text,.darkMode .resume-text {
    color:#e2e2e2;
}
.darkMode #myLinks ul {
    background-color: #1e1e1e;
}
.darkMode #myLinks ul li a, .darkMode .mobile-icon-grid {
    border-bottom: 2px solid #121212;
    color: #e3e3e3;
}
.darkMode #myLinks ul li:hover {
	background-color: #113046;
}