/* ####### color pallet:
#2D5355; /*blu-green dark
#343C49;/*ashy blue dark
#A2616B; /*ashy pink
#C0AAB0; /*very light purple
#369E55; /*light green
#6F8F88; /*light ashy blue
#766875;/*dark lighter purple ashy(for footer)*/

html{
	margin: 0;
	padding: 0;
	border:0;
}

body{
	background-color: #2D5355; /*blu-green dark*/
	/*background-image: url("img/background10.jpg");*/

	margin: 0;
	padding:0;
	border:0;
	color: #343C49;/*ashy blue dark*/
}



/*this is there to give everything a centered look*/
.all-content{ 
	flex-grow: 1;
	margin-left: 4%;
	margin-right: 4%;
	box-shadow: 1px 1px 50px black;
}

p{
	padding: 0px;
	margin: 0px;
}

a{
	font-size: 1.5em;
	text-decoration: none;
}

/*
#################################################
Header Stuff
#################################################
*/
header {
	/*background: yellow;*/
	background-image: url("img/header11.jpg");
	height:50px;
	max-height: 950px;
	/*padding-top:50px;*/
	/*display: flex;
	justify-content: space-around;
	overflow: hidden;*/
}

h1{
	color: #C0AAB0; /*very light purple*/
	text-align: center;
	text-shadow: 3px 3px 6px #3e3d3d;
	font-size: 3.5em;
	bottom: 0;
	position: absolute;
	width: 100%;
}

.header-content{
	position: relative;
	height: 100%;
	/*display: flex;
	justify-content: space-around;*/
}

/*
#################################################
Hamburger-Resposive menu Icon
#################################################
*/

.hamburger{
	background: none;
	position: absolute;
	top:0;
	right: 0;
	color: white;
	border: 0;
	font-size: 1.6em;
	font-weight: bold;
	cursor: pointer;
	z-index: 800;
	text-shadow: 3px 3px 6px #3e3d3d;
	border-radius: 8px;
	position: fixed;
	padding-bottom: 3px;
}
.cross{
	background: none;
	position: absolute;
	top:0;
	right: 0;
	color: white;
	border: 0;
	font-size: 1.6em;
	font-weight: bold;
	cursor: pointer;
	z-index: 800;
	text-shadow: 3px 3px 6px #3e3d3d;
	border-radius: 50%;
	position: fixed;
	padding-top: 7px;
	padding-right: 13px;
	padding-left: 13px;
}

.hamburger:hover{
	background-color: #C0AAB0; /*light purple*/
}

.cross:hover{
	background-color: #C0AAB0; /*light purple*/
}


/*
#################################################
Navigation Bar
#################################################
*/
.main-nav{
	background-color: #A2616B; /*ashy pink*/
	overflow: hidden;
	position:relative;
	border: none;
	width: 100%;
	z-index: 150;
	box-shadow: 0 2px 3px rgba(0,0,0, .4);
	margin-bottom: -25px;/* since nav hight is 80px */
}

.main-nav ul{
	list-style-type: none;
	text-decoration: none;
	margin: 0px;
	padding: 0px;
	border: 10px;
	overflow: hidden;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;/*So they dont try to fit all together*/		
}

.main-nav li {
	text-decoration: none;
	float: left;
	min-width: 10%;
	max-width: 50%;
	margin: 0px;
	text-align: center;
	flex-grow: 1;/*make it occupy all space*/
}

 .nav-home, .nav-proj, .nav-art, .nav-con {
	display: block; /*make li clickable too*/
	color: #343C49;/*ashy blue dark*/
	border-bottom: 3px solid #A2616B; /*ashy pink*/
}

.nav-home:hover, .nav-proj:hover, .nav-art:hover, .nav-con:hover {
	text-decoration: none;
	background-color: #C0AAB0; /*light purple*/
	color: white;
	text-shadow: 3px 3px 6px #3e3d3d;
	box-shadow: 1px 1px 10px #3e3d3d;
	border-bottom: 3px solid #C0AAB0; /*light purple*/
}
			
.main-nav-scrolled {
	position: fixed;
	top:0;
	width: 92%;
}

body.home .nav-home, body.proj .nav-proj, body.art .nav-art, body.con .nav-con{
	text-decoration: none;
	background-color: #C0AAB0; /*light purple*/
	color: white;
	text-shadow: 3px 3px 6px #3e3d3d;
	box-shadow: 1px 1px 10px #3e3d3d;
	border-bottom: 3px solid gray;
}

