html {
	font-size: 62.5%;
}

body {
	font-family: arial, helvetica, sans-serif;
	font-size: 1.8rem;
	/*background-color: #9bffc0;*/
	/* background-color: #9ef7ad; */
	/*background-color: #CCFFC4;*/
	/*background-color: #dcf2b0;*/
	background-color: #FAF9F6;
	/* color: #2a3527; */
	color: #FAF9F6;
	font-family: 'Source Sans Pro', sans-serif;
	line-height: 1.5;
}

h1 {
	font-family: 'Crimson Text', serif;
	font-size: 6rem;
	line-height: 1;
}

h2 { font-size: 3rem; }
h3 { font-size: 1.9rem; }


/* Navigation */

header,
header>.flex-container,
.icon-container {
	display: flex;
	justify-content: space-around;
	align-items: center;
}

header>.flex-container {
	width: 100%;
}


/*nav {
	align-items: center;
}*/

nav .flex-container {
	/*width: 50rem;*/
	justify-content: space-between;
	/*margin-right: 10rem;*/
}

.icon-logo {
	width: 12.5rem;
	height: 9rem;
	margin: 2rem;
	/* fill: #fa4659; */
}

.toggle-btn {
    border: none;
    background-color: #FAF9F6;
    outline: none;
}

.toggle-btn:hover {
    cursor: pointer;
}

nav li {
	padding: 1rem;
	padding-left: 3rem;
}


/* .center button {
	text-align: center;
	border: none;

	padding: 2rem;
	width: 25rem;
}

.center button:hover {
	cursor: pointer;
	width: 25rem;

} */


header a {
	display: block;
}

header nav {
    position: absolute;
    left: 0;
    top: 13%;
    width: 90vw;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.7s ease-in-out;
}

.show-nav {
    max-height: 35rem;
}

/* .show-nav ul {
    background-color: rgba(237,67,147,0.1);
} */

svg rect {
    fill: #288f16;
}

a {
	text-decoration: none;
	color: #288f16;
}

a:hover {
	opacity: 0.7;
}

.contact {
	padding-left: 3rem;
}

/* .bar {
	width: 80vw;
	height: 1px;
	border-bottom: 1px solid #124705;
	margin: 0 auto;
	margin-bottom: 3rem;
} */


/* Main */

h1, h2{
	margin: 2rem;
}

section.flex-container p {
	margin: 0 2rem;
}

section .text-container {
	padding-bottom: 6rem;
}

#about {
	background-color: #288f16;
}

#about img {
	max-width: 100%;
}
/*
.box-container:last-of-type {
	display: flex;
	justify-content: space-between;
}

.box-container:last-of-type .box {
	width: 49%;
}

.box-container:first-of-type .box:last-of-type {
	margin-bottom: 0;
}

.box-container:last-of-type .box:last-of-type {
	margin-left: 0;
}*/

#skills {
	background-color: rgba(237,67,147,0.72);
	padding: 7rem 0rem;
}

#skills,
.modal-content,
footer p {
	color: #001134;
}

.box {
	margin: 2rem;
	padding: 3rem;
	/*border: 1px solid #124705;*/
	background-color:#FAF9F6;
	box-shadow: 2px 2px 11px 0px #124705;
	height: 30rem;
}

.box ul {
	list-style-type: circle;
}

.box li {
	margin-left: 3rem;
	word-wrap: break-word;
}

.heading {
	text-align: center;
	padding: 1rem 0;
	/* margin: 0 1rem; */
	/* background-color: #ecffea; */
	/* margin-top: 3rem; */
}

/* Projects */

#projects {
	background-color: #001134ed;
	height: 100%;
	padding: 7rem 0;
	flex-wrap: wrap;
    justify-content: center;
	display: flex;
}

/* #projects .img-container {
	width: 33%;
} */

#projects .img-container {
	margin: 2rem;
}

#projects .img-container img {
	display: inline-block;
	height: 18rem;
}

#projects  h2 {
	padding-left: 3rem;
	width: 95%;
	margin-bottom: 1rem;
}

/* Modal Trigger */

#projects #modalBtn {
	border-radius: 1rem;
	transition: all 0.4s;
}

#projects #modalBtn:hover {
	border-radius: 0.5rem;
	/* height: 33rem; */
	transform: scale(1.05);
	cursor: pointer;
}

/* .projects h3 {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 1rem;
	width: 10rem;
	height: 10rem;
	z-index: 100;
	color: pink;
} */

/* Modal (background) */
.modal {
	display: none;
	position: fixed;
	z-index: 1;
	padding: 10rem 0;
	left: 0;
	top: 0;
	width: 100%;
	height: 98%;
	overflow: auto;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.5);
	box-sizing: border-box;
}

