:root {
	--text-color: #333;
	--bkg-color: #fff;
	--heading-color: #5b9aad;
	--heading2-color: #fff;
	--heading2-shadow: #3b7384;
	--heading4-color: #17193F;
	--link-color: var(--text-color);
	--link-hover-color: #5B9AAD;
	--section1-gradient-start: #9ecbd8;
	--section1-gradient-end: #fff;
	--section2-gradient-start: #fff;
	--section2-gradient-end: #9ecbd8;
	--logo-bg: var(--bkg-color);
	--logo-img-size: 500px;
	--logoleft-img-size: 300px;
	--top-right-color: var(--text-color);
	--top-right-social-bg: #5b9aad;
	--top-right-social-color: #fff;
	--top-right-social-hover-bg: #fff;
	--top-right-social-hover-color: #5b9aad;
	--top-right-em-color: #5B9AAD;
	--webinvisible-display: none;
	--socials-margin: 0.5em 0;
	--portfolio-bg: #9ecbd8;
	--portfolio-link-color: #fff;
	--portfolio-link-hover-color: #bcd9e2;
	--portfolio-h3-link-color: #5b9aad;
	--portfolio-h3-link-hover-color: #fff;
	--portfolio-h3-link-shadow: none;
	--blurb-width: 40em;
	--project-width: 75em;
	--e-h3-shadow: #5b9aad;
	--e-h3-link-color: #fff;
	--e-h3-link-hover-color: #9ecbd8;
	--footer-font: normal 110%/160% 'Anaheim', monospace;
	--footer-width: 95%;
	--switch-btn-bg: #C5CCD3;
	--switch-btn-border: #BEC5CC;
	--switch-btn-border-checked: #2e3052;
	--switch-btn-bg-checked: #7635DC;
	--switch-label-bg: #f8f8f9;
	--switch-label-shadow: 0px 3px 5px 0px rgba(0,0,0,0.2);
	--icons-color: #17193F;
}

html {
	font: normal 100%/160% 'Roboto', sans-serif;
	padding: 0;
	margin: 0;
	color: var(--text-color);
	overflow-x: hidden;
}

body {
	background: var(--bkg-color);
	margin: 0;
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

* {
	margin: 0;
	padding: 0;
	font-family: "Montserrat", sans-serif;
	transition: all 0.2s ease;
	box-sizing: border-box;
}

h1 {
	font: normal 180% 'Roboto', sans-serif;
	text-transform: uppercase;
	text-align: center;
	letter-spacing: 11px;
	color: var(--heading-color);
	clear: both;
}

h2 {
	font: normal 330% 'Anaheim', sans-serif;
	text-transform: lowercase;
	text-align: center;
	color: var(--heading2-color);
	text-shadow: 0.1em 0.1em 0.1em var(--heading2-shadow);
}

h2 img {
	vertical-align: middle;
	max-height: 32px;
}

h3 {
	text-align: center;
}

h4 {
	color: var(--heading4-color);
	margin-bottom: 20px;
	text-align: center;
	font-weight: 600;
}

a:link,
a:visited {
	font-weight: bold;
	color: inherit;
}

a em{
		text-decoration-color: inherit;
}

a:hover,
a:active,
a:focus {
	text-decoration: none;
	color: var(--link-hover-color);
}

section {
	width: 100%;
	position: relative;
	clear: both;
	margin: 0;
	padding: 0;
}

section#transition1 {
	height: 50vh;
	background: linear-gradient(0deg, var(--section1-gradient-start) 0%, var(--section1-gradient-start) 40%, var(--section1-gradient-end) 100%);
}

section#transition2 {
	height: 50vh;
	background: linear-gradient(0deg, var(--section2-gradient-start) 0%, var(--section2-gradient-end) 40%, var(--section2-gradient-end) 100%);
}

#top {
	display: flex;
}

.logo {
	float: left;
	width: 40%;
	text-align: right;
}

.logo img {
	height: var(--logo-img-size);
	width: var(--logo-img-size);
	margin: 12vh 0;
}

#logoleft {
	float: left;
	text-align: center;
	width: 50%;
}

#logoleft img {
	width: var(--logoleft-img-size);
	height: var(--logoleft-img-size);
}

#top .right {
	width: 50%;
	text-align: left;
	margin: 20vh 1em 0;
	font: normal 230%/130% 'Roboto', sans-serif;
}

#top .right p {
	padding: 0.5em 0 0;
}

#top .right a.social:link,
#top .right a.social:visited {
	color: var(--top-right-social-color);
	background: var(--top-right-social-bg);
	padding: 10px 15px 5px;
	border-radius: 30px;
	font-size: 0.8em;
	display: inline-block;
	vertical-align: middle;
}

