/* James Boussounis - Portfolio */


body
{
	background-color:rgba(8, 8, 16, 0.94);
	background-image: url('images/lines.png');
	margin:0;
	
}

#header
{
	position:fixed;
	z-index:1;
	width:100%;
	font-family: Gill sans, sans-serif;
	font-weight: 900;
	font-size: 3em;
	color: white;
	text-shadow: 0.08em 0.07em 0.04em rgba(68, 0, 229, 0.8);
	margin-top:0;
	margin-bottom:0;
	padding-left: 0.2em;
	background-color: rgb(22, 27, 36);
	padding-top:0.1em;
	padding-bottom:0.4em;
	
}

#navbar
{
	position:fixed;
	z-index:1;
	width:100%;
	top:5.7em;
	display:flex;
	justify-content: space-between;
	background-color: #A5A4FF;
	font-family: Cascadia Mono, sans-serif, monospace;
	text-shadow: 0.1em 0.1em 0.25em rgba(68, 0, 229, 0.8);
	color: white;


}

#navpage
{
	display:inline-block;
	font-size:1.5em;
	line-height:0.1em;
	margin-left:1em;

}
#nav ul
{
	text-align: right;
	margin-left: 1.5em;
	margin-right: 1.5em;
	
}
#nav li
{
	display: inline;
	font-size:1em;
	color: #FFF4F0;
	
}
#nav a
{
	display:inline-block;
	line-height: 2em;
	color: white;
	text-decoration: none;
	margin-left:1.5em;
	margin-right:1.5em;
	
}


#maincontainer
{
	display: flex;
	padding-top:10em;

}

#photo
{
	flex:2;
	margin-top:2em;
	margin-left:2em;
	width:30em;
	
}

.photo
{
	width:25em;
	height:auto;
	border: 0.1em solid #353D4B;
	
}

#main
{
	flex:3;
	text-align: left;
	opacity: 1;
	color: #FFF4F0;
	margin-top:4em;
	margin-left:3em;
	margin-right:1em;
	text-shadow: 0.2em 0.2em 0.5em black;
	
}


#welcome
{
	font-family: Bahnschrift Light, sans-serif;
	font-size:4em;

}

h2
{
	font-family: Courier New, monospace, sans-serif;
	font-weight: bold;
	font-style: italic;
	font-size:2em;

}

p
{
	font-family: Courier New, monospace, sans-serif;
	font-size:1em;
	
}

button
{
	background-color: rgba(68, 0, 229, 0.92);
	color: rgba(255, 255, 255, 0.95);
	text-decoration: underline;
	font-family: Gill sans, sans-serif;
	font-size:0.8em;
	border-radius: 1em;
	border: none;
	width: 10em;
	height: 2em;
	box-shadow: 0.1em 0.2em rgba(255, 255, 255, 0.8);
	
}
button:hover
{
	background-color: #A5A4FF;

}
button:active
{
	background-color: #A5A4FF;
	box-shadow: 0.1em 0.2em white;
	transform: translateY(0.1em);

}


.socialicons
{
	color: inherit;
	font-size: 2em;
	margin-right:1em;
}

.email
{
	color: inherit;
	font-size: 1.1em;
	font-family: Bookman Old Style, serif;
	
}

form
{
	background-color: rgba(40, 40, 80, 0.90);
	border: 0.4em solid rgba(68, 0, 229, 0.92);
	border-radius:0.4em;
	color:white;
	max-width: 50em;
	margin: auto;
	margin-top: 5em;
	padding-left: 1em;
	padding-right: 1em;
	padding-bottom: 1em;
	font-family: arial, sans serif;

	
}

textarea
{
	height: 4em;
	min-height:4em;
	max-height: 20em;
	width: 100%;
	resize:vertical;

}

#starRating
{
	display:flex;
	flex-direction:row-reverse;
	justify-content: left;
}
#starRating input
{
	display:none;
	
}
#starRating label
{
	color:grey;
	font-size:2em;
	cursor: pointer;
	
}
#starRating input:checked ~ label, #starRating label:hover, #starRating label:hover ~ label
{
	color: white;
	text-shadow: 0.1em 0.1em 0.25em rgba(68, 0, 229, 0.8);

}

#submitButton
{
	text-decoration: none;
	font-size: 1em;
	
}


footer
{
	background-color: #8F8AE0;
	color:white;
	text-shadow: 0.1em 0.1em 0.25em rgba(68, 0, 229, 0.8);
	margin-top: 3em;
	padding: 1em;
	
}

