/* * * * * * * * *\
* Hello world! :D *
* * * * * * * * * *
* CSS designed by *
* Andrew Yaros :) *
\* * * * * * * * */

/*************************************************/
/*                     Fonts                     */
/*************************************************/
/* Tachyon Thin */
@font-face {
	font-family:				 	"tachyonthin";
	src: 						url("../fonts/Tachyon_Thin.otf")
} /* Computer Modern serif */
@font-face {
	font-family: 				"cmu";
	src: 						url("../fonts/cmunrm.otf");
	font-weight: 				normal;
} /* Swiss 721 roman */
@font-face {
	font-family:	 			"721";
	src: 						url("../fonts/721r.otf");
	font-weight: 				normal;
} /* Swiss 721 bold */
@font-face {
	font-family: 				"721";
	src: 						url("../fonts/721b.otf");
	font-weight: 				bold;
} /* Continuum Light */
@font-face {
	font-family: "cont";
	src: 						url("../fonts/contl.ttf");
	font-weight: 200;
}

/*************************************************/
/* by "important" I mean stuff that should not be
changed or it will screw up the responsiveness and 
the layout of the page */
/*************************************************/


/*************************************************/
/*              Overall Page Format              */
/*************************************************/
:root {
	/* SEE SEPERATE FILE FOR DARK THEME */
	
	
	/* THERE IS ALSO A SEPERATE LIGHT THEME FILE;
	copy any changes to these colors into that file */
	
	/* Theme colors. DO NOT REMOVE THIS */
	--selectiontext: 			#ffffff;
	--selectioncolor: 			#000000;
	--pagebg: 					#fafafa;
	--pagetext: 					#000000;
	--titletext: 				#555555;
	--pagelightertext: 			#555555;
	
	--titleshadowone: 			#ababab;
	--titleshadowtwo: 			#999999;
	--descriptionshadowone:		#cdcdcd;
	--descriptionshadowtwo:		#999999;
	
	--maincontentbg:				#d1d1d1;	
	--copyrighttext:				#afafaf;
	
	--smallerscreentext:		#333333;
	--smallerscreenshadow:		#888888;
	
	--tinybuttonshadow:			#d8d8d8;
	--mobilebuttonshadow:		#dddddd;
	--mobilebuttonhovershadow:	#777777;
	
	--buttonactivecolor:		#0066ff;
	--buttonactivetext:			#ffffff;
	
	--shadowcolor:				rgba(0, 0, 0, 0.8);
	--shadowsize:				40px;
	--buttonDepressionShadow: 	rgba(0, 0, 0, 0.2);
} html, body {
	height:						100%;
	margin:						0;
	overflow: 					auto;
	background-color: 			var(--pagebg)!important;
} body {
	cursor: default;
	font-family: 				"721", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
	font-size: 					12pt;
	font-weight: 				200;
	color: 						var(--pagetext)!important;
} #bodyDiv {
	margin: 						auto; /* important */
	height: 						100%; /* important */
	min-width: 					260px;		/* minimum width */
	min-height: 				260px;		/* minimum height */
	display: 					flex; /* flex stuff is all important */
	flex-direction: 			column;
	justify-content: 			stretch;
	flex-wrap: 					nowrap;
	align-content: 				stretch;
	align-items: 				stretch;
} a, .functionlink {
	cursor: pointer;
} a, a:visited, .functionlink { 
	text-decoration: 			none;
	-webkit-transition-duration: 	0.3s;
	transition-duration: 		0.3s;
} a:hover, .functionlink:hover { 
	color: 						var(--selectiontext)!important;
	text-decoration: 			overline;
	background: 				var(--selectioncolor);
	text-shadow: 				none;
} a:active, .functionlink:active { 
	color: 						var(--buttonactivetext)!important;
	text-decoration: 			underline;
	background: 				var(--buttonactivecolor);
	text-shadow: 				none;
} div { 
	border: none!important;
} #title, #description, h1, h2, h3, h4, h5, h6 {
	color: 						var(--titletext);
} .footer, a, a:visited, .functionlink { 
	color: 						var(--pagelightertext);
} ::selection { 
	background: 				var(--selectioncolor);
	color: 						var(--selectiontext);
	text-shadow: 				none;
} ::-moz-selection { 
	background: 				var(--selectioncolor);
	color: 						var(--selectiontext);
	text-shadow: 				none;
}

