/*==================================================
	removes bootstrap bullshit
==================================================*/
.button:focus {
	color: var(--primary-600);
	text-decoration: none;
	outline: none;
}
@media(max-width:767px) {
	.smallScreenMargin {
		margin-inline: -20px;
	}
}

/*==================================================
	main
==================================================*/
body {
	font-family: "Inter", system-ui;
}
.bg-white {
	background-color: #fff;
}

.\!grid {
	display: grid !important;
}

.place-content-center {
	place-content: center;
}

/*==================================================
	button
==================================================*/
.button {
	display: inline-block;
	padding-block: 0.75rem;
	padding-inline: 1.5rem;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5rem;
	border-radius: 0.375rem;
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
		transition-duration: 150ms;
}

.button:hover {
	color: hsl(var(--primary-500));
	background-color: hsl(var(--primary-50)/50%);
	text-decoration: none;
}

.button:focus-visible {
	color: hsl(var(--primary-500));
	background-color: hsl(var(--primary-50)/50%);
	text-decoration: none;
	outline: none;

	--width: 2px;
	--ring-color: hsl(var(--primary-500));
	--ring-offset: var(--tw-ring-inset, ) 0 0 0 var(--width) var(--background-color);
	--ring: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--width)) var(--ring-color);
	box-shadow: var(--ring-offset), var(--ring);

	transition: color 150ms cubic-bezier(.4, 0, .2, 1);
}

.button--primary:not(:hover):not(:focus-visible) {
	color: var(--background-color);
}
.button--primary {
	color: var(--background-color);
	background-color: hsl(var(--primary-500));
}

.button--outline:not(:hover):not(:focus-visible) {
	color: hsl(var(--primary-600));
}
.button--outline {
	color: hsl(var(--primary-600));
	border-width: 1px;
	border-color: var(--primary-500);
}