/* Generic */
body {
	margin: 0px;
}

.text{
	font-family: 'Palanquin', sans-serif;
}

.image{

}

.button{
	background-color: #20BF55;
	text-decoration: none;
}

.button:hover
{
	background-color: #01BAEF;
	cursor: pointer;
}

.link{
	text-decoration: none;
}
.link:hover{
	cursor: pointer;
}

/* Used for the lines inbetween a section */
.section
{
	border-top: 2px solid #dbdbdb;
}
/* Section header text */
.section-header-container{
	height: 220px;
	width: 100%
}
.section-header-text{
	color: #757575;
	font-size:50px
}

/* For anything that needs to align items in the center, row style. */
.container{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
}

.container-col{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
}



.background{

}

/* Page headers */
.header{
	background-color: #ffffff;
	width:100%;
	height:170px;
	display: flex;
	align-items: center;
	justify-content: space-around;
}

.shadow{
	box-shadow: 0px 3px 10px darkgray;
}

.shadow-button{
	box-shadow: 0px 4px 6px darkgray;
}

/* Section 2 generics */
/* Container that holds center content */
.center-scalable-container{
	height: 100%;
	width: 65%;
	display: flex;
	flex-direction: column;
}

/* The container div for each experience */
.experience-container{
	width: 100%;
	background-color: white;
	border-radius: 25px;
	/* box-shadow: 0px 2px 8px darkgray; */
	height: 400px;
	margin-bottom: 100px;
}

.experience-image{
	border-radius:25px;
	height: 380px;
	width: 457px;
}

/* The experience title, position, and location text */
.experience-column-text{
	margin: 0px;
}

/* Links */
.icon{

}

/* Page header */

#section0-header-container{
	justify-content: flex-start;
}

#section0-header-icon-nav-container{
	height: 100%;
	width: 70%;
	justify-content: center;
}

#section0-header-icon-container{
	width: 15%;
	height: 100%;
}
#section0-header-icon{
	height: 120px;
	width: 120px;
}


#section0-header-left-container{
	width: 80%;
	height: 100%;
	background-color: white;
	justify-content: space-evenly;
}

/* buttons to go to certain part of page */
#section0-header-button1{
	width: 400px;
	background-color: white;
	height: 40%;
}
#section0-header-button1-text{
	font-size: 40px;
	color: #20BF55;
}
#section0-header-button1-text:hover{
	color: #01BAEF;
}

/* buttons to go to certain part of page */
#section0-header-button2{
	width: 300px;
	background-color: white;
	height: 40%;
}
#section0-header-button2-text{
	font-size: 40px;
	color: #20BF55;
}
#section0-header-button2-text:hover{
	color: #01BAEF;
}
/* buttons to go to certain part of page */
#section0-header-button3{
	width: 300px;
	background-color: white;
	height: 40%;
}
#section0-header-button3-text{
	font-size: 40px;
	color: #20BF55;
}
#section0-header-button3-text:hover{
	color: #01BAEF;
}




#section0-header-right-container{
	width: 30%;
	height: 100%;
	background-color: white;
	justify-content: center;
	align-items: center;

}

/* #section0-header-name-container{
	padding-bottom: 10px;
}

#section0-header-name-text{
	font-size: 45px;
	color: #757575;
	line-height: 1;
} */

/* Resume button */
#section0-resume-button-container{
	width: 300px;
	height: 60px;
}
#section0-resume-button{
	width: 300px;
	height: 60px;
	border-radius: 25px;
}
#section0-resume-button-text{
	font-size: 30px;
	color: white;
}

@media screen and (max-width:1700px) {
	#section0-header-right-container{
		width: 25%;
	}
	#section0-header-icon-nav-container{
		width: 75%;
	}
	#section0-header-left-container{
		width: 85%;
	}
}
@media screen and (max-width:1500px) {
	#section0-resume-button-container{
		width: 250px;
		height: 50px;
	}
	#section0-resume-button{
		width: 250px;
		height: 50px;
	}
	#section0-resume-button-text{
		font-size: 25px;
	}

	#section0-header-container{
		height: 140px;
	}

	#section0-header-icon-container{
		width: 13%;
	}
	#section0-header-icon{
		height: 100px;
		width: 100px;
	}

	/* #section0-header-name-text{
		font-size: 40px;
	} */

	/* buttons to go to certain part of page */
	#section0-header-button1{
		width: 300px;
	}
	#section0-header-button1-text{
		font-size: 30px;
	}

	/* buttons to go to certain part of page */
	#section0-header-button2{
		width: 250px;
	}
	#section0-header-button2-text{
		font-size: 30px;
	}
	/* buttons to go to certain part of page */
	#section0-header-button3{
		width: 250px;
	}
	#section0-header-button3-text{
		font-size: 30px;
	}
}

@media screen and (max-width:1250px) {
	#section0-resume-button-container{
		width: 230px;
		height: 50px;
	}
	#section0-header-left-container{
		width: 86%
	}
	/* buttons to go to certain part of page */
	#section0-header-button1{
		width: 250px;
	}
	#section0-header-button1-text{
		font-size: 25px;
	}

	#section0-header-container{
		height: 120px;
	}

	#section0-header-icon-container{
		width: 11%;
	}
	#section0-header-icon{
		height: 80px;
		width: 80px;
	}

	/* #section0-header-name-text{
		font-size: 35px;
	} */

	/* buttons to go to certain part of page */
	#section0-header-button2{
		width: 200px;
	}
	#section0-header-button2-text{
		font-size: 25px;
	}
	/* buttons to go to certain part of page */
	#section0-header-button3{
		width: 200px;
	}
	#section0-header-button3-text{
		font-size: 25px;
	}
}

