@import url('https://fonts.googleapis.com/css?family=Nunito:300,400,700');


*{
    box-sizing: border-box;
}

:root{
	--text-color: #197027;
	--dark-color: #040008;
	--background-color: #190727;
}

body{
    padding: 0;
	margin: 0;
	color: var(--text-color);
	background: var(--background-color);
	font: 20px/1.5 'Nunito', sans-serif;
	height: 100%;
	overflow: auto;
}

.headerBar{
	height: 28vh;
	background-color: var(--dark-color);
	position: fixed;
	width: 100%;
}

.selfie{
	border-radius: 50%;
	height: auto;
	width: 20vh;
	padding: 0;
	margin: 3vh 1vh 0 3.5vh;
	transition: all .7s;
	float: left;
	z-index: 4;
}

.intro{
	float: left;
	width: 60%;
	padding: 20vh 0 0 0;
	color: var(--text-color);
	font-weight: 700;
	letter-spacing: .1em;
	font-size: 3.5vh;
	text-shadow: 4px 4px var(--background-color);
}

.selfie:hover{
	transform: scale(1.3) rotate(360deg);
}

.menu{
	position: fixed;
	width: 100%;
	padding-left: 0;
}

.menu nav{
	background: transparent;
	width: auto;
	min-width: 650px;
	float: right;
}

.menu nav ul{
	display: flex;
	padding: 0;
	justify-content: right;
	text-align: center;
}

.menu nav ul li{
	list-style: none;
	padding: 1vh;
}

nav a{
	color: var(--text-color);
	font-size: 1.8vh;
	letter-spacing: .1em;
}

nav a:hover{
	text-decoration: none;
	color: rgb(140, 0, 255);
}

.drop{
	padding: 0;
	margin: 0;
	position: relative;
}

.dropStuff{
	display: none;
	position: absolute;
}

.drop .dropButton{
	background-color: transparent;
	color: var(--text-color);
	border: none;
	margin: 0;
	padding: 0;
	font-size: 1.8vh;
	letter-spacing: .1em;
	cursor: pointer;
}

.drop:hover .dropStuff{
	display: flex;
	flex-direction: column;
	text-align: left;
}

.main{
	width: 100%;
	height: 100%;
	padding: 33vh 0 4vh 0;
	margin: 0;
	text-align: center;
	justify-content: center;
}

.main .resumeSection{
	width: 80%;
	margin-left: 10%;
	margin-bottom: 90px;
	margin-right: 10%;
}

h1{
	color: var(--text-color);
	font-weight: 700;
	letter-spacing: .1em;
	font-size: 3.5vh;
	text-shadow: 4px 4px var(--dark-color);
}

h2, h3, h4, h5, p, a, li, label{
	text-shadow: 1px 3px var(--dark-color);
	letter-spacing: 1px;
}

hr{
	background-color: var(--text-color);
	width: 60%;
	border-width: 7px;
	box-shadow: 0 5px 5px 0 var(--dark-color);
}

.resumeSection{
	text-align: center;
}

.resumeSection p{
	width: 90%;
	padding-left:10%;
}

.resumeSection ul{
	display: grid;
	grid-template-columns: repeat(2, minMax(100px, 200px));
	grid-template-rows: auto;
	margin-top: 15px;
	text-align: left;
	justify-content: center;
	margin-left: 100px;
}

/* About page */
.about li{
	width: 300px;
	padding-left: 0;
	float:left;
}

.about li a{
	text-decoration: none;
	color: var(--text-color);
	padding-right: 25%;
	margin: 0;
}

.about li a:hover{
	text-decoration: underline;
}

.about{
	display: flex;
	list-style-type: none;
	justify-content: center;
	width: 100%;
}

.lefth4{
	padding-left: 25%;
	float: left;
}

.smallHr{
	border-width: 4px;
	box-shadow: 0 3px 3px 0 var(--dark-color);
}

.aboutpage p{
	width: 60%;
	margin: 0 30% 0 15%;
	text-align: left;
}


/* Education Page */
.ed hr{
	width: 25em;
	box-shadow: 0px 3px 3px 0px var(--dark-color);
	border-width: 4px;
}

/* Experience */
.experience h2{
	margin-left: 20%;
}

.experience p{
	text-align: left;
	margin-left: 15%;
	width: 65%;
}

/* Contact */
form label{
padding-top: .75em;
}

input[type="text"], input[type="email"], input[type="tel"], textarea{
	color: var(--text-color);
	background-color: var(--dark-color);
	border-color: var(--background-color);
	text-align: center;
}

.button{
	color: var(--text-color);
	background-color: var(--dark-color);
	border: 5px black solid;
	padding: 0 10px 0 10px;
}

.form h2{
	text-align: center;
}

/* Project Pages */
.project{
	margin-top: 1em;
	margin-bottom: 45%;
}


h2{
	text-align: left;
}

.projecthr{
	width: 80%;
}

.floatleft{
	width: 50%;
	float: left;
	padding-left: 12%;
}

.floatleft p{
	text-align: left;
}

.floatleft h3{
	float: left;
}

.floatleft ul{
	display: block;
	text-align: left;
	margin-left: 5%;
}

