html, body {height:100%}
body {
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:0;
	padding:0;
	cursor:default;
	user-select:none;
	position:absolute;
	font-family:Calibri,Arial,sans-serif;
	background:linear-gradient(to bottom,hsl(174deg 25% 75%),hsl(174deg 94% 6%));
}
body > header {
	text-align:center;
	margin:20px;
}
body > header > p {
	font-size:115%;
	color:#011502;
}
h1 {}
h1 > span, h2 > span {
	position:absolute;
	visibility:hidden;
}
h1 > svg {
	width:15%;
}
h2 > svg > path {fill:#011502}
svg.besarkada > use.b1 {fill:hsl(174deg 20% 34%)}
svg.besarkada > use.b2 {fill:hsl(174deg 13% 49%)}
svg.besarkada > use.b3 {fill:hsl(174deg 30% 30%)}
h2 > svg {
	display:inline-block;
	height:100px;
}
article {
	box-shadow:0 3px 7px rgba(0,0,0,0.13);
	margin-left:calc(50% - 195px);
	background:hsl(0, 0%, 100%);
	border-radius:10px/5px;
	box-sizing:border-box;
	position:relative;
	margin-top:60px;
	padding:26px;
	width:390px;
}
article.signin {background:hsl(174deg 13% 77%)}
article > header {
	box-shadow:0 1px 2px 1px rgba(0,0,0,0.2), 0 -1px 1px rgba(0,0,0,0.2) inset, 0 1px 1px rgba(255,255,255,0.5) inset;
	border-radius:10px 10px 0 0/5px 5px 0 0;
	background:hsl(174deg 19% 38%);
	position:absolute;
	overflow:hidden;
	height:28px;
	z-index:1;
	right:0;
	left:0;
	top:0;
}
p {color:hsl(200,3%,40%)}
h3 {
	font-size:110%;
	overflow:hidden;
	line-height:114%;
	white-space:nowrap;
	margin:4px 0 0 13px;
	color:hsla(0,0%,100%,0.7);
	text-shadow:0 0 2px hsla(0,0%,100%,0.5), 0 0 7px hsla(0,0%,0%,0.3);
}
form {
	margin-top:17px;
	display:table;
	width:100%;
}
form > div {
	font-size:120%;
	display:table-row;
}
form > div > span {
	display:table-cell;
	position:relative;
	padding:7px;
}
input {
	transition:all 0.30s ease-in-out;
	border:1px solid #ddd;
	padding:3px 0 3px 3px;
	margin:5px 1px 3px 0;
	font-size:90%;
	outline:none;
}
input:focus {
	box-shadow:0 0 1px 1px #fff, 0 0 5px 2px hsl(90,40%,60%);
	border:1px solid hsl(90,30%,60%);
	padding:3px 0 3px 3px;
	margin:5px 1px 3px 0;
}
input[type=submit] {
	cursor:pointer;
	font-size:100%;
	border-radius:4px;
	padding:4px 17px 5px;
	border:1px solid hsl(90,13%,50%);
	box-shadow:0 1px 1px rgba(0,0,0,0.2);
	background:linear-gradient(to bottom, hsl(90,13%,95%), hsl(90,13%,76%));
}
input[type=submit]:focus {
	border:1px solid hsl(90,13%,50%);
	box-shadow:0 1px 1px rgba(0,0,0,0.2), 0 0 1px 1px #fff, 0 0 5px 2px hsl(90,40%,60%);
}
input[type=submit]:active {
	background:linear-gradient(to bottom, hsl(90,25%,91%), hsl(90,25%,72%))
}
footer {
	color:hsl(147deg 36% 21%);
	position:absolute;
	text-align:center;
	bottom:26px;
	width:100%;
}
div.error > span > svg {
	fill:hsla(0 100% 45% / 40%);
	height:40px;
	width:40px;
}
div.error > span {
	vertical-align:top;
	color:hsla(0 80% 40% / 70%);
}
div.error > span:first-child {text-align:center}