* {box-sizing: border-box}

body {
	margin: auto;
	height: 100%;
	background-image: linear-gradient(#0D1D51, #111111);
	background-repeat: no-repeat;
	background-size: auto;
	padding-bottom: 10px;
}

.mobile_social {
	position: fixed;
	right: 0;
	top: 0;
	width: 50px;
	height: 150px;
	display: block;
	text-align: center;
	padding: 5px 0;
}

.introfont {
	font-family: "Courgette", serif;
	font-weight: 560;
	font-size: 36px;
}

.textfont {
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 560;
	font-size: 24px;
	color: white;
}

.front_pg {
	margin: auto;
	width: 90%;
	text-align: center;
	color: #EEEEEE;
}

.front_pg a:link {color: white; text-decoration: none;}
.front_pg a:visited {color: white;text-decoration: none;}
.front_pg a:hover {color: #ddc5a1;text-decoration: none;}
.front_pg a:active {text-decoration: none; color: #222222;}

.img_format {
	width: 85%;
}

.services-flex {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}

.services-flex > div {
	width: 100%;
	margin: 10px;
	border-radius: 8px;
}

.package_img {
	background: url(./images/package_mobile.jpg) no-repeat center top;
	background-size: cover;
	background-clip: border-box;
	height: 400px;
	font-family: "Barlow Condensed", sans-serif;
	font-size: 36px;
	font-weight: 600;
	text-shadow: 0 0 10px black;
}

.dance_img {
	background: url(./images/dance_mobile.jpg) no-repeat center top;
	background-size: cover;
	background-clip: border-box;
	height: 400px;
	font-family: "Barlow Condensed", sans-serif;
	font-size: 36px;
	font-weight: 600;
	text-shadow: 0 0 10px red;
}

.marquee_img {
	background: url(./images/marquee_mobile.jpg) no-repeat center bottom;
	background-size: cover;
	background-clip: border-box;
	height: 400px;
	font-family: "Barlow Condensed", sans-serif;
	font-size: 36px;
	font-weight: 600;
	text-shadow: 0 0 10px orange;
}

.other_img {
	background: url(./images/other_mobile.jpg) no-repeat center top;
	background-size: cover;
	background-clip: border-box;
	height: 400px;
	font-family: "Barlow Condensed", sans-serif;
	font-size: 36px;
	font-weight: 600;
	text-shadow: 0 0 8px blue;
}

@media (min-width: 400px) {
	.package_img {
		background: url(./images/package_mid.jpg) no-repeat center bottom;
		background-size: 633px 500px;
	}
	.dance_img {
		background: url(./images/dance_mid.jpg) no-repeat center top;
		background-size: 633px 500px;
	}
	.marquee_img {
		background: url(./images/marquee_mid.jpg) no-repeat center bottom;
		background-size: 633px 500px;
	}
	.other_img {
		background: url(./images/other_mid.jpg) no-repeat center top;
		background-size: 633px 500px;
	}
}

@media (min-width: 650px) {
	.img_format {
		width: 350px;
	}
	.introfont {
		font-size: 50px;
	}
	.textfont {
		font-size: 32px;
	}
	.services-flex > div {
		max-width: 570px;
	}
	.dance_img {
		font-size: 33px;
	}
	.marquee_img {
		font-size: 33px;
	}
	.other_img {
		font-size: 33px;
	}
}