:root {
	--brick-width: 50px;
	--canvas-width: 500px;
	--wall-content: "• • • •";
}

.level-container {
	width: var(--canvas-width);
	height: 500px;
	margin: 0 auto;
	display: block;
}

.palette {
	display: flex;
	flex-wrap: wrap;
}

.row {
	flex: 0 0 auto;
	width: 100%;
}

.brick-slot {
	margin: 0;
	width: calc(var(--brick-width) - 2px);
	height: 18px;
	display: inline-block;
	border: 1px solid;
	float: left;
	cursor: pointer;
}

.brick {
	width: calc(var(--brick-width) - 10px);
	height: 10px;
	border: 5px solid;
	text-align: center;
	line-height: 10px;
	color: white;
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.brick-outline {
	border: 1px dotted #000 !important;
	text-align: center;
	color: white;
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
	line-height: 2.5;
	background-color: #fff;
}

.\!.brick-outline {
	line-height: initial;
}

/* Denote powerup by putting the letter "P" inside brick. */
.\!::before {
  content: "P";
}

/* Wall */
.\# {
	background-color: #aaa;
	border-left: 5px solid #ddd;
	border-top: 5px solid #ddd;
	border-right: 5px solid #444;
	border-bottom: 5px solid #444;
	font-size: 12px;
	white-space: nowrap;
	text-shadow: none;
	overflow-x: clip;
}

.\#::before {
	color: #444;
	content: var(--wall-content);
	margin-top: -7px;
	display: block;
}

.\#::after {
	color: #000;
	content: var(--wall-content);
	margin-top: 5px;
	display: block;
}

/* Bomb */
.\* {
	color: #a00;
	background-color: #444;
	border-left: 5px solid #777;
	border-top: 5px solid #777;
	border-right: 5px solid #222;
	border-bottom: 5px solid #222;
	text-shadow: none;
}

.\*::before {
	content: "•";
}

.\%::after {
	content: url('../assets/icons/clock.svg');
	display: block;
	margin-top: -5px;
}

/* Factory Brick */
.\$::after {
	content: url('../assets/icons/gear.svg');
	display: block;
	margin-top: -5px;
	color: var(--default);
}

/* Factory Factory Brick */
.\+::after {
	content: url('../assets/icons/gears.svg');
	display: block;
	margin-top: -5px;
	color: var(--default);
}

/* Teleporter */
.\@::before {
  content: url('../assets/icons/teleporter.png');
  display: block;
  margin-top: -4px;
}

.\@ {
	border: 1px solid black;
	padding: 4px;
	background-color: #fff;
}

/* Style each kind of brick */
/* Helpful color tool: https://meyerweb.com/eric/tools/color-blend/#:::hex */

.a, .A {
	background-color: #c00;
	border-left: 5px solid #f00;
	border-top: 5px solid #f00;
	border-right: 5px solid #600;
	border-bottom: 5px solid #600;
}

.b, .B {
	background-color: #cc0;
	border-left: 5px solid #ff0;
	border-top: 5px solid #ff0;
	border-right: 5px solid #660;
	border-bottom: 5px solid #660;
}

.c, .C {
	background-color: #0c0;
	border-left: 5px solid #0f0;
	border-top: 5px solid #0f0;
	border-right: 5px solid #060;
	border-bottom: 5px solid #060;
}

.d, .D {
	background-color: #0cc;
	border-left: 5px solid #0ff;
	border-top: 5px solid #0ff;
	border-right: 5px solid #066;
	border-bottom: 5px solid #066;
}

.e, .E {
	background-color: #00c;
	border-left: 5px solid #00f;
	border-top: 5px solid #00f;
	border-right: 5px solid #006;
	border-bottom: 5px solid #006;
}

.f, .F {
	background-color: #c0c;
	border-left: 5px solid #f0f;
	border-top: 5px solid #f0f;
	border-right: 5px solid #606;
	border-bottom: 5px solid #606;
}

.g, .G {
	background-color: #c60;
	border-left: 5px solid #f90;
	border-top: 5px solid #f90;
	border-right: 5px solid #600;
	border-bottom: 5px solid #600;
}

.h, .H {
	background-color: #8c0;
	border-left: 5px solid #bf0;
	border-top: 5px solid #bf0;
	border-right: 5px solid #260;
	border-bottom: 5px solid #260;
}

.i, .I {
	background-color: #0c6;
	border-left: 5px solid #0f9;
	border-top: 5px solid #0f9;
	border-right: 5px solid #060;
	border-bottom: 5px solid #060;
}

.j, .J {
	background-color: #08c;
	border-left: 5px solid #0bf;
	border-top: 5px solid #0bf;
	border-right: 5px solid #026;
	border-bottom: 5px solid #026;
}

.k, .K {
	background-color: #c08;
	border-left: 5px solid #f0b;
	border-top: 5px solid #f0b;
	border-right: 5px solid #602;
	border-bottom: 5px solid #602;
}

.l, .L {
	background-color: #60c;
	border-left: 5px solid #90f;
	border-top: 5px solid #90f;
	border-right: 5px solid #006;
	border-bottom: 5px solid #006;
}

.m, .M {
	background-color: #642;
	border-left: 5px solid #975;
	border-top: 5px solid #975;
	border-right: 5px solid #420;
	border-bottom: 5px solid #420;
}

.n, .N {
	background-color: #462;
	border-left: 5px solid #795;
	border-top: 5px solid #795;
	border-right: 5px solid #240;
	border-bottom: 5px solid #240;
}

.o, .O {
	background-color: #264;
	border-left: 5px solid #597;
	border-top: 5px solid #597;
	border-right: 5px solid #042;
	border-bottom: 5px solid #042;
}
.p, .P {
	background-color: #246;
	border-left: 5px solid #579;
	border-top: 5px solid #579;
	border-right: 5px solid #024;
	border-bottom: 5px solid #024;
}
.q, .Q {
	background-color: #624;
	border-left: 5px solid #957;
	border-top: 5px solid #957;
	border-right: 5px solid #402;
	border-bottom: 5px solid #402;
}
.r, .R {
	background-color: #426;
	border-left: 5px solid #759;
	border-top: 5px solid #759;
	border-right: 5px solid #204;
	border-bottom: 5px solid #204;
}
.s, .S {
	background-color: #ddd;
	border-left: 5px solid #fff;
	border-top: 5px solid #fff;
	border-right: 5px solid #aaa;
	border-bottom: 5px solid #aaa;
}
.t, .T {
	background-color: #aaa;
	border-left: 5px solid #ddd;
	border-top: 5px solid #ddd;
	border-right: 5px solid #444;
	border-bottom: 5px solid #444;
}
.u, .U {
	background-color: #333;
	border-left: 5px solid #555;
	border-top: 5px solid #555;
	border-right: 5px solid #111;
	border-bottom: 5px solid #111;
}

.A::after{
	content: "2";
}
.B::after{
	content: "2";
}
.C::after{
	content: "2";
}
.D::after{
	content: "2";
}
.E::after{
	content: "2";
}
.F::after{
	content: "2";
}

.G::after{
	content: "3";
}
.H::after{
	content: "3";
}
.I::after{
	content: "3";
}
.J::after{
	content: "3";
}
.K::after{
	content: "3";
}
.L::after{
	content: "3";
}

.M::after{
	content: "4";
}
.N::after{
	content: "4";
}
.O::after{
	content: "4";
}
.P::after{
	content: "4";
}
.Q::after{
	content: "4";
}
.R::after{
	content: "4";
}

.S::after {
	content: "2";
}
.T::after {
	content: "3";
}
.U::after {
	content: "4";
}