body {
	background-color: #2c2e34
}

.spacerDiv {
	height: 5em;
}

.logoDiv {
	background-image: url(/Images/logoBG.png);
	border-style: outset; <!--double, solid, etc-->
	border-color: #858377;
	height: 15.25em;
	overflow: hidden;
}

.logoText {
	font-size: 6.25em;
	font-family: "Supersonic Rocketship", sans-serif;
	color: #858377;
	display: inline-block;
	margin: 0;
	float: right;
	padding: 1.1em .25em 0em 0em;
}

.mainLogo {
	width: 17.3em;
	height: 13em;
	background-size: contain;
	background-repeat: no-repeat;
	margin: .9em;
	padding: 0.313em;
	background-image: url(/Images/FoolioGamesLogo.png);
	border-radius: 1.4em;/*63*/
	display: inline-block;
}

.BADRowFlexContainer {
	width: 100%;
	height: 25em;
	display: flex;
	justify-content: space-evenly;
	flex-direction: row;
}

.BADColumnFlexContainer {
	width: 37.5em;
	height: 25em;
	display: flex;
	flex-direction: column;
	min-width: 0em;
	min-height: 0em;
	border: solid;
	border-radius: 1.37em;
	border-width: 3px;
	background-color: #858377;
	margin: 1em;
}

.bounceADudeImage {
	width: 100%;
	height: 134%;
	background-size: contain;
	background-repeat: no-repeat;
	background-image: url(/Images/FeatureGraphicFinal.png);
	padding: 0.313em;
	border-radius: 1.25em 1.25em 0 0;
	display: flex;
	flex-grow: 1;
	box-sizing: border-box;
}

.storeLinkContainer {
	width: 100%;
	height: 50%;
	display: flex;
	margin: 0.625em 0.313em 0.313em 0.313em:
	flex-direction: row;
	justify-content: space-evenly;
	align-items: center;
}

.gPlayLinkDiv {
	width: 10em;
	height: 3.125em;
	background-size: contain;
	background-repeat: no-repeat;
	background-image: url(/Images/googlePlayBadge.png);
	border: solid;
	border-radius: 0.625em;
	border-color: #2e3338;
}

.IOSLinkDiv {
	width: 9.3em;
	height: 3.125em;
	background-size: contain;
	background-repeat: no-repeat;
	background-image: url(/Images/iosBadge.png);
	border: solid;
	border-radius: 0.625em;
	border-color: #2e3338;
}

.storeLink {
	width: 100%;
	height: 100%;
	display: block;
}

.youTubeIframe {
	width: 45em;
	height: 25.313em;
	display: flex;
	box-sizing: border-box;
	min-width: 0em;
	min-height: 0em;
	border: solid;
	border-radius: 1.37em;
	border-width: 3px;
	margin: 1em;
}

@media screen and (width <= 510px){
	.spacerDiv {
		height: .5em;
	}
	
	.logoDiv {
		height: 11.3em;
	}

	.logoText {
		display: none;
	}

	.mainLogo {
		width: 12.5em;
		height: 8.5em;
		padding: 0.5em 0em .5em 0em;
		margin-left: auto;
		margin-right: auto;
		display: block;
		border-radius: .9em;
	}
	
	.BADRowFlexContainer {
		width: 95%;
		height: 40em;
		flex-direction: column;
		justify-content: space-evenly;
	}

	.BADColumnFlexContainer {
		width: 90%;
		height: 17em;
		margin-left: 2.1em;
	}
	
	.bounceADudeImage {
		width: 100%;
		height: 155%;
	}
	
	.storeLinkContainer {
		width: 100%;
		height: 50%;
	}
	
	.gPlayLinkDiv {
		width: 9.5em;
		height: 2.8em;
		border-radius: 0.5em;
	}

	.IOSLinkDiv {
		width: 8.3em;
		height: 2.8em;
		border-radius: 0.5em;
	}
	
	.youTubeIframe {
		width: 91%;
		height: auto;
		margin-left: 2.1em;
		aspect-ratio: 16 / 9;
	}
}

