section .perfect { color: #22c55e;}
section .perfect::after { content: "(AAA)";margin-left: 0.3em;}
section .pass { color: #3b82f6;}
section .pass::after { content: "(AA)";margin-left: 0.3em;}
section .fail { color: #ef4444;}

section .results{
	border-radius: 0.5rem;
	padding: 2rem;
	background-color: var(--color-dark-white);
}
section .result-item + .result-item {
	margin-top: 1rem;
}
section .output-wrapper input {
	width: 100%;
}
section .preview{
	margin:0;
	padding: 3rem;
	border-radius: 0.5rem;
	position: relative;
	display: flex;
	justify-content: space-between;
}
section .preview #ratio-result {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	align-content: flex-end;
	width: min-content;
}
section .preview #ratio-result .title {
	font-size: 1.5rem;
	text-align: left;
	display: block;
	width: 100%;
	line-height: 1;
	margin-bottom: 1rem;
	margin-top: auto;
	white-space: nowrap;
	width: fit-content;
}
section .preview #ratio-result #contrastRatio {
	font-size: 6rem;
	text-align: left;
	display: block;
	line-height: 1;
	width: 100%;
	margin-bottom: 0;
	width: fit-content;
}
section .large-text{
	font-size: 22px;
}
section .small-text{
	font-size: 16px;
	margin-top: 2rem;
}
section .ui-component{
	margin-top: 3rem;
	border-radius: 0.5em;
	font-size: 1.6rem;
	padding: 1em 1.5em;
	width: fit-content;
}