@layer components {
	:where(.btn) {
		padding: .5em 3em;
		font-size: 1.125rem;
		font-weight: 400;
		text-align: center;
		text-decoration: none;
		border-radius: 35px;
		border: 1px solid hsl(var(--clr-capital-blue));
		background-color: hsl(var(--clr-capital-blue));
		color: hsl(var(--clr-light-gray));
		position: relative;
		display: inline-block;
		cursor: pointer;
		-webkit-touch-callout: none;
		transition: background-color .3s, color .3s, border-color .3s;
	}

	:where(.btn).btn-primary {
		background-color: hsl(var(--clr-capital-blue));
		border-color: hsl(var(--clr-capital-blue));
	}

	:where(.btn, .btn-primary):hover {
		background-color: hsl(var(--clr-deep-teal));
		border-color: hsl(var(--clr-deep-teal));
	}

	:where(.btn).btn-green {
		background-color: hsl(var(--clr-deep-teal));
		border-color: hsl(var(--clr-deep-teal));
	}

	:where(.btn).btn-green:hover {
		background-color: hsl(var(--clr-capital-blue));
		border-color: hsl(var(--clr-capital-blue));
	}

	:where(.btn).btn-secondary {
		border: 1px solid black;
		background-color: transparent;
		color: black;
	}

	:where(.btn).btn-secondary:hover {
		background-color: hsl(var(--clr-deep-teal));
		border-color: hsl(var(--clr-deep-teal));
		color: white;
	}

	:where(.btn).btn-white {
		border: 1px solid white;
		background-color: white;
		color: hsl(var(--clr-dark-gray));
	}

	:where(.btn).btn-white:hover {
		background-color: hsl(var(--clr-deep-teal));
		border-color: hsl(var(--clr-deep-teal));
		color: white;
	}

	:where(.btn).btn-reverse {
		background-color: transparent;
		border-color: white;
		color: white;
	}

	:where(.btn).btn-reverse:hover {
		background-color: hsl(var(--clr-deep-teal));
		border-color: hsl(var(--clr-deep-teal));
	}

	:where(.btn).btn-large {
		font-size: 1.25rem;
	}
}

#main .gform_wrapper [type="submit"] {
	padding: .75em 1.5em;
	font-size: 1.25rem;
	font-weight: 500;
	white-space: nowrap;
	text-align: center;
	text-decoration: none;
	border-radius: 35px;
	border: 2px solid hsl(0, 0%, 97%);
	background-color: hsl(0, 0%, 97%);
	color: hsl(var(--clr-dark-gray));
	position: relative;
	display: inline-block;
	cursor: pointer;
	-webkit-touch-callout: none;
	transition: background-color .3s, color .3s, border-color .3s;
}

#main .gform_wrapper [type="submit"]:hover {
	background-color: transparent;
	border-color: hsl(0, 0%, 100%);
	color: hsl(0, 0%, 100%);
}
