@import url('https://fonts.googleapis.com/css2?family=Zalando+Sans:ital,wght@0,200..900;1,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200..900&display=swap');

html {
	height: 100%;
	box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body {
	background-color: #dadfe8;
	font-family: "Zalando Sans", sans-serif;
	position: relative;
	min-height: 100%;
	padding-bottom: 6rem;
	padding-left: 260px;
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	} 100% {
		opacity: 1;
	}
}



.fade-in {
	animation: fadeIn ease 1s;
}

/* Misc */
h1 {
	color: rgb(20, 20, 20);
	font-size: 36px;
	text-align: left;
}

h2 {
	color: rgb(20, 20, 20);
	text-align: center;
	font-weight: normal;
}

#inline_link {
	text-decoration: underline;
	color: rgb(40, 40, 40);
	margin: 0;
}

#inline_link:hover {
	font-style: italic;
}



p {
	color: rgb(40, 40, 40);
	font-size: 18px;
	text-align: left;
}

/* Title animation */

.title_container h1 {
	white-space: nowrap;
	padding-right: 10px;
	padding-bottom: 0px;
	padding-top: 0px;
	margin-top: 20px;
	text-align: left;
	margin-left: 0px;
}

@keyframes titleFade2 {
	0% {
		opacity: 0;
	} 50% {
		opacity: 0;
	} 100% {
		opacity: 1;
	}
}

/* Footer Stuff */
.content {
	flex: 1 1 auto;
	margin-left: 50px;
}

.footer {
	position: absolute;
	bottom: 0;
	text-align: center;
	width: 100%;
	margin-bottom: 10px;
}

.footer p {
	font-size: 12px;
	font-style: italic;
}

.footer a {
	text-decoration: none;
	font-size: 12px;
	font-style: italic;
	color: rgb(40, 40, 40);
	padding: 4px;
}

.footer a:hover {
	text-decoration: underline;
}

/* Header Stuff */
.header ul {
	list-style-type: none;
	padding: 0;
	display: table;
	margin: 0 auto;
}

.header li {
	display: inline;
	float: left;
}

.header a {
	display: block;
	color: #42454a;
	padding: 38px;
	font-size: 30px;
	text-decoration: none;
	text-align: center;
	padding-bottom: 5px;
}

/* Generic link animation (applies to nav links using .link_animation anywhere) */
.link_animation {
	position: relative;
}
.link_animation::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 2px;
	bottom: 0;
	left: 0;
	background-color: #42454a;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.28s cubic-bezier(.2,.9,.2,1);
}
.link_animation:hover::before,
.link_animation:focus::before {
	transform: scaleX(1);
}

/* Left sidebar navigation (fixed) */
.sidebar {
	position: fixed;
	left: 0;
	top: 0;
	width: 240px;
	height: 100vh;
	padding-top: 10px;
	background: rgba(255,255,255,0.02);
	border-right: 1px solid rgba(0,0,0,0.06);
	z-index: 1000;
}
.sidebar ul {
	list-style: none;
	margin: 0;
	padding: 8px 12px;
}
.submenu li a {
	margin-right: 20px;
}
.sidebar li { 
	margin-bottom: 6px; 
	text-align: right;
}
.sidebar img {
	margin-right: 10px;
	margin-bottom: 20px;
}
.sidebar a, .sidebar .toggle {
	color: rgb(40, 40, 40);
	background: none;
	border: none;
	font-size: 18px;
	display: inline-block;
	padding: 8px 10px;
	text-decoration: none;
	cursor: pointer;
}
.sidebar .submenu {
	padding-left: 12px;
	margin-top: 6px;
	display: none;
}
.sidebar .has-children.open > .submenu { display: block; }

@media (max-width: 700px) {
	.sidebar { position: static; width: 100%; height: auto; border-right: none; padding-top: 8px; }
	body { padding-left: 0; }
}

/* Tree connector lines: vertical spine from the toggle down the submenu
   and horizontal connectors that reach the right edge of each submenu item.
   These are purely decorative and scoped to .sidebar so they won't affect
   other components. */
.sidebar .has-children { position: relative; }
.sidebar .has-children::after {
	content: "";
	position: absolute;
	left: 205px; /* aligns roughly with submenu start */
	top: 44px;  /* starts below the toggle */
	bottom: 31px; /* extends to near the last submenu item */
	width: 2px;
	background: rgba(66, 69, 74, 0.12);
	pointer-events: none;
}
.sidebar .submenu li { position: relative; }
.sidebar .submenu li::before {
	content: "";
	position: absolute;
	left: 170px; /* connect from vertical spine */
	right: 0;   /* extend to the right edge of the submenu item */
	top: 50%;
	transform: translateY(-50%);
	height: 2px;
	background: rgba(66, 69, 74, 0.12);
	pointer-events: none;
}