@media screen and (max-width: 1000px)
{
	#section0-header-icon-container{
		width: 10%;
	}
	#section0-header-icon{
		height: 70px;
		width: 70px;
	}
	#section0-header-button2{
		width: 170px;
	}
	/* buttons to go to certain part of page */
	#section0-header-button3{
		width: 170px;
	}
}



/* Section 1 -- Intro */
#section1-background{
	height: 900px;
	width: 100%;
} 

#section1-container{
	display: flex;
	flex-direction: row;
	justify-content: center;
	height: 500px;
	width: 65%;
}

#section1-image-container{
	max-height: 600px;
	height: 100%;
	width: 600px;
	justify-content: flex-start;
	/* padding-right: 50px; */
}

#section1-image-headshot{
	border-radius: 50%;
  	max-width:500px;
  	max-height:500px;
  	width: auto;
	height: auto;
}  

 #section1-bio-container{
	/* width: ; */
	max-width: 45%;
	justify-content: center;
}

#section1-bio-header-container{
	width: 100%;
	max-height: 130px;
}

#section1-bio-header-text{
	font-size: 60px;
	color: #20BF55;
	margin: 0;
}

#section1-bio-paragraph{
	word-wrap: break-word;
	background-color: white;
	font-size: 30px;
	line-height: 1.5;
	color: #757575;
	margin: 0;
}


@media screen and (max-width:2000px){
	#section1-bio-container{
		max-width: 50%;
	}
}
@media screen and (max-width:1500px){
	#section1-image-container{
		justify-content: center;
	}
}
@media screen and (max-width:1400px){
	#section1-container{
		width: 75%;
	}
}




/* Section 2 -- experiences*/
#section2-background{
	width: 100%;
	height: 3050px;
	background-color: white;
}
#section2-container{
	background-color: white;
}
/* Experience header */

#section2-experience-header-container{
	height: 65px;
	margin-bottom: 50px;
	justify-content: flex-end;
}

#section2-experience-header-container{
	border-bottom: 1px solid #20BF55;
	width: 100%;
}
#section2-experience-text{
	font-size: 35px;
	color: #20BF55;
}

/* experience 1 styles */

/* White background container */
#section2-experience1-container{
	display: flex;
	align-items: center;
	justify-content: center;
}
/* Adds a little white space around the inside content */
#section2-experience1-inner-container{
	height: 380px;
	width: 96%;
	background-color: white;
}
/* Container for top portion of content */
#section2-experience1-top-container{
	display:flex;
	flex-direction: row;
	height:100%
}
#section2-experience1-top-image-container{
	display:flex;
	flex-direction: row;
	padding-right: 50px;
}
#section2-experience1-top-text-container{
	width: 60%;
	height: 100%;
	background-color: white;
	align-items: flex-start;
}

/* Container for top 3 lines oftext in experience */
#section2-experience1-top-text1-container{
	width: 100%;
	height: 27%;
	background-color: white;
	display: flex;
	flex-direction: column;
	justify-items: space-evenly;
}
/* Title text */
#section2-experience1-top-text1-title-text{
	color: #20BF55;
	font-size: 40px;
	line-height: 1.3;
}
#section2-experience1-top-text1-title-text:hover{
	color: #01BAEF;
}
/* Position text */
#section2-experience1-top-text1-position-text{
	color: #01BAEF;
	font-size: 15px;
	line-height: 1.3;
	font-style: italic;
}
/* Location text */
#section2-experience1-top-text1-location-text{
	color: #757575;
	font-size: 15px;
	line-height: 1.5;
}

/* Container for top paragraph of text in experience */
#section2-experience1-top-text2-container{
	width: 90%;
	height: 58%;
	background-color: white;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}
/* Description paragraph */
#section2-experience1-top-text2-text{
	font-size: 20px;
	line-height: 1.5;
	color: #757575;
	margin: 0px;
}

/* Container for skills used text in experience */
#section2-experience1-top-text3-container{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	width: 100%;
	height: 15%;
	background-color: white;
}

/* Description paragraph */
#section2-experience1-top-text3-text{
	font-size: 17px;
	line-height: 1.2;
	color: #757575;
	margin: 0px;
}


/* Section 2 experience bottom container */
/* #section2-experience1-bottom-container{
	height: 15%;
	justify-content: flex-end;
}

#section2-experience1-button{
	border-radius: 25px;
	background-color: #20BF55;
	width: 300px;
	height: 70%;
}

#section2-experience1-button-text{
	color: white;
	font-size: 25px;
} */


/* experience 2 styles */
/* White background container */
#section2-experience2-container{
	display: flex;
	align-items: center;
	justify-content: center;
}
/* Adds a little white space around the inside content */
#section2-experience2-inner-container{
	height: 380px;
	width: 96%;
	background-color: white;
}
/* Container for top portion of content */
#section2-experience2-top-container{
	display:flex;
	flex-direction: row;
	height:100%
}
#section2-experience2-top-image-container{
	display:flex;
	flex-direction: row;
	padding-right: 50px;
}
#section2-experience2-top-text-container{
	width: 60%;
	height: 100%;
	background-color: white;
	align-items: flex-start;
}