@media screen and (511px <= width <= 640px){
	.spacerDiv {
		height: 1em;
	}
	
	.logoDiv {
		height: 9em;
	}

	.logoText {
		font-size: 2.75em;
		margin: 0;
		float: right;
		padding: 1.75em .25em 0em 0em;
	}

	.mainLogo {
		width: 8.5em;
		height: 6.25em;
		margin: .9em;
		padding: 0.5em;
		border-radius: .75em;
	}
	
	.BADRowFlexContainer {
		width: 95%;
		height: 45em;
		flex-direction: column;
		justify-content: space-evenly;
	}

	.BADColumnFlexContainer {
		width: 90%;
		height: 20em;
		margin-left: 2.4em;
	}
	
	.bounceADudeImage {
		width: 100%;
		height: 130%;
	}
	
	.storeLinkContainer {
		width: 100%;
		height: 35%;
	}
	
	.gPlayLinkDiv {
		width: 9.5em;
		height: 2.8em;
		border-radius: 0.55em;
	}

	.IOSLinkDiv {
		width: 8.3em;
		height: 2.8em;
		border-radius: 0.65em;
	}
	
	.youTubeIframe {
		width: 91%;
		height: auto;
		margin-left: 2.4em;
		aspect-ratio: 16 / 9;
	}
}

@media screen and (641px <= width <= 768px){
	.spacerDiv {
		height: 1.5em;
	}
	
	.logoDiv {
		height: 11em;
	}

	.logoText {
		font-size: 3.75em;
		margin: 0;
		float: right;
		padding: 1.4em .25em 0em 0em;
	}

	.mainLogo {
		width: 10.5em;
		height: 7.75em;
		margin: 1em;
		padding: 0.5em;
		border-radius: .9em;
	}
	
	.BADRowFlexContainer {
		width: 95%;
		height: 54em;
		flex-direction: column;
		justify-content: space-evenly;
	}

	.BADColumnFlexContainer {
		width: 90%;
		height: 24em;
		margin-left: 3em;
	}
	
	.bounceADudeImage {
		width: 100%;
		height: 140%;
	}
	
	.storeLinkContainer {
		width: 100%;
		height: 35%;
	}
	
	.gPlayLinkDiv {
		width: 9.5em;
		height: 2.8em;
		border-radius: 0.5em;
	}

	.IOSLinkDiv {
		width: 8.3em;
		height: 2.8em;
		border-radius: 0.5em;
	}
	
	.youTubeIframe {
		width: 91%;
		height: auto;
		margin-left: 3em;
		aspect-ratio: 16 / 9;
	}
}

@media screen and (769px <= width <= 1024px){
	.spacerDiv {
		height: 3em;
	}
	
	.logoDiv {
		height: 13em;
	}

	.logoText {
		font-size: 4.5em;
		margin: 0;
		float: right;
		padding: 1.4em .25em 0em 0em;
	}

	.mainLogo {
		width: 13em;
		height: 9.75em;
		margin: 1em;
		padding: 0.5em;
		border-radius: 1.3em;
	}
	
	.BADRowFlexContainer {
		width: 100%;
		height: 15em;
	}

	.BADColumnFlexContainer {
		width: 20em;
		height: 15em;
	}
	
	.bounceADudeImage {
		width: 100%;
		height: 200%;
	}
	
	.storeLinkContainer {
		width: 100%;
		height: 100%;
		margin: 0.625em 0.313em 0.313em 0.313em:
	}
	
	.gPlayLinkDiv {
		width: 6.25em;
		height: 1.9em;
		border-radius: 0.5em;
	}

	.IOSLinkDiv {
		width: 5.9em;
		height: 2em;
		border-radius: 0.5em;
	}
	
	.youTubeIframe {
		width: 27em;
		height: 15.313em;
	}
}

@media screen and (1025px <= width <= 1420px){
	.spacerDiv {
		height: 4em;
	}

	.logoText {
		font-size: 5.5em;
		margin: 0;
		float: right;
		padding: 1.4em .25em 0em 0em;
	}
	
	.BADRowFlexContainer {
		width: 100%;
		height: 20em;
	}

	.BADColumnFlexContainer {
		width: 30em;
		height: 20em;
	}
	
	.bounceADudeImage {
		width: 100%;
		height: 200%;
	}
	
	.storeLinkContainer {
		width: 100%;
		height: 70%;
		margin: 0.625em 0.313em 0.313em 0.313em:
	}
	
	.youTubeIframe {
		width: 36em;
		height: 20.313em;
	}
}