/*************************************************/
/*                    Header                     */
/*************************************************/
#header, .footer { 
	vertical-align: 			center;
} #header {
	padding: 					2%; /* padding */
	display: 					flex; /* flex stuff is all important */
	justify-content: 			space-between; /* horizontal align */
	align-items: 				center; /* vertical align */
	flex-wrap: 					nowrap;
} #headerR { 
	text-align: 				right;
} #headerL { 
	text-align: 				left; 
} #title { 
	text-shadow: 				0 3px 20px var(--titleshadowone), 0 2px 3px var(--titleshadowtwo);
} #description, .footer, #mainContentButton { 
	text-shadow: 		0 2px 20px var(--descriptionshadowone), 0 1px 3px var(--descriptionshadowtwo);
} #title {
	font-family: 				"tachyonthin", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
	text-transform:				uppercase;
	letter-spacing:				.25em!important;
	font-size: 					3.5vw;
	font-weight: 				normal;
} #lastname { 
	letter-spacing: 			.765em!important; 
} #description {
	letter-spacing: 			.07em;
	font-family: 				"cmu", "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-weight: 				normal;
	text-transform: 			uppercase;
	font-size: 					2vw;
} #title, #description {
	user-select: 				none;
	-ms-user-select: 			none;
	-moz-user-select: 			none;
	-khtml-user-select: 		none;
	-webkit-user-select:		none;
} #mainContentButton {
	font-family: 				"cmu", "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-weight: 				lighter;
	text-transform:				uppercase;
}

