input[type='radio'] {
	display: none;
}

.paint-bucket {
    background: #1c1c1c;
    display: flex;
    flex-wrap: wrap;
    width: 8rem;
    padding: 2px;
    justify-content: space-between;
    margin-top: 20px;
    margin-bottom: 20px;
}

.paint-bucket input[class='paintbucket'] + *::before {
    content: '';
	display: inline-block;
	vertical-align: bottom;
	width: 1rem;
	height: 1rem;
	margin: 0.3rem;
	border-radius: 50%;
	border-style: solid;
	border-width: 0.2rem;
    filter: brightness(50%);
}

.paint-bucket input[class='paintbucket']:hover + *::before {
	border-color: white;
}

.paint-bucket input[class='paintbucket']:checked + *::before {
	border-color: white;
    filter: brightness(150%);
}

.paint-bucket input[id='X'] + *::before {
	color: #999999;
	background: #999999;
}
.paint-bucket input[id='I'] + *::before {
	color: #0BF;
	background: #0BF;
}
.paint-bucket input[id='J'] + *::before {
	color: #05F;
	background: #05F;
}
.paint-bucket input[id='S'] + *::before {
	color: #0F0;
	background: #0F0;
}
.paint-bucket input[id='O'] + *::before {
	color: #FF0;
	background: #FF0;
}
.paint-bucket input[id='Z'] + *::before {
	color: #F00;
	background: #F00;
}
.paint-bucket input[id='L'] + *::before {
	color: #F80;
	background: #F80;
}
.paint-bucket input[id='T'] + *::before {
	color: #C3F;
	background: #C3F;
}

.createButton {
	font-weight: bold;
	background-color: #44c767;
	border-radius: 16px;
	border: 1px solid #18ab29;
	cursor: pointer;
	color: #ffffff;
	font-family: Arial;
	font-size: 28px;
	padding: 31px 60px;
	text-decoration: none;
}
.createButton:hover {
	background-color: #54d777;
}
.createButton:active {
	position: relative;
	top: 1px;
}