:host {
	display: flex;
	flex: 1;
	height: 65dvh;
	align-items: center;
	align-self: center;
	flex-flow: row nowrap;
	border-radius: 15px;
	padding: 1em;
	animation: fadeIn 1s;
	font-family: 'Noto Sans SC', sans-serif;
}

@media only screen and (max-width: 768px) {
	:host {
		height: 100dvh;
	}
}

:host(.recognition) {
	--card-fg: #404040;
	--card-bg: #b2f2bb;
	color: var(--card-fg);
	background-color: var(--card-bg);
}

:host(.writing) {
	--card-fg: #404040;
	--card-bg: #6fffe9;
	color: var(--card-fg);
	background-color: var(--card-bg);
}

:host(.tones) {
	--card-fg: #404040;
	--card-bg: #fff9b0;
	color: var(--card-fg);
	background-color: var(--card-bg);
}

:host(.sentence) {
	--card-fg: #404040;
	--card-bg: #d4b5e6;
	color: var(--card-fg);
	background-color: var(--card-bg);
}

:host(.audio) {
	--card-fg: #404040;
	--card-bg: #a2c8d1;
	color: var(--card-fg);
	background-color: var(--card-bg);
}

:host(.secondary-recognition) {
	--card-fg: #404040;
	--card-bg: #f7b6d2;
	color: var(--card-fg);
	background-color: var(--card-bg);
}

:host(.secondary-sentence) {
	--card-fg: #404040;
	--card-bg: #ffdab9;
	color: var(--card-fg);
	background-color: var(--card-bg);
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}