/* Container for top 3 lines oftext in experience */
#section2-experience2-top-text1-container{
	width: 100%;
	height: 27%;
	background-color: white;
	display: flex;
	flex-direction: column;
	justify-items: space-evenly;
}
/* Title text */
#section2-experience2-top-text1-title-text{
	color: #20BF55;
	font-size: 40px;
	line-height: 1.3;
}
#section2-experience2-top-text1-title-text:hover{
	color: #01BAEF;
}
/* Position text */
#section2-experience2-top-text1-position-text{
	color: #01BAEF;
	font-size: 15px;
	line-height: 1.3;
	font-style: italic;
}
/* Location text */
#section2-experience2-top-text1-location-text{
	color: #757575;
	font-size: 15px;
	line-height: 1.5;
}


/* Container for top paragraph of text in experience */
#section2-experience2-top-text2-container{
	width: 90%;
	height: 58%;
	background-color: white;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}
/* Description paragraph */
#section2-experience2-top-text2-text{
	font-size: 20px;
	line-height: 1.5;
	color: #757575;
	margin: 0px;
}

/* Container for skills used text in experience */
#section2-experience2-top-text3-container{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	width: 100%;
	height: 15%;
	background-color: white;
}

/* Description paragraph */
#section2-experience2-top-text3-text{
	font-size: 17px;
	line-height: 1.2;
	color: #757575;
	margin: 0px;
}


/* Section 2 experience bottom container */
/* #section2-experience2-bottom-container{
	height: 15%;
	justify-content: flex-end;
}

#section2-experience2-button{
	border-radius: 25px;
	background-color: #20BF55;
	width: 300px;
	height: 70%;

}


#section2-experience2-button-text{
	color: white;
	font-size: 25px;
} */




/* experience 3 styles */

/* White background container */
#section2-experience3-container{
	display: flex;
	align-items: center;
	justify-content: center;
}
/* Adds a little white space around the inside content */
#section2-experience3-inner-container{
	height: 380px;
	width: 96%;
	background-color: white;
}
/* Container for top portion of content */
#section2-experience3-top-container{
	display:flex;
	flex-direction: row;
	height:100%
}
#section2-experience3-top-image-container{
	display:flex;
	flex-direction: row;
	padding-right: 50px;
}
#section2-experience3-top-text-container{
	width: 60%;
	height: 100%;
	background-color: white;
	align-items: flex-start;
}

/* Container for top 3 lines oftext in experience */
#section2-experience3-top-text1-container{
	width: 100%;
	height: 27%;
	background-color: white;
	display: flex;
	flex-direction: column;
	justify-items: space-evenly;
}
/* Title text */
#section2-experience3-top-text1-title-text{
	color: #20BF55;
	font-size: 40px;
	line-height: 1.3;
}
#section2-experience3-top-text1-title-text:hover{
	color: #01BAEF;
}
/* Position text */
#section2-experience3-top-text1-position-text{
	color: #01BAEF;
	font-size: 15px;
	line-height: 1.3;
	font-style: italic;
}
/* Location text */
#section2-experience3-top-text1-location-text{
	color: #757575;
	font-size: 15px;
	line-height: 1.5;
}


/* Container for top paragraph of text in experience */
#section2-experience3-top-text2-container{
	width: 90%;
	height: 58%;
	background-color: white;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}
/* Description paragraph */
#section2-experience3-top-text2-text{
	font-size: 20px;
	line-height: 1.5;
	color: #757575;
	margin: 0px;
}

/* Container for skills used text in experience */
#section2-experience3-top-text3-container{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	width: 100%;
	height: 15%;
	background-color: white;
}

/* Description paragraph */
#section2-experience3-top-text3-text{
	font-size: 17px;
	line-height: 1.2;
	color: #757575;
	margin: 0px;
}




/* Projects section */

#section2-projects-header-container{
	height: 100px;
	margin-bottom: 50px;
	justify-content: flex-end;
}

#section2-projects-header-container{
	border-bottom: 1px solid #20BF55;
	width: 100%;
}
#section2-projects-text{
	font-size: 35px;
	color: #20BF55;
}

/* White background container */
#section2-project1-container{
	display: flex;
	align-items: center;
	justify-content: center;
}
/* Adds a little white space around the inside content */
#section2-project1-inner-container{
	height: 380px;
	width: 96%;
	background-color: white;
}
/* Container for top portion of content */
#section2-project1-top-container{
	display:flex;
	flex-direction: row;
	height:100%
}
#section2-project1-top-image-container{
	display:flex;
	flex-direction: row;
	padding-right: 50px;
}
#section2-project1-top-text-container{
	width: 60%;
	height: 100%;
	background-color: white;
	align-items: flex-start;
}

/* Container for top 3 lines oftext in project */
#section2-project1-top-text1-container{
	width: 100%;
	height: 27%;
	background-color: white;
	display: flex;
	flex-direction: column;
	justify-items: space-evenly;
}
/* Title text */
#section2-project1-top-text1-title-text{
	color: #20BF55;
	font-size: 40px;
	line-height: 1.3;
}
#section2-project1-top-text1-title-text:hover{
	color: #01BAEF;
}
/* Position text */
#section2-project1-top-text1-position-text{
	color: #01BAEF;
	font-size: 15px;
	line-height: 1.3;
	font-style: italic;
}
/* Location text */
#section2-project1-top-text1-location-text{
	color: #757575;
	font-size: 15px;
	line-height: 1.5;
}

/* Container for top paragraph of text in project */
#section2-project1-top-text2-container{
	width: 90%;
	height: 58%;
	background-color: white;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}
/* Description paragraph */
#section2-project1-top-text2-text{
	font-size: 20px;
	line-height: 1.5;
	color: #757575;
	margin: 0px;
}