/*************************************************/
/*              Main Page Content                */
/*************************************************/
#mainContent { /* all of this is important */
	position: 					relative;
	width: 						100%;
	/*margin: 						none;*/
	display: 					flex;
	border: 						none;
	flex: 						1!important;
	background-color:			var(--maincontentbg);
} #mainContentButton {
	display: 					block;
	width: 						130px;
	padding:						8px;
	position: 					absolute;
	bottom: 						20px;
	left: 						50%;
	margin-left:					-73px; /* = (width / 2) + padding */
	text-align: 				center;
	color: 						var(--pagelightertext); 
	background-color: 			var(--pagebg); 
	border-radius: 				15px;
	font-size: 					13.5pt;
	letter-spacing:				.1em;
	-webkit-transition-duration:	0.0s;
	transition-duration: 		0.0s;
	box-shadow:			0 0 30px 0 rgba(0,0,0,.6) !important;
	-webkit-box-shadow:	0 0 30px 0 rgba(0,0,0,.6) !important;
} #mainContentButton:hover {
	color: 						var(--pagebg);
	background-color: 			var(--pagetext);
	text-decoration: 			none;
	text-shadow: 				none;
	box-shadow:			0 0 3px 0 var(--shadowcolor) !important;
	-webkit-box-shadow:	0 0 3px 0 var(--shadowcolor) !important;
} #mainContentButton:active {
	color: 						var(--buttonactivetext);
	background-color: 			var(--buttonactivecolor);
	text-decoration: 			none;
	text-shadow: 				none;
} #outerDisplay, #changethemetext {
	user-select: 				none;
	-ms-user-select: 			none;
	-moz-user-select: 			none;
	-khtml-user-select:			none;
	-webkit-user-select:		none;
} #outerDisplay, #innerDisplay, #bg {
	width: 				100%!important;
	height:				100%!important;
	display:					block;
	border:						none;
} #bg, #innerDisplay {
	/* this seems redundant to have the shadow on both but it is necessary; 
	when the inner div is visible, the other div's shadow gets covered up 
	since it is the opacity of the entire inner div that is changed to show/hide it */
	box-shadow:			0 0 var(--shadowsize) 0 var(--shadowcolor) inset!important;
	-webkit-box-shadow:	0 0 var(--shadowsize) 0 var(--shadowcolor) inset!important;
} #bg {
	background-repeat:			no-repeat;
	background-size:				cover;
	background-position:		center center;
	background-attachment: 		scroll;
	
	/* slideshow transitions */
	        transition:	background 1.5s ease-out;
	-webkit-transition:	background 1.5s ease-out;
	    -ms-transition:	background 1.5s ease-out;
	     -o-transition:	background 1.5s ease-out;
	   -moz-transition:	background 1.5s linear; /* not working in firefox :( */
} #outerDisplay {
	background-repeat:			no-repeat;
	background-size:				cover;
	background-position:		center center;
	background-attachment: 		scroll;
	/* Image that states javascript isn't enabled.
	If javascript is enabled, it will promptly be replaced */
	background-image: url("../slides/plsenablejs.png");
} #innerDisplay {
	background-color:	transparent!important;
	position: 			absolute;
	left: 				0!important;
	top: 				0!important;
	background-repeat:			no-repeat;
	background-size:				cover;
	background-position:		center center;
	background-attachment: 		scroll;
	/* initial opacity value should be zero! */
	opacity: 0;
	/* mouseover transitions */
	        transition:	opacity 0.225s ease-in-out;
	-webkit-transition:	opacity 0.225s ease-in-out;
	    -ms-transition:	opacity 0.225s ease-in-out;
	     -o-transition:	opacity 0.225s ease-in-out;
	   -moz-transition: opacity 0.225s ease-in-out;
} #downarrow { /* the svg tag */
	width: 						13px;
	height: 					13px;
	margin-bottom: 				0;
	margin-right:				1.5px; /*when text shadow changes, give spacing to avoid the arrow changing position*/
} #thearrow { /* the svg path */
	fill: 						var(--pagelightertext); 
	stroke:						var(--pagelightertext); 
} #mainContentButton:hover #thearrow, #mainContentButton:active #thearrow { /* the svg when hovering over the main content button */
	fill:						var(--pagebg); 
	stroke:						var(--pagebg); 
} #mainContentButton:active, #changethemebutton:active, #mobilemailbutton:active, .footerlink:active {
	/* when button is pressed, show a shadow */
	box-shadow:			0 7.5px 10px 0 var(--buttonDepressionShadow) inset!important;
	-webkit-box-shadow:	0 7.5px 10px 0 var(--buttonDepressionShadow) inset!important;
}

