/* ========================

フォントについて
Google Fontsを使用。
	英数字：Alexandria
	日本語：Murecho
	その他：Noto Sans JP
ウエイトは、300, 500, 700のいずれかとする。
実装上は、lighter, normal, bolderでも問題ない。

======================== */

@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@250;500;650&family=Murecho:wght@300;500;700&family=Noto+Sans+JP:wght@320;500;850&display=swap');

/* ========================

#MARK: 全体

======================== */

:root {
	font-family: 'Alexandria', 'Murecho', 'Noto Sans JP', sans-serif;
	--sample: hsl(0, 8%, 5%);
}

html {
	font-size: 1px;

	@media (max-width: 400px) {
		font-size: 0.25vw;
	}
}

body {
	--color-fg: #181b1a;
	--color-bg: linear-gradient(180deg, #eee, #fff6cc 40%, #001133 60%, #111) top / 100% 300%;
	--color-manual-bg: #fff6ccee;
	--color-blue-400: hsl(220, 80%, 40%);
	--color-blue-600: hsl(220, 90%, 60%);
	--color-blue-800: hsl(220, 100%, 80%);
	--color-blue-900: hsl(220, 100%, 90%);

	font-size: 16rem;
	font-weight: 300;
	color: var(--color-fg);
	background: var(--color-bg);
	position: relative;
	/* min-height: 100vh; */
	
	&:where(.dark-theme) {
		background-position: 0 100%;
		--color-fg: #e5fff6;
		--color-manual-bg: #001133ee;
	}
}

/* ========================

#MARK: 一般

======================== */

h2, h3, h4 {
	font-weight: 500;
}

code {
	display: inline-block;
	margin-inline: 4rem;
	padding-inline: 4rem;
	border: solid 1rem var(--color-blue-400);
}

header {
	background: var(--color-blue-400);
	padding-left: max(50% - 630rem, 10rem);

	.header-icon {
		display: inline-block;
		img {
			height: 50rem;
		}
	}

	.header-logotype {
		display: inline-block;
		img {
			height: 42rem;
		}
	}
}

main {
	max-width: 1280rem;
	margin-inline: auto;
	padding-inline: 10rem;

	a:hover {
		opacity: 0.7;
	}

	.link_draw {
		font-size: 20rem;
		font-weight: 500;
		text-align: center;
		color: white;
		background: #209d88;
		display: block;
		margin-top: 24rem;
		padding-block: 12rem;
	}
}