#gallery_header
{
	margin-left:1em;
	color: #FFF4F0;
	font-family: Bahnschrift Light, sans serif;
	font-size:4em;
	text-shadow: 0.2em 0.2em 0.5em black;
	
}

#aboutcontainer
{
	display:flex;
	padding-top:12em;
	
}

#portrait
{
	flex:1;
	
}
.portrait
{
	max-width:20em;
	margin-left: 2em;
	border: 0.1em solid #353D4B;

	
}
#about
{
	flex:2;
	color: white;
	font-family: Courier New, monospace, sans-serif;
	text-shadow: 0.2em 0.2em 0.5em black;
	margin-right:5em;
	background-color: rgba(22, 27, 36, 0.6);

}

#gallery
{
	text-align:center;
	
}
.row1
{
	height:22em;
	width:auto;
	margin:0.5em;
	border:0.4em solid rgba(68, 0, 229, 0.92);
	
}
.row1:hover, .row2:hover, .row3:hover
{
	transform:scale(1.05);
	cursor:pointer;
	
}
.row2
{
	height:19.3em;
	width:auto;
	margin:0.5em;
	border:0.4em solid rgba(68, 0, 229, 0.92);
	
}
.row3
{
	height:20.08em;
	width:auto;
	margin:0.5em;
	border:0.4em solid rgba(68, 0, 229, 0.92);
	
}

img
{
	color:white;
	
}

#feedback
{
	padding-top:10em;
	margin-left:1em;
	color: #FFF4F0;
	font-family: Bahnschrift Light, sans serif;

}
#feedbackHeader
{
	font-size:4em;
	text-shadow: 0.2em 0.2em 0.5em black;	
	display: inline-block;
	
}
#formConsistency
{
	font-family: arial, sans serif;
	background-color: rgba(40, 40, 80, 0.90);
	border: 0.4em solid rgba(68, 0, 229, 0.92);
	border-radius:0.4em;
	padding: 1em 2em;
	min-width:30em;
	max-width: 50em;
	margin:auto;
	width: fit-content;
	word-wrap: break-word;
	overflow-wrap: break-word;
	box-sizing: border-box;
	
}
#feedbackCategory
{
	display: inline-block;
	
}
#feedbackGiven
{
	margin-left:1em;
	font-size:1em;
	display: inline-block;
	
}
#backToHome
{
	color: rgba(255, 255, 255, 0.95);
	font-family: Gill sans, sans-serif;
	font-size:0.9em;
	width:12em;
	
}
.backToHome
{
	color: rgba(255, 255, 255, 0.95);
	
}

#future
{
	padding-top:11em;
	
}

#futureContainer
{
	display:flex;
	padding-top:12em;
	margin-left: 2em;
	margin-right:1em;

	
}
#gridContainer
{
	position:relative;

}
#futureGrid
{
	flex:2;
	
}
.teamMeetingPic
{
	width:20em;
	height:auto;
	position:relative;
	
}
.codePic
{
	width:23em;
	height:auto;
	position:absolute;
	top:10em;
	left:6em;
	z-index:-1;
	
}
.langPic
{
	width:15em;
	position:absolute;
	height:auto;
	top:18.5em;
	left:3em;
	z-index:-2;
	
}
.deskPic
{
	width:20em;
	height:auto;
	position:absolute;
	top:27em;
	left:6em;
	z-index:-1;
	
}
.teamMeetingPic, .codePic, .langPic, .deskPic
{		
	border: 0.1em solid #353D4B;

}
#futurePlans
{
	margin-left:2em;
	flex:3;
	color:white;
	background-color: rgba(22, 27, 36, 0.6);
	
}
#futureHeader
{
	color: #FFF4F0;
	font-family: Bahnschrift Light, sans serif;
	font-size:3em;
	text-shadow: 0.2em 0.2em 0.5em black;
	
}
#futureTopics
{
	font-size:1.8em;
	
}

#languageRows
{
	display:flex;
	
}
.languagePic
{
	max-width:8em;
	flex:33.33%;
	margin:0.1em;
	border: 0.1em solid #353D4B;

	
}
.languagePicSingle
{
	max-width:8em;
	flex:33.33%;
	margin:0.1em;
	border: 0.1em solid #353D4B;

	
}
#photosFlex
{
	flex:2;
	display: flex;
    flex-direction: column;
}
#languages
{
	margin-top:-2em;
	margin-left:3em;
	
}
.goalsList
{
	font-family: Courier New, monospace, sans-serif;
	font-size:1em;
	
}