.capbox { 
	float: left;
	width: 290px;
	height: 62px;
	border-radius: 15px;
	border-color: #600000;
	white-space: nowrap;
}

.capbox-inner {
	border-radius: 5px;
	font: bold 12px Arial, sans-serif;

}

#CaptchaDiv {
	width: 120px;
	height: 48px;

	border-radius: 5px;
	display: inline-block;

	overflow: hidden;
	white-space: nowrap; 
	align-items: center;
	justify-content: center;
}

#CaptchaDiv span {
	margin: 5px;
	font-style: normal;
	display: inline-block;
	transform-origin: center;
	font: normal 33px/33px 'Kablammo', Impact, Charcoal, Arial, system-ui, -apple-system, sans-serif;
}

#CaptchaInput {
	width: 100px;
	color: black;
	background: white;
	padding: 2px;
	outline: none;
	border-radius: 0;
	margin: 3px 0px 1px;
	letter-spacing: 0.1em;
	border: #93B1BF 2px solid;
	font: bold 13px Arial, sans-serif;
}

.r4 {
	gap: .5em;
	display: grid;
	grid-template-columns: min-content 1fr;
}

.pill.block {
	margin: 0px;
	height: 62px;
	font-size: 19px;
	border-radius: 15px;
	white-space: nowrap;
	border: 2px solid #600000;
}

.form-msg {
	opacity: 1;
	padding: 0 1.5em;
}

.form-msg.err {
	animation: blink 4s 4s linear forwards !important;
}

@keyframes blink {
	0% { opacity: 1; } 
	10% { opacity: 0; }
	15% { opacity: .9; }
	25% { opacity: 0; }
	30% { opacity: .8; }
	40% { opacity: 0; }
	45% { opacity: .7; }
	100% { opacity: 0; }
}

@font-face {
	font-display: swap;
	font-style: normal;
	font-weight: normal;
	unicode-range: U+30-39;
	font-family: "Kablammo";
	src: url("/.captcha/fonts/Kablammo[MORF]-subset.woff2") format("woff2");
}

@keyframes swing {
	from { rotate: var(--swing-beg); }
	to { rotate:var(--swing-end); }
}

@keyframes morph {
	from { font-variation-settings: 'MORF' 0; }
	to { font-variation-settings: 'MORF' 60; }
}

@keyframes pulse {
  0%, 100% { transform: scale(var(--pulse-beg)); }
  50% { transform: scale(var(--pulse-end)); }
}

@keyframes flash {
  0%, 100% { opacity: 100%; }
  15% { opacity: 15%; }
}

#CaptchaDiv span {
	--swing-dur: random(2s, 3s, 0.2s);
	--swing-beg: random(-90deg, 0deg, 30deg);
	--swing-end: random(0deg, 90deg, 30deg);
	--morph-dur: random(4s, 5s, 0.2s);
	--pulse-dur: random(3s, 5s, 0.2s);
	--pulse-beg: random(0.8, 1.4, 0.2);
	--pulse-end: random(1.6, 2.4, 0.2);
	--flash-dur: random(2s, 3s, 0.2s);

	transform-origin: center;
	font-variation-settings: 'MORF' 0;
  
//	transform: rotate(var(--swing-beg));
//	transition: transform 1s ease-out;

	animation:
	swing var(--swing-dur) ease-in-out infinite alternate forwards,
	morph var(--morph-dur) ease-in-out infinite alternate forwards,
	pulse var(--pulse-dur) ease-in-out infinite alternate forwards,
	flash var(--flash-dur) steps(1, start) infinite !important;
}