:root{
	--main-bg-color:#fff;
	--main-text-color:#363636;
}
@media (prefers-color-scheme:dark){
	:root{
		--main-bg-color:#202b38;
		--main-text-color:#dbdbdb;
	}
	svg .main{stroke:#eee}
	svg .title{fill:#eee}
	svg symbol#symbol-close{fill:#eee}
}
html,body{
	height:100%;
}
body{
	min-width:325px;
	background-image:radial-gradient(circle, #fff, #ddd);
	background-color:var(--main-bg-color);
	color:var(--main-text-color);
	display:flex;
	justify-content:center;
	align-items:center;
	margin:0 auto;
}
@media (prefers-color-scheme:dark){
	body{background-image:none}
}

html.no-js div.sub a{
	display:none;
}
a{
	text-decoration:none;
}
.error{
	color:#fd1d23;
	background-color:#fff0f0;
	padding:5px;
	border:1px solid #fd1d23;
}

#container{
	position:relative;
	width:600px;
	height:100vw;max-height:600px;
}
#container svg{
	display:inline-block;
	width:100%;
	height:100%;
}
div.sub{
	display:inline-block;
	width:100%;
	text-align:center;
}
dialog{
	outline:0;
	animation:fadeIn 0.5s;
	border:1px solid #dbdbdb;
	padding:14px 14px 0 14px;
	border-radius:8px;
	box-shadow:0px 0px 40px 15px #666;
	background-color:var(--main-bg-color);
	color:var(--main-text-color);
}
dialog svg.close,
dialog img.close{
	position:absolute;
	width:20px; height:20px;
	top:5px; right:5px;
	cursor:pointer;
}
dialog::backdrop{
	backdrop-filter: blur(4px);
}
form input,
form span.suffix{
	display:inline-block;
}
form span.suffix{
	padding:7px 0;
}
form p.center{
	text-align:center;
}

@keyframes fadeIn{
	0% {opacity:0}
	100% {opacity:1}
}

@media all and (max-width:405px){
	form{min-width:325px}
}