@import url('https://fonts.googleapis.com/css?family=Titillium+Web|Varela+Round&display=swap');

@view-transition {
	navigation: auto;
}

:root {
	view-transition-name: root;
}

@keyframes fade-out {
	0% { opacity: 1; }
	100% { opacity: 0; }
}
@keyframes fade-in {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes slide-out {
	0% { transform: translateY(0); }
	100% { transform: translateY(10rem); }
}
@keyframes slide-in {
	0% { transform: translateY(10rem); }
	100% { transform: translateY(0); }
}

::view-transition-old(root) {
	animation: fade-out 0.3s ease-in-out;
}
::view-transition-new(root) {
	animation: fade-in 0.3s ease-in-out;
}

::view-transition-old(article) {
	animation: slide-out 0.3s ease-in, fade-out 0.3s ease-in-out;
}
::view-transition-new(article) {
	animation: slide-in 0.3s ease-out, fade-in 0.3s ease-in-out;
}

body {
	margin: 0;
	padding: 0;
	font-family: "Titillium Web", sans-serif;
	font-size: 1.1em;
	background-image: url(resume_watermark.jpg?1);
	background-size: 100%;
	background-position: top;
	background-repeat: no-repeat;
	background-attachment: fixed;

	@media screen and (max-width: 600px) {
		margin: 0.25rem;
	}

}

html::-webkit-scrollbar {
    width: 1em;
    height: 1em;
}
html::-webkit-scrollbar-track {
    background: linear-gradient(
		to right,
		rgb(220, 200, 190) 20%,
		rgb(255, 245, 240) 40%,
		rgb(220, 200, 190) 40%,
		rgb(220, 200, 190) 60%,
		rgb(170, 160, 150) 60%,
		rgb(220, 200, 190) 80%
	);
    box-shadow:
    	inset 1px 4px 2px rgba(0, 0, 0, 0.4),
    	inset 0px -4px 2px rgba(0, 0, 0, 0.4);
    border-radius: 1em;
}
html::-webkit-scrollbar-track:hover {
    background: linear-gradient(
		to right,
		rgb(220, 200, 190) 20%,
		rgb(255, 245, 240) 40%,
		rgb(220, 150, 100) 40%,
		rgb(220, 150, 100) 60%,
		rgb(170, 160, 150) 60%,
		rgb(220, 200, 190) 80%
	);
}
html::-webkit-scrollbar-thumb {
	background: rgb(200, 180, 170);
	border: 1px solid rgb(100, 100, 100);
    border-radius: 1em;
    box-shadow:
    	inset 2px 2px 2px rgba(255, 255, 255, 1),
    	inset -2px -2px 2px rgba(0, 0, 0, 0.5);
}
html::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(
		to bottom,
		rgb(240, 200, 150),
		rgb(220, 130, 90)
	);
}

nav {
	z-index: 100;
	position: sticky;
	top: 0;
	padding: 0.5em;
	padding-bottom: 1.5em;
	background: linear-gradient(
		to top,
		rgba(255, 255, 255, 0) 0,
		rgba(245, 240, 235, 1) 1.5em
	);

	@media screen and (max-width: 600px) {
		margin: -0.25rem;
	}

}

.Toolbar {
	text-align: center;
	font-family: "Titillium Web";
	font-size: 0.9em;
}

.Toolbar a {
	display: inline-block;
	margin-bottom: 0.2em;
	padding-left: 0.7em;
	padding-right: 0.7em;
	padding-bottom: 0.1em;
	text-decoration: none;
	color: rgba(102, 19, 19, 0.5);
	background-color: rgb(250, 245, 240);
	border: 1px solid rgb(220, 210, 200);
	border-radius: 0.4em;

	@media screen and (max-width: 600px) {
		padding-top: 0.1em;
		padding-bottom: 0.3em;
	}

}
.Toolbar a:hover {
	color: red;
	background-color: rgba(255, 255, 255, 0.5);
	border: 1px solid rgba(255, 100, 0, 0.5);
	text-decoration: none;
}

.Toolbar .Divider {
	padding-left: 0.3em;
	padding-right: 0.3em;
}

.Toolbar .This {
	background-color: rgb(255, 255, 255);
}

main {
	max-width: 50rem;
	margin-top: -2em;
	margin-left: auto;
	margin-right: auto;
	padding: 2rem;
	padding-top: 0;
	padding-bottom: 5em;
}

a {
	color: rgb(150, 64, 93);
	text-decoration: underline;
	text-decoration-color: rgba(150, 64, 93, 0.3);
}
a:hover {
	color: red;
	text-decoration: underline;
}

h1 {
	margin-bottom: 0.1em;
	text-align: center;
	font-family: "Varela Round";
	font-weight: bold;
	font-size: 2.2em;
	color: rgb(78, 65, 79);
	line-height: 1.1em;
}

h2 {
	margin-top: 0.5em;
	margin-bottom: 0.3em;
	padding-bottom: 0.1em;
	border-bottom: 1px solid rgba(37, 78, 96, 0.4);
	font-family: "Varela Round";
	font-weight: normal;
	color: rgb(37, 78, 96);
}

h3 {	
	font-family: "Varela Round";
	font-weight: normal;
}

article {
	view-transition-name: article;
}

.TagLine {
	margin-bottom: 0.4em;
	text-align: center;
	font-family: "Varela Round";
	font-weight: bold;
	font-size: 1.5em;
	color: rgb(78, 65, 79);
}

.ContactLine {
	text-align: center;
	font-size: 0.9em;
	margin-bottom: 2em;
}

.ContactLine .Separator {
	margin-left: 0.5em;
	margin-right: 0.5em;
}

.ContactLine a {
	text-decoration: none;
}

.Mugshot {
	width: 60%;
	max-width: 320px;
	max-height: 410px;
	margin-top: 0;
	margin-left: 0.5em;
	margin-bottom: 0.5em;
	float: right;

	img {
		width: 100%;
	}

	@media screen and (max-width: 600px) {
		max-width: min(400px, 100vw - 100px);
		max-height: none;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		float: none;
	}

}




@media print {
	
	body {
		margin: 0em;
		font-size: 1em;
	    background-image: none;
		overflow: visible;
	}

	h1 {
		color: black;
	}

	h2 {
		margin-top: 0.25em;
		color: black;
		border-bottom: 0.1px solid rgb(150, 150, 150);
	}

	a {
		color: black;
		text-decoration: none;
	}

	nav {
		display: none;
	}

	main {
		margin-top: 2em;
		margin-left: auto;
		margin-right: auto;
		padding: 0;
	}

}