button {
	cursor: pointer;
}

button.primary {
	background-image: linear-gradient(to right, #4CAF50, #00BCD4);
	border: none;
	color: white;
	padding: 0.5rem 1rem;
	border-radius: 0.5rem;
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
	font-weight: bold;
	transition: all ease-in 100ms;
	height: 37px;
}

button.primary:hover {
	filter: brightness(1.1);
}

button.primary:active {
	filter: brightness(0.8);
}

button.primary:focus {
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
	outline: 2px solid black;
}

button.simple {
	border: 1px solid #9E9E9E;
	border-radius: 0.25rem;
	background-color: transparent;
	transition: all 100ms;
	color: #9E9E9E;
	margin: 1rem auto;
	padding: 0.2rem 0.5rem;
}

button.simple:hover {
	color: black;
	border-color: black;
}

button.simple:focus {
	border-color: black;
	outline: none;
}

input:not([type=checkbox]), select, button.secondary {
	background-color: white;
	padding: 0.5rem 1rem;
	border-radius: 0.5rem;
	border: 1px solid #BDBDBD;
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
	transition: all ease-in 100ms;
	box-sizing: border-box;
	height: 37px;
}

input:not([type=checkbox]):focus, select:focus, button.secondary:focus {
	outline: none;
	border: 1px solid #00BCD4;
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
}

input[type=checkbox] {
	transition: all ease-in 100ms;
	accent-color: #4CAF50;
}

input[type=checkbox]:hover {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
}

label {
	color: #757575;
}