html, body{
	padding: 0%;
	margin: 0%;
	overflow-x: hidden;
	cursor: default;
	/*font-family: 'Work Sans', sans-serif;*/
	scroll-behavior: smooth;

}
a:link {
  color: #e6e3e3;
}
a:visited {
  color: #e6e3e3;
}
a:active {
  color: #e6e3e3;
}
a{
	color: green;
}
p{
	/*font-family: 'Noto Sans Mono', monospace;*/
	font-family: 'Work Sans', sans-serif;
}
#loader{
	height: 100vh;
	width: 100vw;
	position: fixed;
	z-index: 10;
	text-align: center;
	background: #242424;
	color: #03feec;
}
#loaderparticles{
	position: absolute;	
	margin-top: -8%;
	width: 100vw;
	height: 100vh;
	overflow-y: hidden;
	overflow-x: hidden;
	z-index: 2;
}

#load_text{
	font-size: 200%;
	font-weight: bolder;
	padding-top: 20%;
	color: #ffda1f;

}

.page{
	height: 100vh;
	width: 100%;
	overflow-x: hidden;
}
#particles{
	position: absolute;	
	margin-top: -8%;
	width: 90vw;
	overflow-y: hidden;
	overflow-x: hidden;
	z-index: 2;
}
#page1{
	background: #242424;
	color: #e6e3e3;
	padding: 10% 5%;
	overflow-y: hidden;
}
#title{
	font-size: 200%;
	padding-top: 5%; 
	font-weight: lighter;
	font-family: 'Lobster', cursive;
	z-index: 1;
}
#github_button{
	padding-top: 10%;
	width: 20%;
	border-radius: 50%;
	filter: grayscale(1);
	display: inline-block;
}
#qoute{
	display: inline-block;
	padding: 0 0 0 5%;
	position: relative;
	top: 40px;
}
.col2_page1{
	text-align: center;
}	
.links{
	text-align: left;
	padding-top: 30%;
}
.callaction{
	color: #ffffff;
	font-weight: normal;
	font-size: 110%;
}
.callaction:hover{
	font-weight: bold;
	text-decoration: none;
	color: #ffffff;
	font-size: 110%;
}
.nav_links{
	margin: 10% 0 20% 0;
	font-weight: lighter;
	position: relative;
	z-index: 3;
}



#page2{
	background: #e6e3e3;
	color: #242424;
	padding: 0 10% 7% 10%;
}
#title_bold{
	font-size: 400%;
	font-weight: bolder;
}
.icons{
	width: 20%;
	padding-top: 5%; 
	opacity: 0;
}
#tools_title{
	padding: 10% 0% 5% 0;
	font-size: 250%;
	text-align: center;
	font-weight: bolder;
	color: #4a4a4a;
}
.long_card{
	background:#e6e3e3;
	text-align: center;
}
.graphs{
	padding-top: 10%;
}
#overall_data_graphs{
	padding-top: 5%;
}
#graph_definition{
	text-align: justify;
	padding-top: 3%;
}



#page3{
	background: #242424;
	color: #e6e3e3;
	width: 100vw;
	overflow-x: hidden;
	padding: 5% 0 5% 0;
}
#web_dev_title{
	font-weight: bolder;
	font-size: 250%;
	padding: 20% 0 0 0;
	font-family: 'Lobster', cursive;
}
#web_dev_info{
	padding: 10% 0 0 0; 
	text-align: justify;
}
.image_card{
	width: 350px;
	height: 200px;
	background: white;
	position: relative;
	box-shadow: 0 5px 5px #000000;
}
#image_card_1{
	background-image: url("images/create.png");
	background-size: cover;
	background-repeat: no-repeat;
}
#image_card_2{
	z-index: 2;
	background-image: url("images/program.png");
	background-size: cover;
	background-repeat: no-repeat;
}
#image_card_3{
	z-index: 2;
	background: #e3e3e3;
	background-image: url("images/deploy.png");
	background-size: cover;
	background-repeat: no-repeat;
}
.web_dev_sample_card{
	padding: 20% 0 0 20%;
}
#web_dev_small_text{
	padding: 30% 0 0 10%;
}


