@import url(https://use.fontawesome.com/releases/v6.2.0/css/all.css);

html {
	height: 100%;
}

body {
	display: flex;	/* mainの高さを保持するため, 縦並びのflexを使用 */
	flex-direction: column;
	margin: 0;
	min-height: 100%;
	font-family: sans-serif;
	color: #333333;
}

header {
	background-color: #779bc8;

	> div {
		margin: 0 auto;
		padding: 8px;
		max-width: 1200px;
		
		/*
		p {
			margin: 0;
			font-size: 14px;
			font-weight: bold;
		}
		*/
		
		a {
			text-decoration: none;
			font-size: 22px;
			color: #fff;
			display: flex;
			align-items: center;

			&::before {
				content: "";
				display: block;
				margin-right: 8px;
				width: 40px;
				height: 40px;
				background: url(icon.png) center / contain;
			}
		}
	}
}

main {
	background-color: #fff;
	flex: 1;

	> div {
		margin: 64px auto 128px;
		padding: 16px;
		max-width: 1200px;
	}
}

footer {
	background-color: #779bc8;

	> div {
		margin: 0 auto;
		padding: 8px;
		max-width: 1200px;
		font-size: 14px;
		line-height: 2em;

		a {
			text-decoration: none;
			color: #ffffff;
		}
	}
}

/* -------- elements -------- */

main {
	a {
		color: #110f0f;
		
		&:hover {
			background-color: #daf5ff;
		}

		&[target="_blank"]::after {
			content: " \f08e";
			font-family: "Font Awesome 5 Free";
			font-weight: 900;
			margin-right: 4px;
		}
	}

	p, li {
		line-height: 2em;
	}

	h1 {
		margin: 16px -8px;
		padding: 2px 8px;
		color: #110f0f;
		font-size: 160%;
		border: 2px solid #779bc8;
	}

	*:has(+ h1) {
		margin-bottom: 128px;
	}

	h2 {
		margin-bottom: 16px;
		padding: 0 4px 0px;
		border-color: #779bc8;
		border-style: solid;
		border-width: 0 0 2px 16px;

		+ p {
			margin-top: 0;
		}
		
		span {
			display: block;
			font-size: 70%;
			font-weight: normal;
			color: #666;
		}
	}

	*:not(h1):has(+ h2) {
		margin-bottom: 64px;
	}

	h3 {
		margin-bottom: 0;
	}

	*:not(h2):has(+ h3) {
		margin-bottom: 48px;
	}

	p.tips {
		font-size: 14px;
		color: #999;
		margin-top: 0;
	}

	*:has(+ p.tips) {
		margin-bottom: 0;
	}

	img {
		max-width: 100%;
	}

	code {
		padding: 2px 4px;
		font-family: monospace;
		background-color: #eee;
	}

	table {
		border-collapse: collapse;
		border: 1px solid #ccc;
	}

	td, th {
		padding: 4px 16px;
		border: 1px solid #ccc;
	}

	th {
		background: #779bc8;
		color: #fff;
	}
}

@media screen and (min-width:800px) {
	.columns {
		display: flex;
		gap: 32px;

		> * {
			display: block;
			flex: 1;
		}
	}
}

@media screen and (max-width:801px) {
	.columns {
		display: contents;
	}
}