#top .right a.social:hover,
#top .right a.social:focus,
#top .right a.social:active {
	color: var(--top-right-social-hover-color);
	background: var(--top-right-social-hover-bg);
}

#top .right em {
	color: var(--top-right-em-color);
}

.webinvisible {
	display: var(--webinvisible-display);
}

#socials {
	margin: var(--socials-margin);
}

#portfolio {
	background: var(--portfolio-bg);
	min-height: 100vh;
	padding: 2em 0;
	overflow-y: visible;
}

#portfolio a:link,
#portfolio a:visited {
	color: var(--portfolio-link-color);
	text-decoration: none;
	font-weight: normal;
	text-shadow: 0.1em 0.1em 0.1em var(--heading2-shadow);
}

#portfolio a:hover,
#portfolio a:focus,
#portfolio a:active {
	color: var(--portfolio-link-hover-color);
}

#portfolio h3 a:link,
#portfolio h3 a:visited {
	text-shadow: var(--portfolio-h3-link-shadow) !important;
	color: var(--portfolio-h3-link-color) !important;
	letter-spacing: 6px;
	text-transform: uppercase;
}

#portfolio h3 a:hover,
#portfolio h3 a:focus,
#portfolio h3 a:active {
	color: var(--portfolio-h3-link-hover-color) !important;
}

p.blurb {
	width: var(--blurb-width);
	margin: 0 auto;
	text-align: center;
}

.project {
	margin: 2em auto 3em;
	width: var(--project-width);
}

#e {
	min-height: 100vh;
	padding: 2em 0;
}

#e .left {
	width: 45%;
	margin: 0 3% 0 5%;
	float: left;
}

#e .right {
	width: 40%;
	margin: 0 5% 0 2%;
	float: right;
}

#e h3 {
	margin: 2em 0;
	text-shadow: 0.1em 0.1em 0.1em var(--e-h3-shadow);
}

#e h3 a:link,
#e h3 a:visited {
	font: normal 150% 'Anaheim', monospace;
	letter-spacing: 3px;
	color: var(--e-h3-link-color);
	text-decoration: none;
}

#e h3 a:hover,
#e h3 a:focus,
#e h3 a:active {
	color: var(--e-h3-link-hover-color);
	text-shadow: none !important;
}

.rightlist {
	float: left;
}

footer {
	margin: 0em auto;
	text-align: center;
	font: var(--footer-font);
	width: var(--footer-width);
	text-transform: lowercase;
	color: #666;
}

/* Switch Button Styles */
input[type="checkbox"] {
	display: none;
}

.switch-btn {
	width: 100px;
	height: 30px;
	background-color: var(--switch-btn-bg);
	border: 4px solid var(--switch-btn-border);
	border-radius: 30px;
	padding: 6px;
}

label {
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--switch-label-bg);
	border-radius: 30px;
	overflow: hidden;
	cursor: pointer;
}

.icons {
	display: flex;
	align-items: center;
	gap: 20px;
	transform: translate(-11px, 19px) rotate(120deg);
	user-select: none;
	color: var(--icons-color);
}

input[type="checkbox"]:checked ~ .switch-btn {
	border: 4px solid var(--switch-btn-border-checked);
	background-color: var(--switch-btn-bg-checked);
}

input[type="checkbox"]:checked ~ .switch-btn label {
	transform: translateX(calc(100px - 30px));
	box-shadow: var(--switch-label-shadow);
}

input[type="checkbox"]:checked ~ .switch-btn label .icons {
	transform: translateX(-20px);
}

/* Responsive Styles */
@media only screen and (max-width: 1170px) {
	html {
		-webkit-text-size-adjust: none;
	}

#top{
	display: block;
}

#top .right a.social:link,
#top .right a.social:visited{
	padding: 10px 15px 7.5px;
}

	.logo img {
		height: 200px;
		width: 200px;
		margin: 2vh 0;
	}

	.logo {
		text-align: center;
		float: none;
		width: auto;
	}

	#top .right {
		float: none;
		width: auto;
		text-align: left;
		margin: 2vh 1em;
		font: normal 150%/130% 'Roboto', sans-serif;
	}

	#socials {
		text-align: right;
		font-size: 150%;
	}

	.mobileinvisible {
		display: none;
	}

	.webinvisible {
		display: block;
		text-align: right;
	}

	.project {
		width: auto;
	}

	p.blurb {
		text-align: center;
		font-size: 90%;
		width: 80%;
	}

	h2 {
		font-size: 180%;
	}

	h3 {
		font-size: 90%;
	}

	#e .left,
	#e .right {
		float: none;
		margin: 0 auto;
		width: 95%;
	}

	#logoleft {
		display: none;
	}

	.rightlist {
		float: none;
	}
}