html, body {height:100%}

body {
	font-family:sans-serif; /* set the default font for the entire site */
	background-color: white;
	display: flex;
	flex-direction: column;
    text-align: center;
	}

img {
    max-width:100%;
    vertical-align: bottom;
    }

.bold {font-weight:bold;}
.italics {font-style:italic;}
.clearfix {clear:both;}

a:visited {color:gray;}
a:hover {color:white;}
a:active {color:white;}

.logo 
	{
    align-self: center;
    max-width: 464px;
    padding-top: 20px;
    padding-left: 10%;
    padding-right: 10%;
    }
        .logo a:hover{
        background-color:white;
            }

ul {
	list-style-type:none;
	display:flex; 
	flex-direction:column;
    padding-left: 0;
    
	}

li a {
	color: gray;
    display:block;
    font-family: 'Exo', sans-serif;
    font-weight: 700;
    font-size:25px;
    text-decoration:none;
	}
a:hover{
    color:white;
    text-decoration: underline;
    background-color:black;
    }

a:link {
    color:gray;
    }

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    border-style: solid;
    border-color: gainsboro;
    background-color: white;
    z-index: 1;
    display: none;
    position: absolute;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: gray;
    font-size:20px;
    font-weight: 400;
    padding-left: 20px;
    text-align: left;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: black; color: white;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: black;
    color: white;
}

.slide{
    max-height:600px;
    margin: auto;
    align-content: center;
    }

.vertflex {
        flex-direction: column;
        flex-basis: 0 auto;
        align-content: center;
}

.centerinfo {
            display: block;
            font-family: 'Libre Franklin', sans-serif;
            font-size: 12pt;
            margin-left: auto;
            margin-right: auto;
            margin-top: 10px;
            margin-bottom: 10px;
            max-width: 700px;
            text-indent: 30px;
            width: 90%;
            color:black;
        }

.about {
    flex-direction: row;
    
}
.container {
	padding-bottom:3em;
	max-width:1000px;
	}

.content {flex: 1 0 auto;}

.works{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
        
}

figure img {
    max-width: 100%;
    max-height: 100%
    }

figure {
    max-width: 40%;
    max-height: 400px;
    padding: 10px;
    display:inline-block;
    }

figure a:hover {
    background:white;
    }

.workslabel{
    margin-top: -0px;
    color: gray;
    display:block;
    font-family: 'Exo', sans-serif;
    font-weight: 400;
    font-size:25px;
    text-decoration:none;
    }

h2{
    font-size: 17px;
}

.art{
    max-height: 1000px
}

.bio{
    text-align: left;
    text-indent: 40px;
	padding-left:1em;
    padding-right:1em;
    padding-bottom:1em;
	margin:0 auto;
	}

.thesis{
    text-align: left;
    text-indent: 40px;
	padding-left:1em;
    padding-right:1em;
    padding-bottom:1em;
	margin:0 auto;
    width: 400px;
}
.portrait{
    margin-bottom: 30px;
    max-width: 70%;
    max-height: ;
    }

.box {
	background-color:white;
	padding:1em;
	}
	
.contact {text-align:center;}

footer {
	background-color:black;
	padding:1em;
	flex-shrink:0;
	}
iframe {
    width: 400px;
    height: 225px;
}

/* ===========Mobile First Method media queries============= */

/* all your CSS before your media queries will style your site when the viewpoint is less than your first break point - in this example that means 767px wide and smaller */

/*small devices and tablets */
@media only screen and (min-width: 600px) {
    header {
        text-align: center;
        }
    .logo {
        display:inline-block;
        min-width: 464px;
        
        }
    nav ul {
		flex-direction:row; 
		justify-content:center; 
		} 
	nav li {
		flex: 1 0 auto;
		}
    .dropdown-content a {
        text-align: left;
        padding: 12px 16px;
        }
	.wrap {
		width:100%;
		max-width:1000px;
		margin:0 auto;
		}
	.container {
		width:80%;
		max-width:1200px;
		margin:0 auto;
		}
	.grid {
		display:flex;
		flex-wrap:wrap;
		}
    figure {
    margin-top: 50px;
    }
    iframe {
    width: 560px;
    height: 315px;
    }
    .thesis {
    width: 560px;
    }
}

@media only screen and (min-width: 713px) {
/*bio stacking fix*/
    .portrait {
    width: 46.5%;
    float: left;
    padding-left: 30px;
	}
    .bio{
    max-width: 40%;
    float: right;
	}
}
@media only screen and (min-width: 1050px) {
	header {
		display:flex;
		justify-content:space-between;
		}
    .logo {
        max-width: 464px;
        padding-bottom: 20px;
        padding-left: 0;
    }
    nav ul a{
        padding: 29px;
    }
    nav ul{
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .portrait {
    padding: 0;
	}
    iframe {
    width: 800px;
    height: 450px;
    }
    .thesis {
    width: 800px;
    }
}