/* Resume formatting */
.resume_format {
	margin-left: 50px;
	margin-right: 300px;
	padding: 10px;
	text-align: left;
}

.resume_format h1 {
	color: rgb(40,40,40);
	font-size: 30px;
	text-align: left;
	margin-bottom: 5px;
}

.resume_format h2 {
	color: rgb(40,40,40);
	font-size: 22px;
	text-align: left;
	font-weight: bold;
	margin-bottom: 7px;
}

.resume_format h3 {
	color: rgb(40,40,40);
	font-size: 18px;
	font-weight: bold;
	text-align: left;
	margin-top: 0px;
	margin-bottom: 7px;
}

.resume_format p {
	color: rgb(40,40,40);
	font-size: 16px;
	text-align: left;
	margin-top: 10px;
    margin-bottom: 0px;
}

.resume_format ul {
	margin-top: 0px;
	margin-bottom: 20px;
}

.resume_format ul,
.resume_format li {
	margin-bottom: 1px;
}

.resume_format li {
	color: rgb(40,40,40);
	font-size: 16px;
	padding: 1px;
}

.resume_format a {
	font-style: normal;
	color: rgb(40,40,40);
	text-decoration: underline;
}

.resume_format hr {
    color:rgb(40,40,40);
    border-style: solid;
    margin: 0;
    margin-bottom: 10px;
}

#italic_p {
	font-style: italic;
}



/* Contact formatting */
.buttons {
	width: 100%;
	text-align: left;
	margin-top: 30px;
	margin-bottom: 50px;
	margin-left: 0px;
}

.buttons a {
	white-space: nowrap;
	text-align: center;
	display: inline-block;
	margin-left: 20px;
	margin-right:20px;
	transition: transform 0.5s ease-in-out;
}

.buttons a:hover {
	transform: translateY(-15px);
}

.buttons img {
	vertical-align: middle;
}

/* Project page formatting */
.project_body {
	text-align: left;
}

.project_body p, .project_body h3,.project_body h1 {
	text-align: left;
	display: block;
	margin-left: 50px;
	margin-right: 200px;
}

#equation {
	font-family: "Inconsolata", monospace;
	margin-left: 100px;
}

.project_body h2 {
	font-weight: bold;
	text-align: left;
	margin-left: 50px;
}

.project_body img {
	margin-top: 20px;
	margin-left: 75px;
}

.project_body figcaption {
	font-style: italic;
	margin-top: 10px;
	margin-left: 75px;
	color: rgb(40,40,40);
}

.project_body a {
	display: inline;
	padding: 0;
	font-size: 18px;
	font-weight: normal;
	font-style: normal;
	text-decoration: underline;
	margin-left: 50px;
	color: rgb(40,40,40);
}

.project_body ul {
	margin-left: 50px;
}

.proj_button a {
	margin-left: 100px;
}

.proj_button img {
	margin: 0;
}

#return_link {
	font-size: 24px;
	font-weight: bold;
	color: black;
	text-decoration: underline;
	text-align: center;
}

/* Project page entries */

#project_entry_link {
	width: 500px;
	height: 269px;
	padding: 0;
	margin: 10px;
}

.project_entry_i_wrapper {
    width: 500px;
    height: 269px;
    overflow: hidden;
    position: relative;
}

.project_entry_i {
	filter: none;
	background-size: cover;
	width: 500px;
	height: 269px;
	transition: 0.4s ease-in;
}

.project_entry_i_wrapper:hover .project_entry_i {
	filter: blur(2px) opacity(30%);
	transition: 0.4s ease-in;
}

.project_entry_i_wrapper {
	position: relative;
	width: 500px;
	height: 269px;
	overflow: hidden;
	border: 1px solid black;
	border-radius: 25px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin-bottom: 20px;
}

.project_entry_i_wrapper > h2 {
	display: none;
}

.project_entry_i_wrapper > p {
	display: none;
}

.project_entry_i_wrapper:hover > h2 {
	position: absolute;
    top: 0;
    display: block;
	animation: fadeIn 0.4s ease-in;
    color: black;
	font-weight: bold;
    z-index: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: 0.3s ease-in;
    margin:0;
	font-size: 30px;
	padding: 10px;
	padding-top: 40px;
}

.project_entry_i_wrapper:hover > p {
	position: absolute;
    top: 0;
    display: block;
	animation: fadeIn 0.4s ease-in;
    color: black;
    z-index: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: 0.3s ease-in;
    margin:0;
	padding: 10px;
	padding-top: 130px;
}

.projects_wrapper {
	position: relative;
	margin-top: 130px;
}



.text_content {
    width: 60%; 
    float: left;
	text-align: left;
}

.main_content p {
	text-align: left;
}

.title_container h1 {
	font-size: 38px;
	margin-bottom: 21px;
}