@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
*
{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;
}
body 
{
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background: #222;
}
@property --a
{
	syntax: '<angle>';
	inherits: false;
	initial-value: 0deg;
}
.box 
{
	position: relative;
	width: 400px;
	min-height: 400px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: repeating-conic-gradient(from var(--a),#01dbc2 0%, #01dbc2 10%,transparent 10%,transparent 50%);
	animation: animate 6s linear infinite;
}
@keyframes animate 
{
	0% 
	{
		--a: 0deg
	}
	100% 
	{
		--a: 360deg
	}
}
.box::before 
{
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background: repeating-conic-gradient(from var(--a),#01dbc2 0%, #01dbc2 10%,transparent 10%,transparent 50%);
	animation: animate 6s linear infinite;
	animation-delay: -1.5s;
}
.box::after 
{
	content: '';
	position: absolute;
	inset: 2px;
	border: 20px solid #222;
	background: #303030;
} 
form 
{
	position: relative;
	z-index: 1000;
}
form h2 
{
	color: #fff;
	font-weight: 500;
	margin-bottom: 20px;
	padding-top: 60px;
	width: 100%;
	text-align: center;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.inputBx 
{
	position: relative;
	margin-bottom: 40px;
	width: 240px;
}
.inputBx span 
{
	position: absolute;
	inset: -2px;
	z-index: 1;
}
.inputBx span::before 
{
	content: '';
	position: absolute;
	inset: -2px;
	background: repeating-conic-gradient(from var(--a),#01dbc2 0%, #01dbc2 10%,transparent 10%,transparent 50%);
	animation: animate 6s linear infinite;
	box-shadow: 0 0 0 2px #000;
}
.inputBx:nth-child(2) span::before 
{
	animation-delay: -1.5s;
}
.inputBx span::after 
{
	content: '';
	position: absolute;
	inset: 0;
	background: #292929;
} 
.inputBx input 
{
	position: relative;
	z-index: 100000;
	outline: none;
	border: none;
	width: 100%;
	padding: 8px 14px;
	background: transparent;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}
.inputBx input::placeholder 
{
	color: #fff;
	opacity: 0.5;
}
.inputBx input[type="submit"]
{
	background: #01dbc2;
	cursor: pointer;
	box-shadow: 0 0 0 4px #01dbc2;
	width: 100%;
	font-weight: 500;
	color: #292929;
	filter: drop-shadow(0 0 15px #01dbc2);
}
.group 
{
	position: relative;
	top: -10px;
	padding-bottom: 60px;
	display: flex;
	justify-content: space-between;
}
.group a  
{
	text-decoration: none;
	color: #fff8;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.75em;
}
.group a:nth-child(2) ,
.group a:hover 
{
	color: #01dbc2;
	filter: drop-shadow(0 0 5px #01dbc2);
}