body.home .nav-home:hover, body.proj .nav-proj:hover, body.art .nav-art:hover, body.con .nav-con:hover{
	border-bottom: 3px solid white;
}

/* 
#################################################
Content of the page(the bottom)
#################################################
*/
.content{
	font-size: 20px;
	background: #6F8F88; /*light ashy blue*/
	padding-top: 80px; /* compensate for the top when scrolling*/
	position: relative;
}

.my-image{
	width: 250px;
	height: 250px;

}
.my-name-and-image{
	padding: 0px;
	margin: 0px;
	text-align: center;
	border-bottom: 3px solid white;
}

h2{
	padding:0px;
	margin: 0px;
	color: white;
}



/*
#################################################
Information Timeline Container and what not
#################################################
*/

/*start of css timeline animation
/*@import "compass/css3";*/
.come-in{
	transform: translateY(150px);
	animation: come-in 0.8s ease forwards;
}

.come-in:nth-child(odd){
	animation-duration: 0.6s;
}

@keyframes come-in{
	to{ transform: translateY(0); }
}
/* end of css timeline animation */
h3{
	color: white;
	margin: 0px;
	padding-bottom: 25px;
	/*text-shadow: 3px 3px 6px #3e3d3d;*/
}

/*help for timeline Niels Voogt code found at: http://codepen.io/NielsVoogt/pen/MbMMxv/ */
.timeline-container{
	max-width: 1024px;
	width: 90%;
	margin:0 auto;
	background: #6F8F88; /*light ashy blue*/

	
}



.timeline-item p{
	color: #343C49; /*ashy blue dark*/ 

}


.timeline-item{
	padding: .1em 2em 2em;
	position: relative;
	border-left: 2px solid  white;/*this is the line itself*/
}

.timeline-item:before {
		position: absolute;
		left: 2em;
		font-weight: bold;
		top:1em;
		display: block;
}

.timeline-item:after{ /*this is the circle*/
		width:12px;
		height: 12px;
		display: block;
		top: 1em;
		position: absolute;
		left: -9px; /*where the circle is located*/
		border-radius: 10px;
		content: '';
		border: 2px solid #C0AAB0; /*very light purple , border of circle*/
		background: white; /*color of circle*/
		

}

