:root {
	--theme_text: #333;
	--theme_logo_text:#1B1B1B;
	--theme_bg: #EEE;
	--theme_blockbg: rgba(255,255,255,0.75);
	--theme_shadow: #d4d4d4;
	--theme_btnbg: #e1e1e1;
	--theme_btntext: #777;
	--theme_btnbghover: #d3d3d3;
}
html[data-theme=nightmode] {
	--theme_text: #ccc;
	--theme_logo_text:#f99b06;
	--theme_bg: rgb(21, 32, 43);
	--theme_blockbg: #192734;
	--theme_shadow: rgba(0, 0, 0, 0.3);
	--theme_btnbg: #293641;
	--theme_btntext: #9a9ea1;
	--theme_btnbghover: #d3d3d3;
}
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
html, body {
  background-color: var(--theme_bg);
  color: var(--theme_text);
  font-family: Verdana,sans-serif;
  font-size: 13px;
}
.join {
	margin: 5em auto 0;
	padding: 3em;
	background: var(--theme_blockbg);
	width: 420px;
	box-shadow: 5px 6px 0 var(--theme_shadow);
	float: right;
	display: grid;
  gap: 1.6em;
}
.wrapper {
	margin: 0 auto;
	width: 630px;
	overflow: auto;
	padding:5px;
}
.maskot {float: left;}
.anon {
	background: var(--theme_btnbg);
	color: var(--theme_btntext);
	padding: 5px;
	text-align: center;
	border: none;
}
input, textarea {outline:none;}  
.login {
	display: inline-block;
	color: var(--theme_btntext);
	padding: 5px 24px;
	text-decoration: none;
	cursor: pointer;
	border: none;
	background: var(--theme_btnbg);
	cursor: pointer;
}
.login:hover, .anon:focus {
	filter: brightness(0.95);
}

#authform {
  display: grid;
  gap: 4px;
  align-items: center;
  grid-template-columns: 70.3% 28.5%;
}

#authform #usercode {
	grid-column: 1;
	grid-row: 1;
	width: 100%;
	box-sizing: border-box;
}

#authform input[type="submit"] {
	grid-column: 2;
	grid-row: 1;
	width: 100%;
	box-sizing: border-box;
}

#logoutform {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  align-items: center;
}

#logoutform input[type="submit"],
#logoutform a.login {
  width: 100%;
  text-align: center;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
}

.header {
  font-size: 30px;
  text-align: center;
  clear: both;
  overflow: hidden;
  padding: 20px 0 15px 0;
  width: 100%;
  margin-bottom: 30px;
}
.header a {
  text-decoration: none;
}
.logo {
  background: url("/static/img/dvlogo.png") no-repeat scroll 0 0 transparent;
  color: #F26722;
  font-size: 46px;
  font-weight: bold;
  padding: 0 0 0 40px;
}