@layer generic {

	/* Buttons */
	button {
		border: none;
		background: none;
		transition-property: background-color, color, height;
		transition-duration: var(--duration-base), var(--duration-base), var(--duration-quick);
		transition-timing-function: ease-in-out;
	}

	/* Header title */
	h1 {
		color: var(--color-primary);
		font-family: var(--font-family-accent);
		font-size: var(--font-size-huge);
		font-weight: var(--font-weight-base);
		text-align: center;
	}

	h1 > small {

	}

	/* Header button */
	header > button
	{
		color: var(--color-accent);
		font-size: var(--font-size-dlg);
	}

	/* Footer note */
	footer > small {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: var(--spacing-dsm);
		color: var(--color-accent);
		font-size: var(--font-size-dsm);
		text-align: center;
	}


	/* Forms */
	form > * {
		margin: var(--spacing-dsm) 0;
		width: 100%;
	}

	form > label > span {
		display: block;
		margin-bottom: var(--spacing-dxs);
		font-size: var(--font-size-dmd);
		font-weight: var(--font-weight-thick);
	}

	form > label > input {
		height: 10vh;
		width: 100%;
		border: none;
		padding: var(--spacing-dsm);
	}

	form > button {
		background-color: var(--color-primary);
		color: var(--color-light);
		font-family: var(--font-family-accent);
		font-size: var(--font-size-dxl);
		border: none;
		border-radius: var(--border-radius-2xl);
	}

	form > button[disabled] {
		background-color: #0002;
		color: var(--color-secondary);
	}

	/* Summary box */

	.summary-box {
		display: grid;
		grid-template-columns: 3fr 2fr;
		grid-template-rows: 2fr 1fr;
		grid-template-areas: "key value" "link score";
		grid-gap: var(--spacing-dsm);
		height: 20vh;
		width: 100%;
		flex-grow: 1;
		border-radius: var(--border-radius-md);
		padding: var(--spacing-dmd);
		background-color: var(--color-accent);
		color: var(--color-light);
		/*transition-property: background-color, color, height;
		transition-duration: var(--duration-base), var(--duration-base), var(--duration-quick);
		transition-timing-function: ease-in-out;*/
	}

	.summary-box > .key {
		grid-area: key;
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		font-size: var(--font-size-dlg);
		font-weight: var(--font-weight-thick);
	}

	.summary-box > .value {
		grid-area: value;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-family: var(--font-family-accent);
		font-size: var(--font-size-3dxl);
/*		color: var(--color-primary);*/
		text-align: center;
		vertical-align: middle;
	}

	.summary-box > .score {
		grid-area: score;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-size: var(--font-size-dmd);
	}

	.summary-box > button {
		grid-area: link;
		color: var(--color-light);
		background-color: #0002;
		border-radius: var(--border-radius-sm);
		padding: var(--spacing-dxs);
	}

	/* Challenge list */

	section > ul {
		list-style-type: none;
		overflow-y: scroll;
		height: 48vh;
		margin: var(--spacing-dsm) 0;
	}

	section > ul > li {
		display: grid;
		grid-template-columns: 9fr 1fr;
		width: 100%;
		margin: var(--spacing-dsm) 0;
		background-color: var(--color-muted);
		border-radius: var(--border-radius-sm);
		transition-property: background-color, color, height;
		transition-duration: var(--duration-base), var(--duration-base), var(--duration-quick);
		transition-timing-function: ease-in-out;
	}

	section > ul > li > div {
		display: flex;
		align-items: center;
		padding: var(--spacing-dsm);
		font-weight: var(--font-weight-thick);
	}

	section > ul > li > button {
		color: var(--color-dark);
		padding: 0;
	}

	section > ul > li > div > i{
		color: var(--color-primary);
	}

	section > ul > li:active,
	section > ul > li:focus,
	section > ul > li.done
	{
		background-color: var(--color-info);
		color: var(--color-light);
	}

	section > ul > li:active > button,
	section > ul > li:focus > button,
	section > ul > li.done > button
	{
		color: var(--color-primary);
	}

	section > p {
		margin: var(--spacing-dlg);
		font-size: var(--font-size-dxl);
		text-align: center;
	}

	section > p > button {
		width: 100%;
		margin: var(--spacing-dmd) 0;
		padding: var(--spacing-dsm);
		border-radius: var(--border-radius-2xl);
		background-color: var(--color-primary);
		color: var(--color-light);
		font-family: var(--font-family-accent);
		font-size: var(--font-size-dxl);
	}

	@media screen and (orientation: portrait) {

	}

	@media screen and (orientation: landscape) {

	}

	@media screen and (min-width: 40em) {

	}

	@media screen and (min-width: 48em) {

	}

	@media screen and (min-width: 64em) {

	}

	@media screen and (min-width: 80em) {

	}

	@media screen and (min-width: 96em) {

	}

	@media screen and (min-width: 120em) {

	}

	@media screen and (prefers-color-scheme: dark) {

	}

	@media screen and (display-mode: fullscreen) {

	}

	@media screen and (display-mode: standalone) {

	}

	@media screen and (display-mode: minimal-ui) {

	}
}