/* Modal Content */
.modal-content {
	background-color: #FAF9F6;
	margin: auto;
	padding: 4rem 2rem;
	padding-top: 0;
	border-radius: 1rem;
	/* border: 1px solid #888; */
	width: 80%;
}

.modal-content img {
	max-width: 100%;
}

.modal-content ul{
	list-style-type: disc;
	margin-left: 3rem;
}

.modal-content h3 {
	padding-top: 4rem;
}

/* The Close Button */
.close {
	color: #aaaaaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
}

.close:hover,
.close:focus {
	color: #000;
	text-decoration: none;
	cursor: pointer;
}

/* Awards */

#awards {
	color: #001134;
}

#awards section {
	box-shadow: 4px 4px 15px 2px #000000;
	margin: 3rem 2rem;
	padding: 2rem;
}

h5 {
	margin: 1rem 0;
}

/* Resume */

.center {
	margin: 14rem auto;
	display: flex;
	justify-content: center;
	align-items: center;
}


#resume:hover {
	cursor: pointer;
	width: 27rem;
	background-color: #288f16;
}

#resume {
	text-align: center;
	border: none;
	color: #FAF9F6;
	background-color: rgba(237,67,147,1);
	font-weight: bolder;
	border-radius: 6px;
	padding: 2rem;
	width: auto;
}

/* Footer */

footer .icon,
.icon-container {
	height: 4rem;
	width: 4rem;
	fill: #288f16;
}

.icon-container {
	width: 30rem;
	margin: 0 auto;
}

footer p {
	text-align: center;
	margin: 2rem;
}


@media only screen and (min-width: 625px){
	h1 {
		font-size: 4rem;
	}

	h2 {
		font-size: 2rem;
	}

	.icon-logo {
		width: 20rem;
	}


	.flex-container,
	header nav {
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.toggle-btn {
		display: none;
	}

	header nav {
        max-height: 6.6rem;
        position: static;
        overflow: visible;
        width: auto;
        flex-grow: 0.5;
    }

    header>.flex-container {
    	width: 20rem;
    }
	
	a.contact {
		color: #FAF9F6;
		background-color: rgba(237,67,147,1);
		font-weight: bolder;
		border-radius: 6px;
		padding-left: 1rem;
	}

	.contact:hover,
	#resume:hover {
		background-color: #288f16;
	}


	/* .contact:hover {
		opacity: 1;
		font-weight: bolder;
	} */

	.contact {
		/* background-color: rgba(237,67,147,0.72); */
		padding: 1rem;
		/* border: 1px solid #124705; */
		/* border-radius: 6px; */
		margin-right: 3rem;
	}

	main section .img-container {
		order: 1;
	}



	.box-container:first-of-type .box:first-of-type {
		margin-bottom: 0;
	}

	.box {
		width: 49%;
		height: 25rem;
	}

	.box-container:last-of-type .box {
		width: 31%;
		height: 50rem;
		margin-left: 0;
	}

	.box-container .box:first-of-type {
		margin-left: 2rem;
	}

	.box-container:last-of-type {
		justify-content: space-between;
	}


	.box-container:first-of-type .box:last-of-type {
		margin-bottom: 0;
	}

	
	#projects .img-container img {
		height: 30rem;
	}

	#awards section {
		width: 20rem;
		height: 30rem;
	}

}

@media only screen and (min-width: 900px){
	h1 {
		font-size: 6rem;
		margin-top: 0;
	}

	h2 {
		font-size: 3rem;
	}

	.icon-logo {
		width: 40rem;
	}

	.box {
		height: 18rem;
	}

	.box-container:last-of-type .box {
		height: 40rem;
	}

	header>.flex-container {
    	width: 40rem;
    }

	#about img {
		max-width: none;
	}

	main > div:first-of-type > section,
	#skills > div {
		max-width: 130rem;
		margin: 0 auto;
	}

	#projects {
		justify-content: space-around;
	}

	.modal-content .flex-container {
		flex-wrap: wrap;
	}

	#awards section {
		width: 35rem;
		height: 30rem;
		padding: 5rem;
	}
}

/* 
pink back ground: rgba(237,67,147,0.7)
pink #ed4494
green #288f16
blue #001134
white #FAF9F6
*/




/*

.art .img-container {
	width: 25%;
}

.art .img-container:nth-of-type(even) {
	width: 20%;
}
*/
/*.glass .flex-container {
	flex-wrap: wrap;
	height: 357px;
	width: 40rem;
}*/

/*.glass .flex-container {
	height: 33rem;
	justify-content: flex-start;
	margin: 0;
}



img:nth-of-type(2) {
	height: 100%;
	width: 100%;
}*/





/*.flex-container:first-of-type {
	height: 500px;
	width: 1200px;
}

.img-container:first-of-type {
	height: 100%;
	width: 100%;
}

.img-container:nth-of-type(2) {
	width: 120%;
	height: 489.355px;
	width: 130%; 
}
*/