@charset "utf-8";

@viewport {
	width: device-width;
	zoom: 1.0;
}

/* from https://www.w3schools.com/ */
.navbar {
	overflow: hidden;
	background-color: #000000;
	font-family: 'source-code-pro';
}

.navbar a {
	float: right;
	font-size: 1vw;
	color: white;
	text-align: center;
	padding: 1vw 2vw;
	text-decoration: none;
	margin: 0;
}

.subnav {
	float: right;
	overflow: hidden;
}

.subnav .subnavbtn {
	font-size: 1vw;
	border: none;
	outline: none;
	color: white;
	padding: 1vw 2vw;
	background-color: inherit;
	font-family: 'source-code-pro';
	margin: 0;
}

.navbar a:hover,
.subnav:hover .subnavbtn {
	background-color: #F23827;
}

.subnav-content {
	display: none;
	position: absolute;
	left: 0;
	background-color: #F23827;
	width: 100%;
	z-index: 1;
}

.subnav-content a {
	float: right;
	text-decoration: none;
}

.subnav-content a:hover {
	background-color: #D7D8D9;
	color: black;
}

.subnav:hover .subnav-content {
	display: block;
}

/* from https://www.w3schools.com/ */

* {
	box-sizing: border-box;
}

body {
	font-family: 'source-code-pro';
	font-size: 1.5vw;
	text-align: left;
	background-color: #D7D8D9;
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}


h1 {
	font-family: 'eurostile-extended';
	text-align: center;
	font-weight: 500;
	font-style: normal;
	font-size: 2vw;
	color: black;
	padding-top: 1vw;
}

h2 {
	font-family: 'eurostile-extended';
	text-align: center;
	font-weight: 500;
	font-style: normal;
	font-size: 1.5vw;
	color: black;
}

.landing-img-container {
	width: device-width;
}

.landing-svg-container {
	position: absolute;
	width: 44vw;
	top: 3.5vw;
	left: 0vw;
	vertical-align: left;
}

.about-me-container {
	column-count: 2;
	padding-bottom: 2vw;
}

.about-me {
	text-align: left;
	vertical-align: left;
	width: 45vw;
	padding: 0 6vw 4vw;

}

.portrait-container {
	position: relative;
	vertical-align: right;
	width: 45vw;
}

.portrait {
	text-align: center;
	position: absolute;
	width: 40vw;
	top: 1.5vw;
	left: 1vw;
}

.squiggle {
	text-align: center;
	position: absolute;
	width: 40vw;
	top: 0vw;
	left: 0vw;
}

.accent-color {
	border: 2px black;
	border-style: solid none;
	background-color: #F2CB05;
}

.row {
	display: flex;
}

.column {
	flex: 32%;
	padding: 0 3.5vw 3vw;
}

.child {
	flex: 40%;
	padding: 3vw 3.5vw 3vw;
	justify-content: center;
}

.socials {
	display: block;	
	text-align: center;
}

/* from https://www.w3schools.com/ */
.row:after {
	content: "";
	display: table;
	clear: both;
}


.text-box {
	background-color: white;
	border-radius: 15px;
	text-align: center;
	margin: 2vw 2vw;
}

.medium {
	width: 30vw;
	padding: 0.5vw;
}

.large {
	width: 90vw;
	padding: 0.5vw;
	display: block;
  	margin-left: auto;
  	margin-right: auto;
}

.iframe-container{
	width:100%;
    float:left;
    text-align:center;
}

.responsive-iframe{
	background-color: transparent;
	width: 700px;
	height: 393px;
	margin: 0 auto;
}

.vimeo-container{
	width:65vw;
	display: block;
	text-align: center;
	padding: 2vw;
	margin: 0 auto;
}

.links:link {
	color: black;
	text-decoration: none;
	padding-right: 10px;
	padding-bottom: 20px;
}


.links:visited {
	color: black;
	text-decoration: none;
}


.links:hover {
	text-decoration: none;
}


.links:active {
	text-decoration: none;
}

footer {
	border-top: 2px black;
	border-style: solid none;
	font-family: 'source-code-pro';
	font-size: 1vw;
	color: black;
	padding-left: 2vw;
	padding-top: 1px;
	padding-bottom: 1px;
	width: device-width;
	text-align: left;
	background-color: #F2CB05;
	background-position: center;
	background-size: cover;
	}

	@media screen and (max-width:700px) {
		@media screen and (orientation:portrait) {

			body {
				font-size: 2.5vw;
			}

			h1 {
				font-size: 3vw;
			}

			h2 {
				font-size: 2.5vw;
			}

			.landing-svg-container {
				top: 5.5vw;
			}

			.about-me-container {
				column-count: 1;
				padding-bottom: 2vw;
			}

			.about-me {
				text-align: left;
				vertical-align: center;
				width: 100%;
				padding: 0 10vw 4vw;

			}

			.portrait-container {
				position: relative;
				vertical-align: center;
				width: 100%;
			}

			.portrait {
				vertical-align: center;
				position: absolute;
				width: 60vw;
				left: 20vw;
			}

			.squiggle {
				vertical-align: center;
				position: absolute;
				width: 60vw;
				left: 19vw;
			}


			.row {
				display: block;
			}

			.column {
				width: 100%;
				padding: 0 10vw 3vw;
			}

			.child {
				width: 100%;
			}

			.medium {
				width: 70vw;
				padding: 0.5vw;
			}

			.responsive-iframe{
				background-color: transparent;
				width:360px;
				height:200px;
				margin: 0 auto;
			}

			footer {
				font-size: 2vw;
			}

			.navbar a {
				font-size: 2.5vw;
			}

			.subnav .subnavbtn {
				font-size: 2.5vw;
			}
		}
	}

	@media screen and (max-width:400px) {
		@media screen and (orientation:portrait) {

			.responsive-iframe{
				background-color: transparent;
				width:250px;
				height:140px;
				margin: 0 auto;
			}

		}
	}