/* Container for skills used text in project */
#section2-project1-top-text3-container{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	width: 100%;
	height: 15%;
	background-color: white;
}

/* Description paragraph */
#section2-project1-top-text3-text{
	font-size: 17px;
	line-height: 1.2;
	color: #757575;
	margin: 0px;
}



/* Project 2 */
/* White background container */
#section2-project2-container{
	display: flex;
	align-items: center;
	justify-content: center;
}
/* Adds a little white space around the inside content */
#section2-project2-inner-container{
	height: 380px;
	width: 96%;
	background-color: white;
}
/* Container for top portion of content */
#section2-project2-top-container{
	display:flex;
	flex-direction: row;
	height:100%
}
#section2-project2-top-image-container{
	display:flex;
	flex-direction: row;
	padding-right: 50px;
}
#section2-project2-top-text-container{
	width: 60%;
	height: 100%;
	background-color: white;
	align-items: flex-start;
}

/* Container for top 3 lines oftext in project */
#section2-project2-top-text1-container{
	width: 100%;
	height: 27%;
	background-color: white;
	display: flex;
	flex-direction: column;
	justify-items: space-evenly;
}
/* Title text */
#section2-project2-top-text1-title-text{
	color: #20BF55;
	font-size: 40px;
	line-height: 1.3;
}
#section2-project2-top-text1-title-text:hover{
	color: #01BAEF;
}
/* Position text */
#section2-project2-top-text1-position-text{
	color: #01BAEF;
	font-size: 15px;
	line-height: 1.3;
	font-style: italic;
}
/* Location text */
#section2-project2-top-text1-location-text{
	color: #757575;
	font-size: 15px;
	line-height: 1.5;
}

/* Container for top paragraph of text in project */
#section2-project2-top-text2-container{
	width: 90%;
	height: 58%;
	background-color: white;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}
/* Description paragraph */
#section2-project2-top-text2-text{
	font-size: 20px;
	line-height: 1.5;
	color: #757575;
	margin: 0px;
}

/* Container for skills used text in project */
#section2-project2-top-text3-container{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	width: 100%;
	height: 15%;
	background-color: white;
}

/* Description paragraph */
#section2-project2-top-text3-text{
	font-size: 17px;
	line-height: 1.2;
	color: #757575;
	margin: 0px;
}


/* Section 2 experience bottom container */
/* #section2-experience3-bottom-container{
	height: 15%;
	justify-content: flex-end;
}

#section2-experience3-button{
	border-radius: 25px;
	background-color: #20BF55;
	width: 300px;
	height: 70%;
}

#section2-experience3-button-text{
	color: white;
	font-size: 25px;
} */

@media screen and (max-width:1900px) {
	#section1-image-headshot { /* Runs whenever viewport is 1000px or smaller */
	  height: 400px; 
	  width: 400px;
	}
	#section1-image-container{
		width: 500px;
	}
	#section1-bio-header-text{
		font-size: 50px;
	}
	#section1-bio-paragraph{
		font-size: 25px;
	}
	#section1-bio-header-container{
		max-height: 110px;
	}
}

/* Use a media query to add a break point at 1000px: */
@media screen and (max-width:1650px) {
	/* Description paragraph */
	#section2-experience1-top-text2-text{
		font-size: 18px;
		line-height: 1.5;
	}
	#section2-experience2-top-text2-text{
		font-size: 18px;
		line-height: 1.5;
	}
	#section2-experience3-top-text2-text{
		font-size: 18px;
		line-height: 1.5;
	}
	#section2-project1-top-text2-text{
		font-size: 18px;
		line-height: 1.5;
	}
	#section2-project2-top-text2-text{
		font-size: 18px;
		line-height: 1.5;
	}
	/* #section2-project3-top-text2-text{
		font-size: 18px;
		line-height: 1.5;
	} */
}
/* Use a media query to add a break point at 1500px: */
@media screen and (max-width:1500px) {
	#section1-image-headshot { /* Runs whenever viewport is 1500px or smaller */
		height: 300px; 
		width: 300px;
	}
	#section1-bio-header-text{
	  font-size: 40px;
	}
	 #section1-bio-paragraph{
	  font-size: 20px;
	}
	 #section1-bio-header-container{
	  max-height: 90px;
	}
	#section2-experience1-top-text2-text{
		font-size: 16px;
		line-height: 1.5;
	}
	#section2-experience2-top-text2-text{
		font-size: 16px;
		line-height: 1.5;
	}
	/* Description paragraph */
	#section2-experience3-top-text2-text{
		font-size: 16px;
		line-height: 1.5;
	}
	/* Scales down all experience title text to 30px */
	#section2-experience1-top-text1-title-text{
		font-size: 30px;
	}
	#section2-experience2-top-text1-title-text{
		font-size: 30px;
	}
	#section2-experience3-top-text1-title-text{
		font-size: 30px;
	}

	/* Projects */
	#section2-project1-top-text2-text{
		font-size: 16px;
		line-height: 1.5;
	}
	#section2-project2-top-text2-text{
		font-size: 16px;
		line-height: 1.5;
	}
	/* Description paragraph */
	/*#section2-project3-top-text2-text{
		font-size: 16px;
		line-height: 1.5;
	} */
	/* Scales down all project title text to 30px */
	#section2-project1-top-text1-title-text{
		font-size: 30px;
	}
	/* #section2-project2-top-text1-title-text{
		font-size: 30px;
	}
	#section2-project3-top-text1-title-text{
		font-size: 30px;
	} */
}

