/*
	$Author: Markee Anderson $
*/
@import url('https://fonts.googleapis.com/css?family=Sail');
@import url('https://fonts.googleapis.com/css?family=Marcellus SC');
@import url('https://fonts.googleapis.com/css?family=Risque');
@import url('https://fonts.googleapis.com/css?family=Mountains of Christmas');
@import url('https://fonts.googleapis.com/css?family=Rum Raisin');
@import url('https://fonts.googleapis.com/css?family=Grenze');
@import url('https://fonts.googleapis.com/css?family=Licorice');

.topbackground {
	background-image: radial-gradient(circle, #FFFFFF 50%,#DFC6F4);	
	margin: 0px;
	padding: 0%;
	width: 100%;
}

.top_title_name{font-size: 50pt;text-align: center;padding-top: 2%;font-family: 'Sail';font-weight: 600;color: #002060;}
.genre_name{font-size: 24pt; font-family: 'Marcellus SC';font-weight: 400;font-size: 24pt;padding-top:0; color: #9E3348;}
.title_name{font-size: 30pt;text-align: left;padding-top: 2%;font-family: 'Sail';font-weight: 600;color: #002060;}


.text_border{
	text-shadow: 2px 2px 3px #E0E0E0;  /*horizontal, vertical offset, blur*/
	/* text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; */ /*border around letters*/
}

.text-gradient {
	font-size: 45pt;
	color: #0D6003;  /* Set the background color */
	background: linear-gradient(to bottom, #0D6003 0%, #CECECE 100%);  /* Mask the color to the text, and remove the rest  */
	-webkit-background-clip: text;  /* Make the text fill color value transparent so the masked background color comes through */
	-webkit-text-fill-color: transparent;
	display: inline-block;
}

.fontsoccer {
	width: 50%;
	font-family: 'Grenze';
	text-align: center;
	font-weight: normal;
	color: #000000;	
	font-size: 30pt;
}

/****************************** Phones and tablets ***********************************/
@media only screen and (max-width: 1024px) {			
	.topbackground {height: auto;}
	.top_title_name{font-size: 45pt;}
	.genre_name{font-size: 20pt;}
	.title_name{font-size: 25pt;}
	.text-gradient{font-size: 40pt;}
	.fontsoccer{font-size: 30pt; width: 60%;}
}

@media only screen and (max-width: 768px) {
	.top_title_name{font-size: 40pt;}
	.genre_name{font-size: 15pt;}
	.title_name{font-size: 20pt;}
	.text-gradient{font-size: 35pt;}
	.fontsoccer{font-size: 25pt;width: 80%;}
}
@media only screen and (max-width: 700px) {
	.top_title_name{font-size: 35pt;}
	.genre_name{font-size: 15pt;}
}
@media only screen and (max-width: 600px) {
	.top_title_name{font-size: 30pt;}
	.genre_name{font-size: 14pt;}
}
@media only screen and (max-width: 500px) {
	.top_title_name{font-size: 30pt;}
	.genre_name{font-size: 13pt;}
	.title_name{font-size: 15pt;}
	.text-gradient{font-size: 30pt;}
	.fontsoccer{font-size: 20pt;width: 90%;}
}
@media only screen and (max-width: 460px) {
	.top_title_name{font-size: 25pt;}
	.genre_name{font-size: 11pt;}
	.fontsoccer{font-size: 15pt;}
}
@media only screen and (max-width: 426px) {
	.top_title_name{font-size: 20pt;}
	.genre_name{font-size: 10pt;}
	.text-gradient{font-size: 25pt;}
}
@media only screen and (max-width: 350px) {
	.top_title_name{font-size: 18pt;}
	.genre_name{font-size: 9pt;}
}