/*
Andie Alexander 
*/
@import url('https://fonts.googleapis.com/css?family=Marcellus SC');
@import url('https://fonts.googleapis.com/css?family=Sofia');
@import url('https://fonts.googleapis.com/css?family=Fjalla One');
.topbackground {
	background-color: #000000;
	margin-left: auto; 
	margin-right: auto; 
	padding-top: 0%;
	padding-right: 0%;
	padding-bottom: 0%;
	padding-left: 2%;
	text-align: center;
	height: auto;
}

.top_title_name{font-size: 50pt;text-align: center;padding-top: 2%;width: 100%;font-family: 'Sofia'; color: #FFE699;}
.genre_name{font-size: 24pt; padding-top: 0;text-align: center;width: 100%;font-family: 'Marcellus SC'; color: #FFFFFF;}
.title_name{font-size: 30pt;text-align: left;padding-top: 2%;font-family: 'Sofia';font-weight: 600;color: #002060;}


/****************************** Phones and tablets ***********************************/
@media only screen and (max-width: 1024px) {			
	.top_title_name{font-size: 45pt;}
	.genre_name{font-size: 20pt;}
	.title_name{font-size: 25pt;}
}

@media only screen and (max-width: 768px) {
	.top_title_name{font-size: 40pt;}
	.genre_name{font-size: 15pt;}
	.title_name{font-size: 20pt;}
}

@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;}
}
@media only screen and (max-width: 460px) {
	.top_title_name{font-size: 25pt;}
	.genre_name{font-size: 11pt;}
}

@media only screen and (max-width: 426px) {
	.top_title_name{font-size: 20pt;}
	.genre_name{font-size: 10pt;}
	.title_name{font-size: 10pt;}
}

@media only screen and (max-width: 350px) {
	.top_title_name{font-size: 18pt;}
	.genre_name{font-size: 9pt;}
}