@import url('https://fonts.googleapis.com/css?family=Roboto|K2D');

/* SVG */
@-moz-keyframes blink { 
  0%  { ry: 5; }
  49% { ry: 5; }
  50% { ry: 0; }
  51% { ry: 5; }
}
@-webkit-keyframes blink { 
  0%  { ry: 5; }
  49% { ry: 5; }
  50% { ry: 0; }
  51% { ry: 5; }
}
@keyframes blink { 
  0%  { ry: 5; }
  49% { ry: 5; }
  50% { ry: 0; }
  51% { ry: 5; }
}
.skin { fill: #eab38f; }
.eyes { fill: #1f1f1f; animation: blink 10s alternate infinite; -webkit-animation: blink 10s alternate infinite; -moz-animation: blink 10s alternate infinite;}
.hair { fill: #2f1b0d; }
.line { fill: none; stroke: #2f1b0d; stroke-width:2px; }
.arm, #mouth, #smile, .eyes, .hand, .eyebrow { transition: all 0.25s; }

/*
#arm-left { d: path("M 118,178 C 94,179 66,220 65,254"); }
#arm-right { d: path("M 132,178 C 156,179 184,220 185,254"); }
#hand-left { d: path("M 51,270 C 46,263 60,243 63,246 65,247 66,248 61,255 72,243 76,238 79,240 82,243 72,254 69,257 72,254 82,241 86,244 89,247 75,261 73,263 77,258 84,251 86,253 89,256 70,287 59,278"); }
#hand-right { d: path("M 199,270 C 204,263 190,243 187,246 185,247 184,248 189,255 178,243 174,238 171,240 168,243 178,254 181,257 178,254 168,241 164,244 161,247 175,261 177,263 173,258 166,251 164,253 161,256 180,287 191,278"); }

.arms-up #arm-left { d: path("M 118,178 C 64,206 49,145 86,115"); }
.arms-up #arm-right { d: path("M 132,178 C 186,206 201,145 164,115"); }
.arms-up #hand-left { d: path("M 81,110 C 76,103 90,83 93,86 95,87 96,88 91,95 102,83 106,78 109,80 112,83 102,94 99,97 102,94 112,81 116,84 119,87 105,101 103,103 107,98 114,91 116,93 119,96 100,127 89,118"); }
.arms-up #hand-right { d: path("M 169,110 C 174,103 160,83 157,86 155,87 154,88 159,95 148,83 144,78 141,80 138,83 148,94 151,97 148,94 138,81 134,84 131,87 145,101 147,103 143,98 136,91 134,93 131,96 150,127 161,118"); }

.looking.arms-up #arm-left { d: path("M 118,178 C 64,206 49,145 86,106"); }
.looking.arms-up #arm-right { d: path("M 132,178 C 186,206 201,145 164,106"); }
.looking.arms-up #hand-left { d: path("M 81,103 C 76,96 90,76 93,79 95,80 96,81 91,88 102,76 106,71 109,73 112,76 102,87 99,90 102,87 112,74 116,77 119,80 105,94 103,96 107,91 114,84 116,86 119,89 100,120 89,111"); }
.looking.arms-up #hand-right { d: path("M 169,103 C 174,96 160,76 157,79 155,80 154,81 159,88 148,76 144,71 141,73 138,76 148,87 151,90 148,87 138,74 134,77 131,80 145,94 147,96 143,91 136,84 134,86 131,89 150,120 161,111"); }
*/
/* SVG */

html, body {
  --light-main-color: #b0d2e5; /*rgba(204,238,255, 0.8);*/
  --dark-main-color: rgba(102,153,204, 0.4);
  --darker-main-color: rgba(51,102,153, 0.9);
  
  background: var(--light-main-color);
  font-size: 16px;
  margin: 0;
  padding: 0;
  font-family: K2D,Roboto, Arial, Verdana, sans-serif;
}

form {
  display: inline-block;
  background: #fafafa;
  padding: 1.5rem;
  padding-top: 1rem;
  border: 1px solid var(--dark-main-color);
  position: absolute;
  top: 50%;
  left: 50%;
  width: 350px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  border-radius: 4px;
  box-shadow: 0px 20px 20px -20px rgba(0,0,0,0.25);
}



form svg {
  margin: auto auto;
  display: block;
}

fieldset {
  border: 0;
  padding: 0;
  margin: 1.2rem 0 0 0;
  position: relative;
  padding-top: 1rem;
}

legend {
  margin: 0;
  padding: 0;
  color: var(--darker-main-color);
  user-select: none;
  position: absolute;
  top: 0;
  left: 0;
}

fieldset > div {
  border: 1px solid var(--dark-main-color);
  border-radius: 3px;
  position: relative;
  margin-top: 0.5rem;
  background: white;
}

fieldset#submit-field {
  padding-top: 0;
}

fieldset#submit-field > div {
  border-color: var(--darker-main-color);
  background: var(--darker-main-color);
}

fieldset .placeholder {
  position: absolute;
  top: 50%;
  left: 1rem;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%); 
  z-index: 5;
  font-size: 1.1rem;
  transition: all 0.25s;
  color: #89a;
  pointer-events: none;
}

fieldset .placeholder.active {
  font-size: 0.6rem;
  color: #abc;
  margin-top: -0.8rem;
}

fieldset input {
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: transparent;
  border: 0;
  padding: 1rem;
  font-size: 1.1rem;
  position: relative;
  z-index: 3;
  outline-color: var(--dark-main-color);
}

#show-password-container {
  color: var(--darker-main-color);
  display: block;
  position: absolute;
  top: 0rem; 
  right: 0rem;
  height: 0.9rem;
  background: #fff;
  cursor: pointer;
  font-size: 0.9rem;
  user-select: none;
}

#show-password-container span {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  border: 1px solid var(--dark-main-color);
  border-radius: 2px;
  vertical-align: -1px;
  position: relative;
  cursor: pointer;
}

#show-password-container.active span::before {
  content:"";
  background: var(--darker-main-color);
  display: block;
  width: 75%;
  height: 75%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 2px;
  opacity: 0.75;
}

fieldset.with-placeholder input {
  padding: 1.3rem 1rem 0.7rem 1rem;
}

fieldset input[type=submit] {
  border: 0;
  color: white;
  cursor: pointer;
  font-family: Roboto, K2D, Arial, Verdana, Sans-serif;
}

footer {
  position: absolute;
  bottom: 5px;
  left: 5px;
  font-size: 0.75rem;
}