* {
  margin:0;
}
* {
  margin:0;
}
:root {
  --colorA:rgb(1,129,175);
  --colorB:rgb(9,143,84);
  --colorC:rgb(112,106,1);
  --colorD:rgb(186,64,23);
  --colorE:rgb(92,167,195);
  --colorF:rgb(126,201,229);

  --colorG0:rgb(250,250,250);
  --colorG1:rgb(240,240,240);
  --colorG2:rgb(226,226,226);
  --colorG3:rgb(206,206,206);
  --colorG4:rgb(121,121,121);
  --colorG5:rgb(68,68,68);
  --colorG6:rgb(47,47,47);
  --colorG7:rgb(42,42,42);
  --colorG8:rgb(35,35,35);
  --colorG9:rgb(30,30,30);

  --colorS1:rgb(152,189,202);
  --colorS2:rgb(157,195,208);
  --colorS1a:rgb(179,179,179);
  --colorS2a:rgb(185,185,185);
}// 0.15 0.5 0.75
*, *:after, *:before {
     box-sizing: border-box;
}

html {
	height: 100%;
}

body {
	height: 100%;
}

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */
 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
     margin: 0;
     padding: 0;
     border: 0;
     font-size: 100%;
     font: inherit;
     vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
     display: block;
}
 body {
     line-height: 1;
}
 ol, ul {
     list-style: none;
}
 blockquote, q {
     quotes: none;
}
 blockquote:before, blockquote:after, q:before, q:after {
     content: '';
     content: none;
}
 table {
     border-collapse: collapse;
     border-spacing: 0;
}
body {
  display:grid;
  grid-gap:1em;
  grid-template:1fr 90vh 1fr / 1fr 90vw 1fr;
}
body.user_public {
  grid-template:1fr minmax(400px,50vh) 1fr / 1fr minmax(700px,50vw) 1fr;
}

header {
  grid-area:1/1/2/4;
}

main {
  grid-area:2/2/3/3;
  background:grey;//--
}







body.user_public form#user_login {
  display:grid;
  grid-gap:1em;
  padding:3em;
}

body.user_public form#user_login > * {
  height:2.332em;
  font-size:1.333em;
  line-height:2.332em;
  padding:0 1.333em;
}

body.user_public form#user_login > :last-child {
  margin-top:1.333em;
  width:50%;
  justify-self:center;
  
}

body {
  color:var(--colorG0);
  font-family:Calibri,sans-serif;
  background:var(--colorS1);
  background:linear-gradient(135deg, var(--colorS1) 10%, var(--colorS2) 90%);
}

body.offline {
  background:linear-gradient(135deg, var(--colorS1a) 10%, var(--colorS2a) 90%);
}

body header {
  text-align:right;
  padding:0 2em;
  //background:var(--colorG4);
}

body header a {
  height:2em;
  line-height:2em;
  text-decoration:none;
  color:var(--colorG2);
}


body main h1 {
  font-size:2em;
  text-align:center;
  font-variant: small-caps;
  padding:0.5em;

  
}

body.user_public h1 {
  margin-bottom:1.6em;
}

body.user_public h1 span {
  display:block;
  font-size:0.4em;
  font-variant: normal;
}