/**** applies CSS responsive layout rule to screens smaller than 499 pixels (this is would include mobile size screens) ****/
@media screen and (max-width: 499px) {

img {
	display: none;
}

#about h2 {
	float: center;
}

#about p {
	margin-left: 0px;
	text-align: justify;
	font-family: 'Yantramanav', sans-serif;
	font-weight: 300; 
	font-size: 1.1em;
}

#skills {
	padding-top: 0.5%;
	padding-bottom: 0.5%;
	display: flex;
	flex-direction: column;
}

#sublist li {
	list-style: square;
	text-indent: 20px;
	}

.synth {
	display: flex;
	align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

}

/**** applies CSS responsive layout rule to screens bigger than 500 pixels (this typically includes tablets) ****/
@media screen and (min-width: 500px) { 

#skills {
	padding-top: 0.5%;
	padding-bottom: 0.5%;
	display: flex;
	flex-direction: column;
}
#sublist li {
	list-style: square;
	text-indent: 20px;
	}




}

/**** applies CSS responsive layout rule to screen bigger than 660pixels (this is typically desktop size) ****/
@media screen and (min-width: 800px) { 









}