:root {
	--background-color: #fafafa;//#f9f9f9;
	--color-major-feature: #ffffff;
	--color-minor-feature: #f2f2f2;
	--color-craft: #F1CF46;
	--color-growth: #91CC75;
	--color-health: #5CA6D9;
	--color-social: #E99B38;
	--color-footer-marketing: rgba(0, 0, 0, 0.85);
	--color-text-craft: color(display-p3 0.312 0.264 0.088);
	--color-text-growth: color(display-p3 0.167 0.292 0.108);
	--color-text-health: color(display-p3 0.076 0.223 0.324);
	--color-text-social: color(display-p3 0.36 0.219 0.04);
}

video {
	width: 100%;
	height: auto;
}

img {
	display: block;
	margin: auto;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html, body {
	font-family: -apple-system, BlinkMacSystemFont ,Helvetica, Avenir, sans-serif;
	background-color: var(--background-color);
	text-align: center;
}

html a:link {
	text-decoration: none;
}

html a, a:visited, a:hover, a:active {
	color: inherit;
}

.page {
	
}

header {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	height: 100vh;
	min-height: 600px;
	/* background-color: green; */
	/* background-image: url(../images/Hero-Background.png);
	 background-size: contain;
	 background-position: center;
	 background-repeat: no-repeat; */
}

header .hero-name {
	display: flex;
	flex-direction: column;
	height: 12%;
	margin-top: 16px;
	/* background-color: red; */
}

header .hero-image {
	height: 70%;
	object-fit: contain;
	margin: 0 5%;
}

header .hero-image img {
	height: 100%;
	width: 100%;
	object-fit: contain;
	/* background-color: purple; */
}

header .hero-app-store {
	height: 10%;
	margin-top: 16px;
}

header .hero-app-store img{
	height: 44px;
	width: auto;
}

/* @media only screen and (max-width: 500px) {
 header .hero-image img {
 height: 100%;
 width: auto;
 }
 } */

/* @media only screen and (max-width: 500px) {
 header {
 background-image: url(../images/iphone-dashboard.png);
 background-size: contain;
 background-position: center;
 background-repeat: no-repeat;
 }
 } */

header #app-icon {
	border-radius: 22.37%; //17.544%;
	width: 60px;
	height: 60px;
	box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.15);
}

header #app-store-badge {
	padding: 16px;
	margin-bottom: 32px;
}

/* #app-store-badge img {
 height: 48px;
 width: auto;
 } */

header h1 {
	font-size: 2rem;
	/* font-weight: 300; */
	margin: 0px;
	/* padding-top: 8px; */
}

header h2 {
	font-size: 1.5rem;
	text-align: center;
	color: #575757;
	overflow:hidden;
	white-space: nowrap;
	/* margin-bottom: 16px; */
}

.spacer {
	flex-grow: 1;
}

footer {
	display: flex;
	flex-direction:row;
	justify-content: space-around;
	flex-wrap: wrap;
	background-color: var(--color-footer-marketing);
	color: white;
	/* height: 50vh; */
	padding: 16px 0 16px 0;
}

footer .section {
	display: flex;
	flex-direction: column;
}

footer .section h1 {
	font-size: medium;
}

footer .section ul li {
	list-style-type: none;
	padding-top: 16px;
}

footer a:link, footer a:visited, footer a:hover, footer a:active {
	color: white;
}

.iphone-screenshot {
	max-height: 75vh;
}

.iphone-screenshot img {
	object-fit: contain;
	width:100%;
	height:100%;
	padding: 16px;
}

@media only screen and (max-width: 600px) {
	footer {
		padding-bottom: 64px;
	}
}

section {
	text-align: center;
	/* margin-top: 32px; */
	margin-bottom: 32px;
}

/* Main Features */

.main-features {
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* width: 60%; */
	/* margin: 2em auto; */
	background-color: var(--main-feature-background-color);
}

.main-feature {
	display: flex;
}

.main-feature .content h2 {
	color: white;
	text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
}

.main-feature:nth-child(1) {
	background-color: var(--color-health);
}

.main-feature:nth-child(1) .content {
	color: var(--color-text-health);
}

