html {
  height:100%;
  font-family: 'Merienda';
}

html::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, lightgreen, turquoise);
  background: url("/res/bg/moon.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  filter: brightness(1.5) blur(3px);
  z-index: -1;
}

body {
  display: grid;
  margin: 0px;
}

header {
  color: lightgreen;
  line-height: 1em;
  padding-left: 0.5em;
  text-shadow: 2px 2px 10px rgba(255, 255, 255, 0.5);
}

form {
  background-color: rgba(128,255,128,0.25);  margin:auto;
  border-radius: 1em;
  padding: 1em;
  margin-top:5em;
  display:grid;
  box-shadow: 0px 0px 15px rgba(128, 255, 128, 0.5);
}

input {
  height: 1.75em;
  border: rgba(0,0,0,0.25) 1px solid;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.25);
  border-radius: 0.5em;
  background: transparent;
  padding:0.25em;
  margin: 0.5em;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
  font-size: 1.10em;
  color: rgba(10,40,0,1);
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}

#buttons {
  margin: 0.25em auto;
}

/* latin */
@font-face {
  font-family: 'Merienda';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/merienda/v19/gNMaW3x8Qoy5_mf8uUkJGHtiYXjmKFy5enhYTkT9.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

input[type=button],input[type=submit] {
  border-color: rgba(0,0,0,20%);
  background: linear-gradient(turquoise, cyan);
  opacity: 0.75;
  height: 2.0em;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
  font-family: 'Merienda';
  font-size: 20px;
  color: rgba(10,40,0,1);
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}

label {
  font-family: 'Merienda';
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
  color: rgba(80,100,0,1);
  font-size: 22px;
}

@media screen and (max-width:640px) {
  form {
  /*  margin-top: 2em; */
  }
}

.error {
  color: red;
  background-color: rgba(128,255,128,0.25);
  border-radius: 1em;
  margin: auto;
  box-shadow: 0px 0px 15px rgba(128, 255, 128, 0.5);
}