:root {
	/*
		MASTER MODULE — EDIT ONLY THIS VALUE

		1 module = one normal line
		At 30px:
		normal text   = 25px  = 5/6 m
		Theory text   = 50px  = 5/3 m
		Theory line   = 60px  = 2 m
		page margin   = 100px = 10/3 m
		max width     = 750px = 25 m
		rule spacing  = 20px  = 2/3 m
		rule thickness= 2px   = 1/15 m
	*/
	--m: 30px;

	/* Typography */
	--text: calc(var(--m) * 5 / 6);
	--text-large: calc(var(--m) * 5 / 3);
	--line: var(--m);
	--line-large: calc(var(--m) * 2);

	/* Geometry */
	--page-margin: calc(var(--m) * 10 / 3);
	--page-max: calc(var(--m) * 25);
	--rule-gap: calc(var(--m) * 2 / 3);
	--rule: calc(var(--m) / 15);
}


/* BASE */

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
}

body {
	color: black;
	background: white;
}

a,
a:visited {
	color: black;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}


/* TYPOGRAPHY */

.type1,
.type1E,
.type1J,
.type2,
.type2E,
.type2J {
	font-size: var(--text);
	line-height: var(--line);
}

.type1,
.type1E {
	font-family: sans-serif;
	font-weight: bold;
}

.type1J {
	font-family: "Source Han Serif", "Noto Serif JP", "Yu Mincho",
		"Hiragino Mincho ProN", serif;
	font-weight: 1000;
}

.type2,
.type2E {
	font-family: sans-serif;
	font-weight: lighter;
}

.type2J {
	font-family: "Source Han Serif", "Noto Serif JP", "Yu Mincho",
		"Hiragino Mincho ProN", serif;
	font-weight: 500;
}


/* SECRET EXAM LINK */

.secret-link,
.secret-link:link,
.secret-link:visited,
.secret-link:hover,
.secret-link:active,
.secret-link:focus {
	color: inherit;
	text-decoration: none;
	cursor: inherit;
	outline: none;
}


/* INDEX */

.index-page {
	display: flex;
	align-items: center;
	justify-content: center;

	min-height: calc(100vh - var(--page-margin));
	padding-top: var(--page-margin);
	padding-bottom: var(--page-margin);
}

.index-page section {
	width: max-content;
	max-width: min(calc(100% - (2 * var(--m))), var(--page-max));
}

.index-page a {
	font-size: var(--text);
	line-height: var(--line);
	font-family: sans-serif;
	font-weight: lighter;
}

.index-page hr {
	width: 100%;
	max-width: var(--page-max);
	height: var(--rule);

	border: 0;
	margin: var(--rule-gap) auto;

	background: black;
}


/* ABOUT */

.about-page {
	padding:
		var(--page-margin)
		min(var(--page-margin), 10%);
}

.about-page main {
	width: 100%;
	max-width: var(--page-max);
	margin: 0 auto;
}

.about-page section {
	text-align: left;
}

.about-page p {
	margin: 0;
}

.about-page hr {
	width: 100%;
	max-width: var(--page-max);
	height: var(--rule);

	border: 0;
	margin: 0 auto;

	background: black;
}


/* THEORY */

.design-page {
	margin: 0;
	padding: 0;
}

.design-page .type1,
.design-page .type2 {
	font-size: var(--text-large);
	line-height: var(--line-large);
}

.design-page section {
	margin-left: min(var(--page-margin), 10%);
	margin-right: min(var(--page-margin), 10%);
}

.design-page .a-section {
	margin-top: var(--page-margin);
	text-align: center;
}

.design-page .p-section {
	margin-top: var(--page-margin);
	margin-bottom: var(--page-margin);
}

.design-page .h-section {
	margin-bottom: var(--page-margin);
	text-align: center;
}

.design-page p {
	margin-top: 0;
	margin-bottom: 0;
}

.design-page a {
	margin-left: var(--text);
	margin-right: var(--text);
}

.design-page img {
	margin: 0 auto;
}