.timeline-item:last-child{
	border-image: linear-gradient(
			to bottom,
			white 60%,
			#6F8F88) 1 100%;
}

.timeline-item:hover::after{
	background: #A2616B; /*ashy pink*/
}



/* credits to: Don Quist for help on the bubble code found at:https://blog.sigmaprojects.org/talk-bubbles-in-css/*/
.talkbubble {
    margin: .1em 0 .1em;
    padding: 15px;
    min-height:20px;
    background: #C0AAB0; /*very light purple*/
    background: linear-gradient(to right, #C0AAB0 , #6F8F88); 
    position: relative;
    /*border: 1px solid #333333;*/
    -moz-border-radius:    5px;
    -webkit-border-radius: 5px;
    border-radius:         5px;
   /* box-shadow: 2px 2px 3px #888;*/
    border-right: 0px;
}

.talkbubble:hover{
	background: #C0AAB0; /*very light purple*/
}

 /*left talk bubble*/
/*
.talkbubble:before {
    content:"";
    position:absolute;
    right: 100%;
    top: 10px;
    width: 0px;
    height: 0px;
    /*border-top: 14px inset transparent;
    border-right: 20px dashed #333333;
    border-bottom: 14px inset transparent;
}*/
.talkbubble:after {
    content:"";
    position:absolute;
    right: 100%;
    top: 11px;
    width: 0px;
    height: 0px;
    border-top: 13px inset transparent;
    border-right: 19px dashed #C0AAB0; /*very light purple*/
    border-bottom: 13px inset transparent;
}
/*right talk bubble*/



/*
#################################################
Footer
#################################################
*/

footer{
	text-align: center;
	background-color: #766875;/*dark lighter purple ashy*/
	padding-bottom: 2%;

}

.icon-a {
	color: #343C49;/*ashy blue dark*/
}

.icon-a:hover{
	color: white;
	text-shadow: 3px 3px 6px #3e3d3d;
	font-size: 1.6em;
	color: #C0AAB0; /*light purple*/
}

/*
#################################################
Project Display
#################################################
*/
.proj-line{
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	border-bottom: 1px solid white;
}

.line{
	flex-grow: 1;
	padding: 1%;

}

.proj-dis{
	padding: 1%;
}


.proj-title{
	text-align: left;
	display: flex;
	/*justify-content: space-around;*/
	flex-wrap: wrap;
	border-bottom: 3px solid white;
}
.proj-name, .proj-logo{
	padding-left: 1%;
}

/*
#################################################
Projects Display
#################################################
*/
.projs-container{
	display: flex;
	/*justify-content: space-around;*/
	flex-wrap: wrap;
	overflow: hidden;

}

.projs-title{
	text-align: center;
	border-bottom: 3px solid white;
}

.pad-projs{
	padding: 2%;
	padding-top: 20px;
}

.pad-projs:hover{
	background-color: grey;
}
.a-projs{
	/*padding: 2%;*/
	width: 100px;
	height: 100px;
	display: flex;
}

.a-projs:hover{
	width: 100px;
	height: 100px;
	background: white;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50%;
	opacity: 0.3;
    filter: alpha(opacity=30); /* For IE8 and earlier */
}



.a-link{
	flex-grow: 1;
	display: block;
	align-content: center;
}


.p-name{
	color: white;
	font-size: .9em;
	text-align: center;
}


.img-all{
	background-size: 100px 100px;
	background-repeat: no-repeat;
	max-height: 100px;
	max-width: 100px;
	/*border-radius: 50px;*/
}


.img-all:hover{	
	border-radius: 50px;
	box-shadow: 0px 0px 10px 2px #C0AAB0; /*very light purple/ circle shadow*/
	
}


.img-all-p{	
	width: 40px;
	height: 40px;
	background-size: 40px 40px;

}

.img-1, .img-1-p{
	background-image: url("img/icons/icons8-PHP.png");
}
.img-2, .img-2-p{
	background-image: url("img/icons/icons8-Html5.png");
}
.img-3, .img-3-p{
	background-image: url("img/icons/icons8-C-Plus-Plus_4.png");
}

.img-4, .img-4-p{
	background-image: url("img/icons/icons8-Python.png");
}
.img-5, .img-5-p{
	background-image: url("img/icons/icons8-SQL_3.png");
}

.img-6, .img-6-p{
	background-image: url("img/icons/icons8-CSS3.png");
}

.img-7, .img-7-p{
	background-image: url("img/icons/icons8-JavaScript.png");
}

.img-8, .img-8-p{/*C*/
	background-image: url("img/icons/icons8-Carbon-Filled.png");
}

.img-8, .img-8-p{ /* C#*/
	background-image: url("img/icons/icons8-CS-Filled.png");
}

.img-9, .img-9-p{ /* C#*/
	background-image: url("img/icons/icons8-Unity-Filled-100.png");
}

.img-10, .img-10-p{ 
	background-image: url("img/icons/bug.gif");
}

/* Reference (css to display where I got the icons form)
*/

.a-icon-link{
	text-align: center;
	font-size: .7em;
	color: #343C49;/*ashy blue dark*/
	display: block;
	background: #6F8F88; /*light ashy blue*/
}
.a-icon-link:hover{
	color: #C0AAB0; /*light purple*/

}



/*
#################################################
Contact Page
#################################################
*/

.email-form{
	/*border-radius: 50%;*/
	margin: 2em;
	border: 1.5px solid white;
	border-radius: 10px;
}

.email-pad{
	padding: 2%;
}

.send{
	color: #343C49;/*ashy blue dark*/
	background-color: #A2616B; /*ashy pink*/
	font-size: .85em;
	text-shadow: 3px 3px 6px #3e3d3d;
	/*border: none;*/
	box-shadow: 1px 1px 10px #3e3d3d;
	padding-left: 1%;
	padding-right: 1%;
}

.send:hover{
	color: white;
	background-color: #C0AAB0; /*light purple*/
}


/*
#################################################
Resposive CSS to sizeing
#################################################
*/


@media screen and (max-width: 600px){
	h1{
		/*padding-top: 50%;*/
		font-size: 3.3em;
	}
}

@media screen and (max-width: 500px){
	.all-content{
		margin-left: 1%;
		margin-right: 1%;
	}

	

	.main-nav-scrolled {
		position: fixed;
		top:0;
		width: 98%;	
	}
	h1{
		font-size: 3.1em;
	}
}


@media screen and (max-width: 430px){
	h1{
		font-size: 2.8em;
		display: inline-block;
	}
	
	ul{

	}

	li {
		/*display: block;*/
		max-width: 100%;
		width: 100%;
	}






}