/*
Paige Ryter 
*/

/* *******************  Locals  ******************* */

@import url('https://fonts.googleapis.com/css?family=Bellota Text');
@import url('https://fonts.googleapis.com/css2?family=Life+Savers:wght@800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Mr Dafoe');

.topbackground {
	background-image: radial-gradient(circle, #FFFFFF 25%,#FFFFAD);	
	/* background-image: linear-gradient(180deg, #FFFF88, #ffffff, #ffff88); 	 */
	margin: 0px;
	padding: 0%;
	width: 100%;
}
.top_title_name{font-size: 50pt;font-family: 'Life Savers';text-align: center;padding-top: 2%;font-weight: 500;color: #001499;}
.genre_name{font-size: 24pt; font-family: 'Roboto Condensed';font-feature-settings: "smcp" on;font-weight: 400;font-size: 24pt;padding-top: 5px;padding-bottom: 25px; color: #000000;}
.brand_blurb{text-align: center; font-size: 50pt; font-family: 'Mr Dafoe'; padding-top:20px;padding-bottom: 0px;font-weight: normal; color: #B00000;}

.topplane{background: url(pics/top_plane.png) 60% 70% no-repeat;}
.title_name{font-size: 35pt;text-align: left;padding-top: 2%;font-family: 'Life Savers';font-weight: 600;color: #6D0000;}

/****************************** Phones and tablets ***********************************/
@media only screen and (max-width: 1024px) {			
	.topbackground {height: auto;}
	.top_title_name{font-size: 45pt;}
	.genre_name{font-size: 20pt;}
	.brand_blurb{font-size: 33pt;}
	.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;}
	.brand_blurb{font-size: 29pt;}
}
@media only screen and (max-width: 700px) {
	.top_title_name{font-size: 35pt;}
	.genre_name{font-size: 15pt;}
	.brand_blurb{font-size: 26pt;}
}
@media only screen and (max-width: 600px) {
	.top_title_name{font-size: 30pt;}
	.genre_name{font-size: 14pt;}
	.brand_blurb{font-size: 22pt;}
}
@media only screen and (max-width: 500px) {
	.top_title_name{font-size: 30pt;}
	.genre_name{font-size: 13pt;}
	.title_name{font-size: 15pt;}
	.brand_blurb{font-size: 20pt;}
}
@media only screen and (max-width: 460px) {
	.top_title_name{font-size: 25pt;}
	.genre_name{font-size: 11pt;}
	.brand_blurb{font-size: 18pt;}
}
@media only screen and (max-width: 426px) {
	.top_title_name{font-size: 20pt;}
	.genre_name{font-size: 10pt;}
}
@media only screen and (max-width: 350px) {
	.top_title_name{font-size: 18pt;}
	.genre_name{font-size: 9pt;}
	.brand_blurb{font-size: 15pt;}
}