* {
	box-sizing: border-box;
}

html {
	--fore: #454341;
	--back: #fff;
	--link: #0d4b82;
	--link-active: #1d3771;
	--pane-fore: #3b3937;
	--pane-back: #f5f5ef;
	--label-fore: #fff;
	--label-back: #ce8a06;
	--label-hover: #de9f39;
	--label-active: #aa8225;
	--label-active-fore: #d1cfcb;
	--shadow: #5438;

	--font-normal: "Avenir Next", "Segoe UI", sans-serif;
	--font-mono: "SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", monospace;

	margin: 0;
	padding: 0;
	font-family: var(--font-normal);
	color: var(--fore);
	background-color: var(--back);
}

a {
	color: var(--link);
}

a:active {
	color: var(--link-active);
}

body {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	min-height: 100vh;
	margin: 0;
	padding: 2em;
}

@media (max-width: 40em) {
	body {
		padding: 1em;
	}
}

.pane {
	margin: 0 auto;
	padding: 2em;
	width: 34em;
	max-width: 100%;
	color: var(--pane-fore);
	background: var(--pane-back);
	box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, 0.2);
}

.header h1 {
	margin: 0;
	font-size: 200%;
	opacity: 0.9;
}

.header p {
	margin: 0;
}

.header {
	margin: 0 0 1.75em;
}

.cdn-link {
	padding: 0.25em 0.5em;
	border: solid 2px #45434144;
	text-align: center;
}

.example {
	margin: 2em 0;
	background: var(--back);
	border-right: solid 2px var(--shadow);
	border-bottom: solid 3px var(--shadow);
	border-radius: 0 2em 0 2em;
}

.example h2 {
	display: inline-block;
	margin: 0;
	padding: 0.4em 1em 0.25em;
	font-size: 80%;
	font-weight: 400;
	letter-spacing: 0.04em;
	color: var(--label-fore);
	background: var(--label-back);
}

.conversion {
	text-align: center;
}

.conversion .button {
	font-size: 112.5%;
	box-shadow: 0 5px 4px -4px var(--shadow);
}

.button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	margin: 0 auto;
	padding: 0.5em 1em;
	font-weight: 600;
	font-kerning: normal;
	color: var(--label-fore);
	background: var(--label-back);
	border: none;
	border-radius: 2em;
	cursor: pointer;
}

.button:hover {
	background: var(--label-hover);
}

.button:active {
	color: var(--label-active-fore);
	background: var(--label-active);
}

.footer {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.license {
	font-size: 87.5%;
}

dialog {
	display: flex;
	flex-direction: column;
	gap: 1em;
	max-width: 36em;
	padding: 1em;
	border: none;
	background: var(--back);
	box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2);
}

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

/* シンタックスハイライト */
pre {
	margin: 0;
	padding: 0.75em 1em 1.5em;
	border-radius: 4px;
	overflow-x: auto;
	font: normal 80%/1.5 var(--font-mono);
}

code {
	font: inherit;
}

.tag {
	color: #49538b;
}

.attr {
	color: #b17f1f;
}

.string {
	color: #348942;
}

.keyword {
	color: #d73a49;
}