/* 

COLORS

blue-1000: #040439
blue-600: #1A63FF
blue-300: #98B9F7
blue-100: #DAE7FF
slate: #4F4F6D
red: #E31E24

 */

.filled {
	width: fit-content;

	display: flex;
	justify-content: center;

	background-color: #ffffff;
	color: #040439;

	border-radius: 20px;
	padding: 20px 30px;
	user-select: none;

	transition: background-color 200ms ease-in-out, color 200ms ease-in-out;
}

.filled:hover {
	background-color: var(--blue-600);
	color: white;
}

.filled.red {
	color: white;
	background-color: var(--red);
}

.filled.red:hover {
	background-color: var(--blue-600);
}

.filled.small {
	border-radius: 10px;
	padding: 10px 30px;
}