.main-feature:nth-child(2) {
	background-color: var(--color-growth);
}

.main-feature:nth-child(2) .content {
	color: var(--color-text-growth);
}

.main-feature:nth-child(3) {
	background-color: var(--color-craft);
}

.main-feature:nth-child(3) .content {
	color: var(--color-text-craft);
}

.main-feature:nth-child(4) {
	background-color: var(--color-social);
}

.main-feature:nth-child(4) .content {
	color: var(--color-text-social);
}

.main-feature .description {
	display: flex;
	flex-direction: column;
	/* max-width: 50%; */
	justify-content: center;
	/* padding: 32px; */
}

.main-feature .content .media {
	display: flex;
	flex-direction: column;
	align-content: center;
	justify-content: center;
	/* background-color: red; */
}


@media only screen and (orientation:landscape) {
	.main-feature .content {
		width: 60%;
		height: 75vh;
		margin:16px auto;
		display: inherit;
		flex-direction: inherit;
	}
	
	.main-feature .description {
		width: 48%;
		/* background-color: yellow; */
	}
	
	.main-feature .content .media {
		width: 48%;
		/* background-color: green; */
	}
	
	.main-feature:nth-child(odd) .content {
		flex-direction: row;
		justify-content: space-between;
	}
	
	.main-feature:nth-child(even) .content {
		flex-direction: row-reverse;
		justify-content: space-between;
	}
	
	.main-feature:nth-child(odd) .description {
		text-align: right;
	}
	
	.main-feature:nth-child(even) .description {
		text-align: left;
	}
	
	.main-feature img {
		display: block;
		width: auto;
		max-height: 70vh;
		/* margin: 64px auto; */
		/* max-width: 300px; */
		border-radius: 16px;
		box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.2);
	}
	
	.main-feature:nth-child(odd) img {
		margin-left: 0;
		margin-right: auto;
	}
	
	.main-feature:nth-child(even) img {
		margin-left: auto;
		margin-right: 0;
	}
	
	.main-feature video {
		height: 70vh;
		width: auto;
		border-radius: 16px;
		box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.2);
	}
	
	.main-feature:nth-child(odd) video {
		margin-left: 0;
		margin-right: auto;
	}
	
	.main-feature:nth-child(even) video {
		margin-left: auto;
		margin-right: 0;
	}
	
	.main-feature .content h1 {
		font-size: 1.5rem;
		/* font-weight: 300; */
		margin-bottom: 0px;
		padding-top: 8px;
	}
	
	.main-feature .content h2 {
		font-size: 1.15rem;
		/* font-weight: 500; */
		margin-bottom: 16px;
	}
}



/* Major Features */

.major-features {
	display: flex;
	flex-direction: column;
	text-align: center;
	padding-left: 8%;
	padding-right: 8%;
	margin: auto;
}

.major-features .content {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

@media only screen and (max-width: 500px) {
	.major-features {
		padding-left: 16px;
		padding-right: 16px;
		padding-top: 32px;
		padding-bottom: 32px;
	}
}

.major-feature {
	display: flex;
	flex-direction: column;
	margin: 32px;
	min-width: 300px;
	max-width: 400px;
	flex: 1 1 40%;
}

@media only screen and (max-width: 500px) {
	.major-feature {
		width: 100%;
		margin: auto;
		/* margin-left: 8px;
		 margin-right: 8px; */
		margin-top: 16px;
		margin-bottom: 16px;
		/* text-align: justify; */
		/* background-color: red; */
	}
}

.major-feature img {
	width: 76px;
	height: 76px;
	border-radius: 22.37%;//17.544%;
	box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.15);
}

.major-feature h1 {
	font-size: 1.5rem;
	text-align: center;
}

.major-feature p {
	text-align: justify;
	color: gray;
}

@media only screen and (max-width: 374px) {
	.major-feature h1 {
		font-size: 1.15rem;
	}
}


