@font-face {
	font-family: "InputMono-Regular";
	src: url('InputMono-Regular.ttf');
}

body {
	background: black;
	color: white;
	font-family: "InputMono-Regular", sans-serif;
	text-wrap: balance;
}

a { color: white; text-underline-offset: 0.3em; }
h1 { font-size: 20pt; }
h3 { background-color: white; color: black; text-align:center; }

/* UTILITY */

.left_align { text-align: left; }
.right_align { text-align: right; }
.center_align { text-align: center; }
.vertical_align {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.full_width { width: 100%; }
.three_quarter_width { width: 75%; }
.half_width { width: 50%; }
.quarter_width { width: 25%; }

.extra_padding {
	padding-top: 50px;
	padding-bottom: 50px;
}

/* LAYOUT */

#content {
	min-width: 300px;
	max-width: 1200px;
	
	margin-left: auto;
	margin-right: auto;

	margin-top: 3em;

	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

header {
	width: 100%;
	text-align: center;
}

footer {
	width: 100%;
	padding-top: 4em;
	padding-bottom: 4em;
	text-align: center;
}

section {
	width: 100%;
	display: flex;

	flex-direction: column;
	padding-top: 2em;
	padding-bottom: 2em;
}

section>div { padding-top: 1em; }

section>div>img { width: 100%; }

.section-title { padding-bottom: 0; }
.first-section { padding-top: 0; }

 .equal-space-parent {
 	display: flex;
 	flex-direction: column;
 	justify-content: space-between;
 }

.app_icon { width: 6em; }
.hero_img { width: 75%; }
.appstore_badge { width: 8em; }
.heliographe_logo { width: 5em; }
.sns_logo { width: 2.5em; }

.doc-links {
	font-size: 1rem;
	line-height: 1.8em;

	display: flex;
	flex-direction: row;
	flex-wrap: wrap;

	justify-content: center;
	gap: 16px;
}

.doc-page-link {
	border: 2px solid #222;
	border-radius: 32px;

	padding: 8px;

	flex: 1 1 calc(50% - 32px);
	max-width: calc(50% - 32px);
}

.doc-page-link:hover {
	background-color: #222;
}

.active-doc-page {
	background-color: #222;
}

/* TYPE SIZES */

.subtitle { font-size:12pt; }
body { font-size: 14pt; }

/* RESPONSIVE */
@media (min-width: 700px)  {
	h1 { font-size: 24pt; }

	section {
		flex-direction: row;
		padding-top: 4em;

		border-bottom: 0px;
	}

	section>div {
		flex-grow: 1;
		flex-basis: 0;

		padding-top: 0em;
		padding-left: 1em;
		padding-right: 1em;
	}

	.hero_img { width: 100%; }
	.appstore_badge { width: 12em; }

	.subtitle { font-size:24pt; }
	body { font-size: 18pt; }

	.doc-links {
		flex-wrap: nowrap;
	}
}