/* common stylesheet */
@import url("/styles.css");
h2{color:aqua}
#boxes-container {
	display: flex;
	gap: 1em;
	line-height: 0;
	flex-wrap: wrap;
	.item {
		display: block;
		min-width: 10em;
		min-height: 10em;

		color: var(--background);
		border-radius: var(--gaps);
		background-color: var(--accent);
		user-select: none;
		font-family: var(--font-mono);

		&:active {
			outline: 0.2rem solid var(--accent);
			color: var(--accent);
			background-color: var(--background);
		}

		&[color="mint"] {
			--accent: var(--color-mint)
		}

		&[color="sky"] {
			--accent: var(--color-sky)
		}

		&[color="violet"] {
			--accent: var(--color-violet)
		}

		&[color="mandarin"] {
			--accent: var(--color-mandarin)
		}
		&[color="pink"] {
			--accent: var(--color-hot-pink)
		}
		p {
			text-align: center;
		}
	}
}