/*************************************************/
/*                    Footer                     */
/*************************************************/
#footer { /* all important */
	display: 					flex;
	justify-content: 			space-between;
	align-content: 				space-around;
	align-items: 				stretch;
	flex-wrap: 					wrap;
} .footer {
	max-width: 					19%; /* important */
	margin: 						auto; /* important */
	padding-top: 				2.25%; /*  padding */
	padding-bottom: 			2.25%; /* padding */
	text-align: 				center;
	font-family: 				"cont", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
	font-weight: 				lighter;
	font-size: 					2vw;
	letter-spacing: 			.1em;
	text-transform: 			uppercase;
} #copyright {
	font-weight: 				normal;
	letter-spacing: 			.025em;
	font-size: 					7pt;
	color: 						var(--copyrighttext);
	text-shadow: 				none;
	text-align: 				center;
		padding: 0 10px 10px;
		margin: 						auto;
	text-transform: 			uppercase;
} .footerlink {	
	letter-spacing: 			.2em;
		  padding: 8px 10px 7px;
	  } .onlyMobile {
	display: 					none;
} #recursion { 
	display: 					none;
} #changethemebutton, #mobilemailbutton {
	display: 					none;
	position: 					absolute!important;
	bottom: 						16px!important;
	width: 						32px;
	height: 						32px;
	border-radius: 				12px;
	font-size: 					24px;
	text-align: 				center;
	vertical-align: 			center;
	color: 						var(--pagetext);
	background-color: 			var(--pagebg);
	box-shadow: 				0 2px 5px var(--mobilebuttonshadow);
	font-family: 				"Verdana", sans-serif;
	-webkit-transition-duration: 	0.3s;
	transition-duration:			0.3s;
	cursor:						pointer;
} #changethemebutton {
	left:						16px!important;
	fill:						var(--pagetext);
	stroke:						var(--pagetext);
} #mobilemailbutton {
	right:						16px!important;
	fill:						var(--pagetext);
} #changethemebutton:hover, #mobilemailbutton:hover {
	color:						var(--selectiontext);
	background-color:			var(--pagetext);
	box-shadow: 				0 0 2px var(--mobilebuttonhovershadow);
} #changethemebutton:active, #mobilemailbutton:active {
	color:						var(--buttonactivetext);
	background-color:			var(--buttonactivecolor);
	box-shadow: 				0 0 2px var(--mobilebuttonhovershadow);
} #changethemebutton:hover #themetoggleicon, #changethemebutton:active #themetoggleicon {
	fill: 						var(--selectiontext);
	stroke:						var(--selectiontext);
} #mobilemailbutton:hover #mobilemailicon, #mobilemailbutton:active #mobilemailicon {
	fill: 						var(--selectiontext);
} #changethemetext {
	display:						inline;
	color: 						var(--pagelightertext);
	font-size:					7pt;
	padding:						3px;
	text-transform: 			uppercase;
	cursor:						pointer;
} #changethemetext:hover {
	color: 						var(--selectiontext);
	background-color:			var(--pagetext);
} #changethemetext:active {
	color: 						var(--buttonactivetext);
	background-color:			var(--buttonactivecolor);
}


/*************************************************/
/*            Responsive design rules            */
/*************************************************/

/* most of this stuff is pretty important to the 
layout of the page; footer buttons act as the
primary content for the page when the google drive
div gets hidden (when the page gets too small) */

/* for larger/desktop devices */
/*************************************************/
@media only screen and (min-width: 850px) {
	#title { 
		font-size: 				20pt;
	} #description { 
		font-size: 				14pt; 
	} #header { 
		padding: 				30px;
	} .footer { 
		font-size: 				13.5pt;
		padding-top: 			20px; /* padding */
		padding-bottom:			20px; /* padding */ 
	}
}


/* for smaller devices */
/*************************************************/
@media only screen and (max-width: 640px) {
	#title { 
		font-size: 				4.75vw;
	} #description { 
		font-size: 				2.4vw; 
	} #header { 
		padding: 				20px;
	} #title, #description, .footer, a, a:visited, #mainContentButton { 
		color: 					var(--smallerscreentext);
	} #header, #title, #description, .footer, .footerlink { 
		text-shadow: 			0 3px 5px var(--smallerscreenshadow);
	}
}

/* if height is too small then hide the main content
	and show buttons */
/*************************************************/
@media only screen and (max-height: 400px) {
	#bodyDiv { 
		/*max-width: 1024px;*//* remove until I figure out
		a solution to deal with the tiny absolutely positioned 
		buttons*/
		min-height: 			310px;
	} #mainContent {
		display: 				none; 
	} #header { 
		padding-bottom: 		10px;
	} #footer { 
		flex: 					1;
		flex-wrap: 				wrap;
		align-content: 			space-around;
		/*padding: 				none;*/
	} .footer {
		font-style: 			normal;
		min-width: 				23%;
		width: 					23%;
	} #copyright { 
		font-weight: 			normal; 
		/*padding: 				none;*/
		padding-top: 			16px;
	} .footerlink { /* big buttons */
		border-radius: 			25px;
		box-shadow: 			0 2px 20px var(--mobilebuttonshadow);
		padding: 				20px;
	} .footerlink:hover, .footerlink:active {
		box-shadow: 			0 1px 2px var(--mobilebuttonhovershadow);
	} a.footerlink:hover, a.footerlink:active, .functionlink { 
		text-decoration:		none; 
	} .onlyMobile { 
		display: 				inline;
	} #changethemebutton {
		display: 				block;
	} #changethemetext { 
		display: 				none;
	}
}

