@charset "utf-8";
/* CSS Document */

.row {
  display: flex;
  flex-wrap: wrap;
}

.col {
  flex: 1  0 18% ; /* The important bit. This percentage decides your columns. 
 The percent can be px. It just represents your minimum starting width.
  */
  margin: 5px;
  background: tomato;
  height: 50px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
	font-size: 1.3em;
	text-align: center;
}

a:link {
  color: white;
}

/* visited link */
a:visited {
  color: lightgoldenrodyellow;
}

a:link {
  text-decoration: none;
}

@media only screen and (min-width : 1101px) {
	
#top-name {
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		font-size: 5em;
		
	} 	
	
	}
	
	








@media only screen and (min-width : 601px) and (max-width : 1100px){
	
#top-name {
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		font-size: 5em;
		
	} 	
	

}



@media screen and (max-width: 600px) { 
	
	
#top-name {
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		font-size: 2em;
		
	} 
	
}






@media only screen and (min-width : 150px) and (max-width : 600px){
	
	#top-name {
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		font-size: 2em;
		
	} 
	
.col{
		
	font-size: 1em;	
		
	}
}