@charset "UTF-8";

main {
	padding-bottom: var(--top-link-size);
}

h2 {
	margin-bottom: 0.2em;
}

p.total-count {
	text-indent: 1em;
}

#total-count {
	font-size: 1.25em;
}

section:not(#total) {
	border: var(--border);
	margin-bottom: 2em;
	
	--border: 1px solid var(--text);
}

section:not(#total) h2 {
	background-color: var(--highlight2);
	padding: 0.1em 0.5em;
	font-size: 1.3em;
	border-bottom: var(--border);
	margin: 0;
}

#total {
	margin-bottom: 1em;
}

.emoji-box {
	text-align: justify;
	background-color: var(--highlight3);
	padding: 0.4em 0.6em;
	font-family: emoji;
	font-size: 1.3em;
	line-height: 1.2;
}

.count-box {
	border-top: var(--border);
	background-color: var(--highlight2);
	font-weight: bold;
	padding: 0.2em 0.5em;
}

@media (max-width: 500px) {
	section:not(#total) h2 {
		font-size: 1.2em;
	}
	
	.count-box {
		font-size: 0.9em;
	}
}

@media (max-width: 400px) {
	section:not(#total) h2 {
		font-size: 1.1em;
	}
	
	.emoji-box {
		font-size: 1.2em;
	}
}

@media (max-width: 350px) {
	section:not(#total) h2 {
		font-size: 1em;
	}
	
	.emoji-box {
		font-size: 1.1em;
	}
}

@media (prefers-color-scheme: dark) {
	section:not(#total) {
		--border: 1px solid grey;
	}
}