body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-weight: normal;
	background-color: rgb(255, 255, 255);
}

.centered {
	text-align: center;
}

.image-responsive {
	width: 100%;
	height: auto;
}

.image-hero {
	max-width: 70%;
	height: auto;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.light {
	display: block;
}

.dark {
	display: none;
}

.main {
	background-color: rgb(255, 255, 255);
	width: 100%;
	float: left;
}

#heading {
	font-family: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 2.5rem;
	font-weight: bold;
	margin-bottom: 0.2em;
}

#appstore_badge {
	background-color: rgb(255, 255, 255);
}

.content {
	width: 70%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;

}

.contentGrid img {
	width: 50%;
}

#lightBody {
	font-family: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 14pt;
	font-weight: 300;
	margin-bottom: 3rem;
	line-height: 1.5;
}

#body {
	font-family: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 15pt;
	font-weight: 350;
	margin-bottom: 3rem;
}

.container {
	margin-left: auto;
	margin-right: auto;
	width: 75%;
}

#altBackground {
	background-color: rgba(0, 0, 0, 0.02);
}

#altBackground img {
	width: 50%;
}


.header {
	width: 100%;
	float: left;
}

.headerImg {
	width: 45%;
	margin-left: auto;
	margin-right: auto;
}

.contentGrid {
	width: 100%;
	float: left;
	margin-top: 1.5%;
	padding-top: 50px;
	padding-bottom: 50px;
}

.contentGridText {
	width: 40%;
	margin-left: auto;
	margin-right: auto;
}

.headerGrid {
	width: 100%;
	float: left;
}


.appStoreButtonContainer {
	width: 250px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 0px;
	padding-bottom: 0px;
}

.footer {
	padding-top: 25px;
	margin: 50px 0;
	text-align: center;
	clear: both;
}

.footer a {
	color: rgb(150, 150, 150);
	text-decoration: none;
}

.featureGrid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
	margin: 0 auto;
    width: 70%;
	margin-bottom: 50px;
}

.featureItem {
    background-color: #f3f3f3;
    border-radius: 25px;
    margin: 15px;
    flex: 0 0 calc(33.33% - 30px);
    text-align: left;
    padding: 15px 15px 15px 15px;
    box-sizing: border-box;
	height: 220px;
}

.featureItem h3 {
    font-weight: bold;
}

.featureItemImage {
    height: 20%;
    display: inline-block;
}

@media (max-width: 1200px) {
    .featureItem {
        flex: 0 0 calc(50% - 30px);
    }
	.featureGrid {
		width: 85%;
	}
}

@media (min-width: 801px) {
	footer a:not(:last-child) {
		margin-right: 6%;
	}
}

.footer a:hover {
	text-decoration: underline;
}

@media (max-width: 800px) {

	.content {
		width: 100%;
		float: left;
	}

	footer a {
		display: block;
		text-align: center;
		line-height: 2;
	}

    .featureItem {
        flex: 0 0 calc(100% - 30px);
    }
	.featureGrid {
		width: 95%;
	}
	.image-hero {
		max-width: 95%;
	}

	#body {
		font-size: 12pt;
	}

	#heading {
		font-size: 25pt;
	}

	#lightBody {
		font-size: 11pt;
	}

	.headerImg {
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}

	.header {
		margin-top: 50px;
	}

	.contentGridText {
		width: 80%;
		margin-left: auto;
		margin-right: auto;
	}

	.contentGrid img {
		width: 90%;
	}

	#altBackground img {
		width: 90%;
	}
}

@media (prefers-color-scheme: dark) {
	body {
		background-color: rgb(40, 40, 40);
		color: #FFF;
	}

	.main {
		background-color: rgb(40, 40, 40);
	}


	.light {
		display: none;
	}

	#altBackground {
		background-color: rgba(255, 255, 255, 0.1);
		color: rgb(255, 255, 255);
	}

	#appstore_badge {
		background-color: rgb(40, 40, 40);
	}

	.dark {
		display: block;
	}

	.content a {
		text-decoration: none;
		color: rgb(255, 255, 255);
	}

	.featureItem {
		background-color: rgba(255, 255, 255, 0.1);
	}
}