/* Mobile Styles  */
@media only screen and (max-width: 500px) {
	header {
		padding: 0px;
	}
	
	header h1 {
		padding-top: 0px;
	}
	header h2 {
		margin-bottom: 8px;
	}
	
	header #app-store-badge {
		padding: 8px;
		padding-bottom: 16px;
	}
	
	.iphone-screenshot img {
		max-height: 75vh;
	}
	.features .gallery {
		justify-content: flex-start;
	}
	.features .gallery_item img {
		border-radius: 16px;
		max-height: auto;
		max-width: 70vw;
	}
	
	footer {
		padding-left: 16px;
		padding-right: 16px;
	}
}

@media only screen and (max-width: 374px) {
	header h2 {
		font-size: 1rem;
	}
}

@media only screen and (max-width: 500px), (orientation:portrait) {
	.main-feature .content {
		display: flex;
		flex-direction: column-reverse;
		justify-content: center;
		height: 100vh;
		width: 100%;
	}
	
	.main-feature .description {
		text-align: center;
		margin: 0 16px;
	}
	
	.main-feature .media {
		display: flex;
		flex-direction: column;
	}
	
	.main-feature img {
		height: 60vh;
		width: auto;
		/* max-width: 80%; */
		/* max-width: 300px; */
		border-radius: 16px;
		box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.2);
	}
	
	.main-feature video {
		height: 60vh;
		width: auto;
		margin: auto;
		border-radius: 16px;
		box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.2);
	}
}

@media only screen and (max-width: 500px) {
	.main-feature .content h1 {
		font-size: 1.5rem;
		/* font-weight: 300; */
		margin-bottom: 0px;
		padding-top: 8px;
	}
	
	.main-feature .content h2 {
		font-size: 1.15rem;
		/* font-weight: 500; */
		margin-bottom: 16px;
	}
	
	.main-feature .content p {
		text-align: justify ;	
	}
}

.minor-features {
	display: flex;
	flex-direction: column;
	text-align: center;
	/* background-color: var(--color-minor-feature); */
	padding-left: 8%;
	padding-right: 8%;
}

.minor-features .content {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.minor-feature {
	display: flex;
	flex-direction: column;
	margin: 32px;
	flex: 1 1 17%;
	max-width: 200px;
	/* background-color: red; */
}

.minor-feature img {
	width: 48px;
	height: 48px;
	border-radius: 22.37%;
	/* border-radius: 12px; */
}

.minor-feature h1 {
	font-size: 0.75rem;
	font-weight: 300;
	margin: 16px auto;
}

@media (prefers-color-scheme: dark) {
	:root {
		--background-color: #1b1b1b;
	}
	html, body {
		background-color: var(--background-color);
		color: #ffffff;
	}
	
	header h2 {
		color: #9e9e9e;
	}
	
	.features {
		background-color: #9e9e9e;
		color: black;
	}
	
	.faq code {
		color: black;
	}
}

.privacy {
	font-weight: bold;
}

.privacy h3 {
	padding-bottom: 16px;
}

.faq h2 > a {
	text-decoration: none;
	color: inherit;
}

.faq a {
	color: slategray;
}

.faq {
	max-width: 600px;
	margin: auto;
	padding: 0px 32px 64px 32px;
	text-align: justify;
}

.faq h1 {
	text-align: center;
}

.faq h2 {
	margin-block-start: 32px;
	margin-block-end: 16px;
	text-align: center;
}

.faq h3 {
	margin-block-start: 16px;
	padding-bottom: 8px;
}

.faq h4 {
	margin-block-start: 16px;
	magrin-block-end: 4px;
}

.faq ul {
	padding:8px 0px 8px 32px;
}

.faq li {
	padding: 4px 0px 4px 0px;
}

.faq ol {
	padding: 8px 0px 8px 32px;
}

.faq code {
	font-family: monospace;
	padding: 0px 8px 0px 8px;
	background: lightgray;
	border-radius: 4px;
	white-space: nowrap;
}

.app_banner {
	display: flex;
	/* flex-direction: column; */
	/* justify-content: center; */
	align-content: center;
	text-align: center;
	padding: 16px;
	background-color: var(--color-footer-marketing);
	color: white;
	width: 100%;
}

.app_banner p {
	margin: auto 0;
}

.app_banner img {
	height: 64px;
	width: 64px;
	border-radius: 17.5%;
	box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.35);
	margin-right: 16px;
}