/* tiny width screens - also show buttons */
/*************************************************/
@media only screen and (max-width: 400px) {
	#title { 
		font-size: 				18pt;
		padding-left: 			9pt; /* half of font size */
		/*padding-right:			none;*/
		margin: 				auto;
	} #lastname { 
		padding-left: 			9pt; /* half of font size */
	} #description { 
		font-size: 				.5em; 
	} #header { 
		align-content: 			stretch;
		padding: 				1px;
		margin: 				auto;
	} #headerL, #headerR {
		margin: 				auto;
	} #headerL { 
		padding: 				10px;
	} #headerR { 
		display: 				none; /*text-align: center; width: 100%;*/ 
	}  #mainContent {
		display: 				none;
	} #copyright { 
		letter-spacing: 		0;
		padding-top: 			12.5px;
	} .footerlink { /* medium buttons */
		border-radius:			20px;
		box-shadow: 			0 2px 15px var(--mobilebuttonshadow);
		padding: 				15px;
	} .footerlink:hover, .footerlink:active { 
		box-shadow: 			0 1px 2px var(--mobilebuttonhovershadow);
	} a.footerlink:hover, a.footerlink:active, .functionlink { 
		text-decoration: 		none!important;
	} .onlyMobile { 
		display: 				inline;
	} #changethemebutton {
		display: 				block;
		bottom: 				32px!important;
	} #mobilemailbutton {
		bottom: 				32px!important;
	} #changethemetext { 
		display:					none;
	}
}

/* show the smaller mail button (and hide larger one) under certain circumstances */
@media only screen and (max-height: 400px) and (max-width: 800px) {
	#mobilemailbutton {
		display:					block;
	} #emailfooterlink {
		display:					none;
	}
}

/* display small buttons when not enough room for larger buttons */
/*************************************************/
@media only screen and (max-height: 400px) and (max-width: 600px) {
	.footerlink {
		/* small buttons */
		padding: 7px 20px;
		box-shadow: 			0 2px 5px var(--tinybuttonshadow);
	}
}
@media only screen and (max-height: 560px) and (max-width: 400px) {
	.footerlink {
		/* small buttons */
		padding: 7px 20px;
		box-shadow: 			0 2px 5px var(--tinybuttonshadow);
	}
}


/* Sizing the footer */
/*************************************************/
@media only screen and (max-width: 799px) {
	.footer { 
		font-size: 				1em;
		/*padding: 				none;*/
		min-width: 				32%;
		width: 					32%;
	}
}
@media only screen and (max-width: 600px) {
	.footer {
		min-width: 				48%;
		width: 					48%;
	} 
}
@media only screen and (max-width: 400px) {
	#bodyDiv { 
		min-height:				360px;
	} #footer { 
		flex: 					1;
		flex-wrap: 				wrap;
		justify-content: 		space-around;
	} .footer {
		min-width: 				98%;
		width: 					98%;
		font-style:				normal;
	} .footerlink {
		display: inline-block;
		min-width:  110px;
	}
}

/* adjust header when tiny */
/*************************************************/
@media only screen and (max-width: 400px) and (max-height: 400px) {
	#title { 
		font-size: 				16pt;
		/*padding: 				none;*/
		padding-left:			12pt; /* half of font size */
		margin: 				auto;
	} #lastname { 
		padding-left:			12pt; /* half of font size */
	} #changethemebutton, #mobilemailbutton {
		bottom: 				32px!important;
	} 
}

/* hide mobile mail/theme buttons when tiny */
/*************************************************/
@media only screen and (max-height: 150px) {
	#mobilemailbutton, #changethemebutton {
		display: none;
	}
}
@media only screen and (max-width: 280px) {
	#mobilemailbutton, #changethemebutton {
		display: none;
	}
}