*{box-sizing:border-box}
html,body{padding:0;margin:0;height:100%}
html{background:#110813;background-repeat:no-repeat;
background-size:cover;background-position:center;color:white}
body,input,button{font-family:"Noto Sans", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}
body{font-size:13pt;}
header{padding:32px 0}
h1,h2{font-weight:normal}
/*h1{background:rgba(0,0,0,0.7)}
h2{background:rgba(0,0,0,0.45)}*/
footer .fr{display:flex;flex-direction:row;justify-content:space-between;padding:32px 0}
a{color:white;border:none;text-decoration:underline;text-decoration-color:#999}
a:hover{text-decoration-color:#b13533;}
a img { border: none }
a img:hover { outline:2px solid #333}
.d > span {background:white;border-radius:50%;width:8px;height:8px;display:inline-block;margin-right:8px}
.d .b{background:#b13533}
#vs { display:flex;min-height:100%}
#f{padding:2em;display:flex;flex-direction:column;justify-content:space-between}
#bg{background: #221486; flex-grow: 1;background-attachment:fixed; background-image: url(vr.webp);background-repeat: no-repeat; background-size: cover; background-position: bottom}
button{cursor:pointer;background:#222;color:#ddd;border:none;border-radius:5px;padding: .5em .7em}
button:hover{background:#444;color:#efefef}
input,button{display:block;width:100%}
input{background:black;color:#ddd;border:1px solid #333;border-radius:5px;padding: .5em .7em}
input:focus-visible{outline:1px solid #999}
input ::placeholder{color:#999}
#bg .bl{font-size:12pt;margin:1em;padding:.5em 1em;max-width:1024px;border-radius:5px;
background:#101010;
border: 0 solid #15a3f9;
border-width:1px 1px 0 0}
@media (max-width: 500px) {
#vs{flex-direction:column}
header,footer .fr{padding:12px 0}
#f{padding:1em 2em}
#bg .bl{margin:.6em .4em}
}
@media (min-height: 900px) {
footer input, footer button { font-size: 14pt }
}
h3{margin-left:2em;color:#15a3f9;font-size:120%}
h3:after{content:".";font-weight:normal;color:white}