html {
	height: 100vh;
}

body {
	display: flex;
	flex-flow: column nowrap;
	font-family: 'Signika Negative';

	height: 100vh;
	background-color: rgb(209, 209, 209);
}

* {box-sizing: border-box;}

p {
	padding: 0;
	margin: 0;
}

.navybg {
	background-color: #011147;
}

.header-nav {
	height: auto;
}

.header {
	display:flex;
	flex-wrap: wrap;
}

.nameplate {
	width: 15em;
	
	/* This calc centers the text */
	/* Adjust the 5.7 value to center per*/
	margin-left: calc(50% - 6.6em);
}

.social-links {
	margin-left: auto;
	margin-right: auto;
}

#nameplate {
	font-variant: small-caps;
	font-size: 2.5rem;
}

.nav-images {
	vertical-align: middle;
	
	height: 40px;
	width: 40px;
}

.gitlab-image {
	vertical-align: middle;
	
	height: 60px;
	width: 60px;

	margin-left: -25%;
}

input, textarea {color: white;}

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

footer {
	width: 100%;
	
	color: white;
}

.title {
	display: flex;
	justify-content: center;
	
	font-size: 250%;
	font-variant-caps: small-caps;
	
	width: 100%;

	margin-bottom: -5px;
}

/* * * * * * *
 * INDEX CSS *
 * * * * * * */

.index-page-links {
	display: flex;
	justify-content: space-evenly;
	flex-flow: row wrap;
	
	height: auto;
	width: 100%;

	margin-top: auto;
}

.page-link {
	background-color: #011147;
 	
	font-size: 150%;
 	
	margin-top: 0.5em;
	margin-left: 75px;
 	margin-right: 75px;

	padding: 0.2em 0.5em;

	box-shadow: 2px 2px 5px;
	border-radius: 3px;
}

.link-text {
	text-align: center;

	padding-right: 0.5em;
	padding-left: 0.5em;
}

.link-text:link, .link-text:visited, .link-text:hover, .link-text:active {
	color: white;
}

.about-me {
	display: flex;
	flex-flow: column nowrap;
	
	width: 100%;
}

#about-me-title {
	font-size: 225%;
	text-align: center;
	font-weight: bold;
}

.text-box {
	font-size: 150%;
	color: white;
	background-color: #011147;

	padding: 1em;

	box-shadow: 2px 2px 5px black;
	border-radius: 3px;
	border: 2px solid white;
}

#about-me-container2 {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
}

.developer {
	font-size: 175%;
	font-weight: bold;
}

.about-text {
	text-align: center;
	
	width: 40em;

	margin: 2em;
	margin-top: 0;
}

.empty-div {
	flex: 1 1 auto;

	width: 100%;
}

/* * * * * * * *
 * GALLERY CSS *
 * * * * * * * */

/* FlexBox that holds the galleries */
.galleries {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-flow: row wrap;
	

	width: 100%;

	margin-top: -1em;
}

.galleries a {
	display: flex;
	justify-content: center;

	width: 75%;
	max-width: 600px;
	
	margin-top: 50px;
	margin-right: 50px;
	margin-left: 50px;
	margin-bottom: 50px;
}

.galleries img {
	max-width: 100%;

	box-shadow: 0 0 0 25px #011147;

	image-orientation: flip;
}

/* Each individual gallery */
.gallery {
	display: flex;
	align-items: center;
	flex-direction: column;
	
	width: 600px; 
	
	color: white; 

	line-height: 1.5em;
}


.imageProps {
	height: auto;
	width: 100%;
}

.gallery-images {
	display: flex;
	align-items: center;
	flex-direction: column;
	
	max-height: 420px;
	width: 600px; 
	overflow: hidden;

	background-color: #011147; 
	color: white; 
	
	margin: 30px; 
	padding: 1.25em;
	
	box-shadow: 2px 2px 5px black;

}

/* * * * * * * * *
 *  PROJECTS CSS *
 * * * * * * * * */

.project-box {
	display: flex;
	flex-flow: column nowrap;
	align-items: center;

	height: auto;
	width: 100%;
}

.project-card:first-child {
	margin-top: 0.5em;
}

.project-card {
	display: flex;
	flex-flow: column nowrap;
	align-items: center;

	width: 50%;

	margin-bottom: 1.5em;

	color: white;

	background-color: #011147;
	box-shadow: 2px 2px 5px black;
	border-radius: 3px;
	border: 2px solid white;
}

.project-description {
	width: 90%;

	padding-bottom: 1.5em;

	color: white;	
}

.desc-text {
	font-size: 150%;
}

.project-link-box {
	display: flex;
	align-content: center;
	justify-content: center;
	align-items: center;

	height: 40px;
	width: 125px;

	margin-bottom: 1.7em;

	border: 2px solid white;
	background-color: #011147;
}

.project-link {
	color: white;

	padding-bottom: 1px;
}

#deprecated {
	text-align: center;

	font-size: 150%;

	color: #b90000;
}

.logos {
	display: flex;
	flex-direction: row;
	justify-content: space-around;

	height: 40px;
	width: 60%;

	margin-bottom: 1em;
}

#koa {
	height: 40px;	
}

#njk {
	height:40px;
}

#njs {
	height:40px;
}

#axi {
	height: 40px;
}