@media screen and (max-width:1400px){
	.center-scalable-container{
		width: 97%;
	}
	#section2-experience1-top-image-container{
		padding-right: 35px;
	}
	#section2-experience2-top-image-container{
		padding-right: 35px;
	}
	#section2-experience3-top-image-container{
		padding-right: 35px;
	}
	#section2-experience1-top-text2-text{
		font-size: 16px;
		line-height: 1.5;
	}

	/* Projects */
	#section2-project1-top-image-container{
		padding-right: 35px;
	}
	#section2-project2-top-image-container{
		padding-right: 35px;
	}
	/* #section2-project3-top-image-container{
		padding-right: 35px;
	} */
}

@media screen and (max-width:1200px)
{
	/* #section1-bio-header-text{
		font-size: 30px;
	} */
	#section1-bio-paragraph{
		font-size: 18px;
	}
	#section1-bio-header-container{
		max-height: 70px;
	}
}

/* Use a media query to add a break point at 1500px: */
@media screen and (max-width:1000px) {

	#section1-image-container{
		/* padding-left: 13%; */
		/* padding-right: 50px; */
	}	

	/* Description paragraph */
	#section2-experience3-top-text1-container{
		height: 23%;
	}
	#section2-experience3-top-text2-container{
		height: 62%;
	}
	
}




/* Section 3 */
#section3-background{
	height: 2520px;
	background-color: white;
	width: 100%;
}

#section3-container
{
	background-color: white;
}

/* Company info section */
#section3-companyinfo-container{
	height: 375px;
	background-color: white;
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
}

/* Image */
#section3-companyinfo-image-container{
	height: 100%;
	width: 500px;
	padding-left: 5%;
	padding-right: 50px;
	
}
#section3-companyinfo-image{
	height: 375px;
	width: 500px;
	border-radius: 25px;
}



/* Text area */
#section3-companyinfo-text-container{
	height: 100%;
	width: 50%;
	background-color:white;
	justify-content: flex-start;
	align-items: flex-start;
}

/* Company name */
#section3-companyinfo-name-container{
	height: 20%;
	width: 100%;
	justify-content: flex-start;
	background-color:white;
}
#section3-companyinfo-name-text{
	color: #20BF55;
	font-size: 35px;
}
#section3-companyinfo-name-text:hover{
	color: #01BAEF;
}

/* Company info */
#section3-companyinfo-paragraph-container{
	width: 90%;
	justify-content: flex-start;
}
#section3-companyinfo-paragraph-text{
	margin: 0px;
	color: #757575;
	font-size: 20px;
}

#section3-maingames-header-container{
	height: 200px;
}

#section3-maingames-text-container{
	border-bottom: 1px solid #20BF55;
	width: 100%;
}
#section3-maingames-text{
	font-size: 35px;
	color: #20BF55;
}

@media screen and (max-width:1700px){
	#section3-companyinfo-image-container{
		padding-left: 0%;
		padding-right: 50px;
	}	
	#section3-companyinfo-paragraph-container{
		width: 100%;
	}
	#section3-companyinfo-paragraph-text{
		font-size: 18px;
	}
	#section3-maingames-text-container{
		width: 60%;
	}
}

@media screen and (max-width:1500px){
	#section3-companyinfo-image{
		height: 300px;
		width: 400px;
	}
	#section3-companyinfo-text-container{
		height: 300px;
	}
	#section3-companyinfo-image-container{
		width: 450px;
	}
	#section3-companyinfo-image-container{
		padding-right: 0px;
	}
}

/* Game section */

/* Row 1*/
#section3-row1-container{
	justify-content: space-evenly;
	width: 100%;
	height: 770px;
	margin-bottom: 80px;
	background-color: white;
}

/* Game 1 */
#section3-row1-game1-container{
	height: 770px;
	width: 550px;
	border-radius: 25px;
	background-color: white;
}

#section3-row1-game1-inner-container{
	height: 93%;
	width: 91%;
	background-color: white;
	justify-content: flex-start;
}

/* Image */
#section3-row1-game1-image1-wrapper{
	height: 375px;
	width: 500px;
	border-radius: 25px;
	background: white;
}
#section3-row1-game1-image1{
	height: 338px;
	width: 450px;
	border-radius: 25px;
}

/* Text */
#section3-row1-game1-text-container{
	width: 100%;
	height: 250px;
	justify-content: flex-start;
}
#section3-row1-game1-title-container{
	margin-bottom: 20px;
	width: 100%;
}
#section3-row1-game1-title-text{
	font-size: 40px;
	line-height: 1;
	color: #20BF55;
}
#section3-row1-game1-title-text:hover{
	color: #01BAEF;
}
#section3-row1-game1-paragraph-text{
	text-align: center;
	color: #757575;
	margin: 0px;
}

/* Button */
#section3-row1-game1-button-container{
	height: 50px;
	margin-top: 35px;
	width: 100%;
	background-color: white;
}
#section3-row1-game1-button{
	height: 50px;
	width: 300px;
	border-radius: 25px;
}
#section3-row1-game1-button-text{
	color: white;
	font-size: 25px;
}

/* Game 2 */
#section3-row1-game2-container{
	height: 770px;
	width: 550px;
	border-radius: 25px;
	background-color: white;
}

#section3-row1-game2-inner-container{
	height: 93%;
	width: 91%;
	background-color: white;
	justify-content: flex-start;
}

/* Image */
#section3-row1-game2-image1-wrapper{
	height: 375px;
	width: 500px;
	border-radius: 25px;
	background: white;
}
#section3-row1-game2-image1{
	height: 338px;
	width: 450px;
	border-radius: 25px;
}

