@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/*
This file links both to the index page and the portfolio page, and
going to be divided into three sections; Common, Home, and Portfolio.
*/


/* Common */

html {
	background-color: #000b31;
	height: 100%;
}

body {
	min-width: 650px;
	max-width: 1100px;
	margin: 0px auto;
	background-color: rgb(171,201,255);	
	width: 100%;
	font-family: Roboto, sans-serif;
}

header {
	display: flex;
	flex-flow: row wrap;
	background-color: rgb(0,79,163);
	font-size: 25px;
	border: solid 3px black;
	
}

header img {
	width: 7.5%;
}

header h3 {
	font-size: 1.5em;
}

header ul, header h3 {
	margin-top: 50px;
}

header img, header h3 {
	margin-left: 30px;
}

nav > ul {
	display: flex;
	flex-flow: row nowrap;
}

nav > ul li {
	list-style: none;
	font-size: 20px;
	padding: 5px;
	border: solid 4px rgb(87,87,136);
	margin: 0px 10px;
	background-color: rgb(128,128,128);
}

nav a:link, nav a:visited {
	color: black;
	text-decoration: none;
	opacity: 0.55;
}

nav a:hover, nav a:active {
	font-size: 25px;
	color: white;
}

nav > ul li:hover {
	color: white;
	background-color: rgb(10,10,10);
	border-color: rgb(50,50,50);
}

footer {
	background-color: rgb(103,124,177);
	display: flex;
	flex-flow: row no wrap;
}

footer section {
	flex: 1 3 210px;
	margin: 25px;
}

footer > section ul {
	list-style: none;
}

footer p {
	font-size: 18px;
}

section.nav {
	text-align: left;
	padding: 5px;
	border: 8px double blue;
}

section.nav p {
	letter-spacing: 3px;
}

section.nav b {
	letter-spacing: 0px;
}

section.nav a:link, section.nav a:visited {
	color: purple;
	text-decoration: none;
}

section.nav a:hover, section.nav a:active {
	color: red;
	font-weight: bold;
	font-size: 18px;
}

section.contact {
	text-align: center;
	padding: 5px;
	border: 4px dotted blue;
}

section.social {
	text-align: right;
	padding: 5px;
	border: 4px solid blue;
}

/* Home */

section.home {
	margin: 0px 15px;
}

section.home img {
	margin: 25px 75px;
}

section.home#images {
	background: url(xcode2.png) bottom right / 10% no-repeat;
	perspective: 300px;
}

img#xcode {
	transform: rotateZ(45deg);
}

img#java {
	transform: rotateX(15deg);
}

/* Portfolio */

section.portfolio {
	margin: 15px;
}

section.inner {
	display: flex;
	flex: 2 1 600px;
}

section.inner article {
	margin: 10px auto;
	max-width: 525px;
	background-color: teal;
	border: 4px solid navy;
	border-radius: 25px;
	filter: drop-shadow(10px 10px 15px black);
}

section.inner article * {
	margin: 7px 5px;
}

section.inner img {
	max-width: 450px;
}



/*Mobile Device Styles */

@media only screen and (max-width: 450px) {
	/*home*/
	section.home {
		font-size: 1.25em;
	}
	
	section.home img {
		display: block;
		margin: 25px auto;
	}
	
	/*Portfolio*/
	section.inner {
		display: block;
	}
	
	section.inner article {
		font-size: 1.25em;
		margin: 25px;
	}
	
	section.inner img {
		max-width: 250px;
	}
	
	section.portfolio h2 {
		font-size: 2em;
		text-align: center;
		margin-top: 55px;
	}
	
	/*Common*/
	body {
		max-width: 550px;
		min-width: 300px;
	}
	
	nav > ul {
	display: flex;
	flex-flow: row wrap;
	margin: 10px;
	} 
	
	nav > ul > li {
	margin: 5px;
	} 
	
	nav > ul > li:nth-of-type(4) {
		display: none;
	} 
	
	header img {
		display: none;
	}
	
	footer {
		display: block;
	}
	
}