.gallery{
	width: 50%;
	max-width: 900px;
	max-height: 200px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 50% 50%;
    justify-items: center;
    grid-gap: 20px;
	float: right;
	padding-right: 12%;
	padding-left: 0;
	padding-top: .2em;
}

.gallery img{
	min-width: 6.5em;
	width: 100%;
	margin: 0;
	box-shadow: 0 10px 5px 0 var(--dark-color);
}

/* Footer */
footer{
	width: 100%;
	margin-bottom: 0;
	bottom:0;
	position: fixed;
	background: var(--dark-color);
}

footer a{
	color: var(--text-color);
	font-size: 2vh;
}

footer a:hover{
	text-decoration: none;
	color: var(--background-color);
}

.copyright{
	text-align: left;
	width: 65%;
	height: 7vh;
	margin: 0;
	padding-left: 2em;
	padding-top: 5px;
	font-size: 1vh;
}

/* Ball background */
.ball{
	position: fixed;
	border-radius: 100%;
	opacity: .7;
	z-index: 2;
}

/* Typing Text */

  .flex {
	  display: flex;
	  padding-left: 25%;
	  padding-right: 25%;
  }
  
  .header-sub-title {
	  color: var(--text-color);
	  font-weight: 700;
	  letter-spacing: .1em;
	  font-size: 3.5vh;
	  text-shadow: 4px 4px var(--dark-color);
  
  }

@media(max-width: 1200px){
	.resumeSection p{
		width: 100%;
		padding-left: 0;
		margin: 0;
	}

	hr, .projecthr{
		width: 100%;
	}

	.project{
		margin-bottom: 66em;
	}

	.floatleft{
		width: 100%;
		float: left;
		padding-left: 0;
	}

	.gallery{
		width: 100%;
		padding: 5%;
		margin: 0;
	}
	.lefth4{
		padding-left: 0%;
		float: left;
	}

	/* Experience */
	.experience h2{
		margin-left: 0%;
	}

	.experience p{
		text-align: left;
		margin-left: 15%;
		width: 80%;
		padding-bottom: 2vh;
	}
}

@media(max-width: 720px){
	body{	
		display: block;
	}

	.main{
		padding: 42vh 0 25vh 0;
		margin: 0;
		text-align: center;
		justify-content: center;
	}

	.selfie{
		display: none;
	}
	
	.ball{
		opacity: .2;
	}

	.intro{
		display: none;
	}

	/* Nav */
	.menu nav{
		background: var(--dark-color);
		width: 100%;
		justify-content: center;
		min-width: 0px;
	}
	
	.menu nav ul{
		display: flex;
		justify-content: center;
		text-align: center;
		flex-direction: column;
	}

	.dropButton, .drop{
		width: 50%;
		margin-left: 25%;
	}
	
	.drop:hover .dropStuff{
		display: flex;
		flex-direction: column;
		background-color: var(--dark-color);
		justify-content: center;
		text-align: center;
		margin-left: 0;
		width: 100%;
	}

	.drop:hover .dropStuff li{
		width: 10vw;
	}
	/* End of nav */

	/* Start of other pages */
	.main .resumeSection{
		width: 80%;
		margin-left: 10%;
		margin-bottom: 350px;
		margin-right: 10%;
	}
	
	h1{
		color: var(--text-color);
		font-weight: 700;
		letter-spacing: .1em;
		font-size: 3vh;
		text-shadow: 3px 3px var(--dark-color);
	}
	
	.resumeSection p{
		width: 100%;
		padding-left: 0;
		margin: 5%;
	}
	
	.resumeSection ul{
		display: grid;
		grid-template-columns: repeat(2, minMax(100px, 200px));
		grid-template-rows: auto;
		margin-top: 15px;
		text-align: left;
		justify-content: center;
		margin-left: 100px;
	}

	/* Education */
	.ed hr{
		width: 100%;
	}
	/* End of education */

	/* Project Pages */
	.resumeSection p{
		width: 100%;
		padding-left: 0;
		margin: 0;
	}

	.project{
		margin-bottom: 50em;
	}

	hr, .projecthr{
		width: 100%;
	}

	.floatleft{
		width: 100%;
		float: left;
		padding-left: 0;
	}

	.gallery{
		width: 100%;
		padding: 0;
		margin-bottom: 2em;
	}
	
	.gallery img{
		min-width: 6.5em;
		width: 100%;
		box-shadow: 0 10px 5px 0 var(--dark-color);
	}

	.project ul{
		display:flex;
		flex-direction: column;
		margin:0 8%;
		width: 100%;
	}

	/* End of project */

	.experience p{
		text-align: left;
		margin-left: 15%;
		width: 80%;
	}



}
@media(max-width: 500px){
	.gallery{
		grid-template-columns: 1fr;
		margin-bottom: 250px;
	}

	.project{
		margin-bottom: 160vh;
	}

	.project ul{
		padding: 0;
		margin:0 20px;
		width: 100%;
	}

	.menu nav ul li{
		list-style: none;
		padding: .2vh;
	}

	.drop:hover .dropStuff{
		padding: .4vh;
	}

	.lefth4{
		padding:0;
		margin: 0;
		width: 100%;
	}
	.about{
		width: 25px;
		justify-content: center;
		padding-left: 25%;
	}

	.about li{
		width: 100px;
		padding:0;
	}

	.about li a{
		font-size: 15px;
		padding:0;
	}
}