/* Text */
#section3-row1-game2-text-container{
	width: 100%;
	height: 250px;
	justify-content: flex-start;
}
#section3-row1-game2-title-container{
	margin-bottom: 20px;
	width: 100%;
}
#section3-row1-game2-title-text{
	font-size: 40px;
	line-height: 1;
	color: #20BF55;
}
#section3-row1-game2-title-text:hover{
	color: #01BAEF;
}
#section3-row1-game2-paragraph-text{
	text-align: center;
	color: #757575;
	margin: 0px;
}

/* Button */
#section3-row1-game2-button-container{
	height: 50px;
	margin-top: 35px;
	width: 100%;
	background-color: white;
}
#section3-row1-game2-button{
	height: 50px;
	width: 300px;
	border-radius: 25px;
}
#section3-row1-game2-button-text{
	color: white;
	font-size: 25px;
}


/* Row 2*/
#section3-row2-container{
	justify-content: space-evenly;
	width: 100%;
	height: 770px;
	margin-bottom: 80px;
	background-color: white;
}

/* Game 1 */
#section3-row2-game1-container{
	height: 770px;
	width: 550px;
	border-radius: 25px;
	background-color: white;
}

#section3-row2-game1-inner-container{
	height: 93%;
	width: 91%;
	background-color: white;
	justify-content: flex-start;
}

/* Image */
#section3-row2-game1-image1-wrapper{
	height: 375px;
	width: 500px;
	border-radius: 25px;
	background: white;
}
#section3-row2-game1-image1{
	height: 338px;
	width: 450px;
	border-radius: 25px;
}

/* Text */
#section3-row2-game1-text-container{
	width: 100%;
	height: 250px;
	justify-content: flex-start;
}
#section3-row2-game1-title-container{
	margin-bottom: 20px;
	width: 100%;
}
#section3-row2-game1-title-text{
	font-size: 40px;
	line-height: 1;
	color: #20BF55;
}
#section3-row2-game1-title-text:hover{
	color: #01BAEF;
}
#section3-row2-game1-paragraph-text{
	text-align: center;
	color: #757575;
	margin: 0px;
}

/* Button */
#section3-row2-game1-button-container{
	height: 50px;
	margin-top: 35px;
	width: 100%;
	background-color: white;
}
#section3-row2-game1-button{
	height: 50px;
	width: 300px;
	border-radius: 25px;
}
#section3-row2-game1-button-text{
	color: white;
	font-size: 25px;
}

/* Game 2 */
#section3-row2-game2-container{
	height: 770px;
	width: 550px;
	border-radius: 25px;
	background-color: white;
}

#section3-row2-game2-inner-container{
	height: 93%;
	width: 91%;
	background-color: white;
	justify-content: flex-start;
}

/* Image */
#section3-row2-game2-image1-wrapper{
	height: 375px;
	width: 500px;
	border-radius: 25px;
	background: white;
}
#section3-row2-game2-image1{
	height: 338px;
	width: 450px;
	border-radius: 25px;
}

/* Text */
#section3-row2-game2-text-container{
	width: 100%;
	height: 250px;
	justify-content: flex-start;
}
#section3-row2-game2-title-container{
	margin-bottom: 20px;
	width: 100%;
}
#section3-row2-game2-title-text{
	font-size: 40px;
	line-height: 1;
	color: #20BF55;
}
#section3-row2-game2-title-text:hover{
	color: #01BAEF;
}
#section3-row2-game2-paragraph-text{
	text-align: center;
	color: #757575;
	margin: 0px;
}

/* Button */
#section3-row2-game2-button-container{
	height: 50px;
	margin-top: 35px;
	width: 100%;
	background-color: white;
}
#section3-row2-game2-button{
	height: 50px;
	width: 300px;
	border-radius: 25px;
}
#section3-row2-game2-button-text{
	color: white;
	font-size: 25px;
}



@media screen and (max-width:2000px) {
	#section3-row1-container{
		justify-content: space-between;
	}
	#section3-row2-container{
		justify-content: space-between;
	}
}
@media screen and (max-width:1700px) {
	#section3-row1-container{
		flex-direction: column;
		height: 1620px;
	}
	#section3-row2-container{
		flex-direction: column;
		height: 1620px;
	}
	#section3-background{
		height: 4220px;
	}
	
}






/* Section 4 */
#section4-background{
	height: 2250px;
	background-color: white;
	width: 100%;
}

#section4-container
{
	background-color: white;
}


/* Passion 1 */

/* White background container */
#section4-passion1-container{
	display: flex;
	align-items: center;
	justify-content: center;
}
/* Adds a little white space around the inside content */
#section4-passion1-inner-container{
	height: 380px;
	width: 96%;
	background-color: white;
}
/* Container for top portion of content */
#section4-passion1-top-container{
	display:flex;
	flex-direction: row;
	height:100%
}
#section4-passion1-top-image-container{
	display:flex;
	flex-direction: row;
	padding-right: 50px;
}
#section4-passion1-top-text-container{
	width: 60%;
	height: 100%;
	background-color: white;
	align-items: flex-start;
}

#section4-passion1-inner-text-container{
	justify-content: space-evenly;
	align-items: flex-start;
}

/* Container for top 3 lines oftext in passion */
#section4-passion1-top-text1-container{
	width: 100%;
	height: 50px;
	background-color: white;
	display: flex;
	flex-direction: column;
	justify-items: space-evenly;
	padding-bottom: 25px;
}
/* Title text */
#section4-passion1-top-text1-title-text{
	color: #20BF55;
	font-size: 40px;
	line-height: 1.3;
}