#page4{
	background: #e6e3e3;
	color: #242424;
	padding-bottom: 5%;
}
#python_title{
	font-weight: bolder;
	font-size: 250%;
	padding: 20% 0 0 0;
	font-family: 'Lobster', cursive;
}
#python_dev_info{
	padding: 10% 0 0 0; 
	text-align: justify;
}
#git_open_site{
	text-align: center;
}
#relink_text{
	font-size: 140%;
	color: #555555;
	padding: 10% 0 0% 0;
}
#small_github_logo{
	width: 10%;
}
.python_skills{
	font-size: 120%;
	font-weight: bold;
	text-align: center;
	padding-top: 10%;
	color: #4a4a4a;
}
#python_skills{
	padding-top: 15%;
}



#page5{
	background: #F0AF82;
	color: #242424;	
	padding-bottom: 5%;
}
#page5_paper{
	background: #F0AF82;
	color: #242424;
	box-shadow: 0 5px 15px #bababa;
	margin: 5% 5% 0 5%;
	padding: 2%;
}
#game_dev_info{
	padding: 0 0 5% 0; 
	text-align: justify;
}
#itch_link{
	text-align: center;
	color: #242424;
	font-weight: bolder;
	padding: 0 0 10% 0; 
}



#page6{
	background: #e6e3e3;
	color: #242424;	
	padding-bottom: 5%;
}

#page6_paper{
	background: #e3dede;
	color: #242424;
	box-shadow: 0 5px 15px #bababa;
	margin: 5% 5% 0 5%;
	padding: 2%;
}


#info_title{
	text-align: center;
	font-weight: bolder;
	font-size: 200%;
	padding-top: 5%;
}
#about_image{
	background-image: url("images/profile.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
.info_images{
	padding: 20%;
}
.info_titles{
	font-size: 140%;
	font-weight: bold;
	padding: 20% 0 0 5%;
	color: #a6706d;
}
#profile_bio{
	text-align: justify;
	padding: 5% 5% 0 5%;
}
#more_about_btn{
	text-align: center;
	margin: 5% 5%;
	padding: 2% 2%;
	background: #945451;
	color: #e6e3e3;
}

#contact_page{
	text-align: center;
	margin-top: 10%;
}
#contact_image{
	background-image: url("images/cont_bg.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	box-shadow: 0 5px 15px #bababa;
}
#contact_title{
	color: #0079db;
}
#contact_info{
	text-align: center;
}
#contactpage{
	padding: 5% 0 10% 0 ;
}


footer{
	background: #242424;
	padding: 5% 5%;
	text-align: center;
	color: #e6e3e3;
}
.footer_link{
	color: #e6e3e3;
}
#github_footer{
	width: 15%;
}



@media only screen and (max-width: 550px){
	#tools_dougnut_graphs{
		display: none;
	}
}


@media only screen and (max-width: 720px){
	#title{
		font-size: 140%;
	}#particles{
		position: absolute;	
		margin-top: -8%;
		width: 90vw;
		height: 70vh;
		overflow-y: hidden;
		overflow-x: hidden;
		z-index: 2;
	}
	.dev_type{
		text-align: center;
		font-weight: lighter;
	}
	#title_bold{
		font-size: 400%;
		font-weight: bolder;
	}
	#web_dev_small_text{
		padding: 30% 0 0 0;
		text-align:  center;
		font-size: 120%;
	}
	.web_dev_sample_card{
		padding: 30% 0 0 5%;
	}
	#about_image{
		height: 60vh;
		width: 100vw;
	}
	#contact_page{
		text-align: center;
		margin-top: 30%;
	}
	#contact_image{
		height: 30vh;
	}
	#load_text{
		padding-top: 50%;
	}
}


@media only screen and (max-width: 1100px){
	.page{
		height: 100vh;
		width: 100%;
		overflow-x: scroll;
	}
	#title{
		font-size: 140%;
		padding-top: 5%; 
		font-weight: lighter;
		text-align: center;
	}
	.dev_type{
		text-align: center;
		font-weight: lighter;
	}
	#title_bold{
		font-size: 200%;
		font-weight: bolder;
	}
}