/* Container for top paragraph of text in passion */
#section4-passion1-top-text2-container{
	width: 90%;
	/* height: 85%; */
	background-color: white;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}
/* Description paragraph */
#section4-passion1-top-text2-text{
	font-size: 20px;
	line-height: 1.5;
	color: #757575;
	margin: 0px;
}

/* Passion 2 */

/* White background container */
#section4-passion2-container{
	display: flex;
	align-items: center;
	justify-content: center;
}
/* Adds a little white space around the inside content */
#section4-passion2-inner-container{
	height: 380px;
	width: 96%;
	background-color: white;
}
/* Container for top portion of content */
#section4-passion2-top-container{
	display:flex;
	flex-direction: row;
	height:100%
}
#section4-passion2-top-image-container{
	display:flex;
	flex-direction: row;
	padding-right: 50px;
}
#section4-passion2-top-text-container{
	width: 60%;
	height: 100%;
	background-color: white;
	align-items: flex-start;
}

#section4-passion2-inner-text-container{
	justify-content: space-evenly;
	align-items: flex-start;
}

/* Container for top 3 lines oftext in passion */
#section4-passion2-top-text1-container{
	width: 100%;
	height: 45px;
	background-color: white;
	display: flex;
	flex-direction: column;
	justify-items: space-evenly;
	padding-bottom: 25px;
}
/* Title text */
#section4-passion2-top-text1-title-text{
	color: #20BF55;
	font-size: 40px;
	line-height: 1.3;
}

/* Container for top paragraph of text in passion */
#section4-passion2-top-text2-container{
	width: 90%;
	/* height: 85%; */
	background-color: white;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}
/* Description paragraph */
#section4-passion2-top-text2-text{
	font-size: 20px;
	line-height: 1.5;
	color: #757575;
	margin: 0px;
}


/* Passion 3 */

/* White background container */
#section4-passion3-container{
	display: flex;
	align-items: center;
	justify-content: center;
}
/* Adds a little white space around the inside content */
#section4-passion3-inner-container{
	height: 380px;
	width: 96%;
	background-color: white;
}
/* Container for top portion of content */
#section4-passion3-top-container{
	display:flex;
	flex-direction: row;
	height:100%
}
#section4-passion3-top-image-container{
	display:flex;
	flex-direction: row;
	padding-right: 50px;
}
#section4-passion3-top-text-container{
	width: 60%;
	height: 100%;
	background-color: white;
	align-items: flex-start;
}

#section4-passion3-inner-text-container{
	justify-content: space-evenly;
	align-items: flex-start;
}

/* Container for top 3 lines oftext in passion */
#section4-passion3-top-text1-container{
	width: 100%;
	height: 45px;
	background-color: white;
	display: flex;
	flex-direction: column;
	justify-items: space-evenly;
	padding-bottom: 25px;
}
/* Title text */
#section4-passion3-top-text1-title-text{
	color: #20BF55;
	font-size: 40px;
	line-height: 1.3;
}

/* Container for top paragraph of text in passion */
#section4-passion3-top-text2-container{
	width: 90%;
	/* height: 85%; */
	background-color: white;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}
/* Description paragraph */
#section4-passion3-top-text2-text{
	font-size: 20px;
	line-height: 1.5;
	color: #757575;
	margin: 0px;
}

/* Passion 4 */

/* White background container */
#section4-passion4-container{
	display: flex;
	align-items: center;
	justify-content: center;
}
/* Adds a little white space around the inside content */
#section4-passion4-inner-container{
	height: 380px;
	width: 96%;
	background-color: white;
}
/* Container for top portion of content */
#section4-passion4-top-container{
	display:flex;
	flex-direction: row;
	height:100%
}
#section4-passion4-top-image-container{
	display:flex;
	flex-direction: row;
	padding-right: 50px;
}
#section4-passion4-top-text-container{
	width: 60%;
	height: 100%;
	background-color: white;
	align-items: flex-start;
}

#section4-passion4-inner-text-container{
	justify-content: space-evenly;
	align-items: flex-start;
}

/* Container for top 3 lines oftext in passion */
#section4-passion4-top-text1-container{
	width: 100%;
	height: 45px;
	background-color: white;
	display: flex;
	flex-direction: column;
	justify-items: space-evenly;
	padding-bottom: 25px;
}
/* Title text */
#section4-passion4-top-text1-title-text{
	color: #20BF55;
	font-size: 40px;
	line-height: 1.3;
}

/* Container for top paragraph of text in passion */
#section4-passion4-top-text2-container{
	width: 90%;
	/* height: 85%; */
	background-color: white;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}
/* Description paragraph */
#section4-passion4-top-text2-text{
	font-size: 20px;
	line-height: 1.5;
	color: #757575;
	margin: 0px;
}




/* Use a media query to add a break point at 1000px: */
@media screen and (max-width:1750px) {
	#section4-passion1-top-text1-container{
		height:100px;
	}
}
/* Use a media query to add a break point at 1000px: */
@media screen and (max-width:1650px) {
	#section4-passion1-top-text2-text{
		font-size: 18px;
		line-height: 1.5;
	}
	#section4-passion2-top-text2-text{
		font-size: 18px;
		line-height: 1.5;
	}
	#section4-passion3-top-text2-text{
		font-size: 18px;
		line-height: 1.5;
	}
	#section4-passion4-top-text2-text{
		font-size: 18px;
		line-height: 1.5;
	}
}
/* Use a media query to add a break point at 1500px: */
@media screen and (max-width:1500px) {

	/* passions */
	#section4-passion1-top-text2-text{
		font-size: 16px;
		line-height: 1.5;
	}
	#section4-passion1-top-text1-container{
		height: 75px;
	}
	#section4-passion2-top-text2-text{
		font-size: 16px;
		line-height: 1.5;
	}
	#section4-passion3-top-text2-text{
		font-size: 16px;
		line-height: 1.5;
	}
	#section4-passion4-top-text2-text{
		font-size: 16px;
		line-height: 1.5;
	}

	/* Scales down all passion title text to 30px */
	#section4-passion1-top-text1-title-text{
		font-size: 30px;
	}
	#section4-passion2-top-text1-title-text{
		font-size: 30px;
	}
	#section4-passion3-top-text1-title-text{
		font-size: 30px;
	}
	#section4-passion4-top-text1-title-text{
		font-size: 30px;
	}
}

@media screen and (max-width:1400px){

	/* passions */
	#section4-passion1-top-image-container{
		padding-right: 35px;
	}
	#section4-passion1-top-text1-container{
		height: 45px;
	}
	#section4-passion2-top-image-container{
		padding-right: 35px;
	}
	#section4-passion3-top-image-container{
		padding-right: 35px;
	}
	#section4-passion4-top-image-container{
		padding-right: 35px;
	}
}

@media screen and (max-width:1000px) {
	#section4-passion1-top-text1-container{
		height:75px;
	}
}


/* Section 5 */
#section5-background{
	height: 600px;
	background-color: white;
	width: 100%;
}

#section5-container
{
	background-color: white;
}

#section5-header-container{
	height: 150px;
	background-color: white;
	justify-content: start;
}

#section5-header-line{
	height: 4px;
	width: 40%;
	background-color: #20BF55;
}

#section5-header-text-container{
	height: 100%;
	width: 400px;
	background-color: white;
}
#section5-header-text{
	font-size: 40px;
	color: #20BF55;
}

#section5-paragraph-container{
	width: 50%;
	background-color: white;
}

#section5-paragraph-text{
	font-size: 25px;
	margin: 0;
	color: #757575;
	padding-bottom: 25px;
	text-align: center;
}

#section5-links-container{
	height: 150px;
	background-color: white;
	width: 40%;
	justify-content: center;
}

#section5-email-icon-container{
	height: 150px;
	width: 150px;
	padding-right: 25px;
}
#section5-email-icon{
	height: 100%;
	width: 100%;
}
#section5-linkedin-icon-container{
	height: 150px;
	width: 150px;
}
#section5-linkedin-icon{
	height: 100%;
	width: 100%;
}




/* Section 6 */
/* Page footer */
#section6-container{
	width: 100%;
	height: 250px;
	justify-content: flex-end;
	align-items: flex-end;
	background-color: white;
}
#section6-inner-container{
	width: 100%;
	height: 200px;
	background-color: white;
	justify-content: space-between;
}

#section6-left-container{
	width: 50%;
	background-color: white;
	height: 100%;
	justify-content: flex-start;
}

/* Icons */
#section6-links-container{
	height: 150px;
	background-color: white;
	width: 30%;
	min-width: 230px;
	justify-content: center;
	padding-right: 25px;
	padding-left: 100px;
}

#section6-email-icon-container{
	height: 100px;
	width: 100px;
	padding-right: 25px;
}
#section6-email-icon{
	height: 100%;
	width: 100%;
}
#section6-linkedin-icon-container{
	height: 100px;
	width: 100px;
}
#section6-linkedin-icon{
	height: 100%;
	width: 100%;
}

#section6-copyright-container{

}
#section6-copyright-text{
	color: #757575;
	font-size: 20px;
}

#section6-right-container{
	width: 50%;
	background-color: white;
	justify-content: flex-end;
}

/* Credits */
#section6-credits-container{
	align-items: flex-end;
}

#section6-credits-text1{
	margin: 0px;
	color: #757575;
	font-size: 15px;
	line-height: 1;
}
#section6-credits-text2{
	margin: 0px;
	color: #757575;
	font-size: 15px;
	line-height: 1;
}
#section6-credits-text3{
	margin: 0px;
	color: #757575;
	font-size: 15px;
	line-height: 1;
}

/* Resume button */
#section6-resume-button-container{
	width: 300px;
	height: 60px;
	padding-right: 100px;
	padding-left: 50px;
}
#section6-resume-button{
	width: 300px;
	height: 60px;
	border-radius: 25px;
}
#section6-resume-button-text{
	font-size: 30px;
	color: white;
}

@media screen and (max-width:1500px) {
	#section6-links-container{
		padding-left: 50px;
	}
	#section6-resume-button-container{
		width: 250px;
		height: 50px;
		padding-right: 50px;
		padding-left: 25px;
	}
	#section6-resume-button{
		width: 250px;
		height: 50px;
	}
	#section6-resume-button-text{
		font-size: 25px;
	}
}

@media screen and (max-width:1250px) {
	#section6-links-container{
		padding-left: 40px;
	}
	#section6-copyright-text{
		font-size: 15px;
	}
	#section6-resume-button-container{
		width: 230px;
		height: 50px;
		padding-right: 25px;
	}
}

@media screen and (max-width:1100px){
	#section6-credits-text1{
		font-size: 12px;
	}
	#section6-credits-text2{
		font-size: 12px;
	}
	#section6-credits-text3{
		font-size: 12px;
	}
}