@charset "UTF-8";

/** MAIN
********************************************************************/

html
{
  background-color : #192229;
}

/** HEADER
********************************************************************/

html body p
{
  font-size  : 1.45em;
  text-align : center;
  padding    : 1em 1.5em 0;
}

html body img
{
  display    : block;
  margin     : 2em 2.25em 0;
  max-height : 35%;
}

html body label[for=flip]
{
  color      : hsl(0, 0%, 60%);
  font-size  : 1.5em;

  display    : block;
  text-align : right;

  cursor     : pointer;
}

html body label[for=flip]:hover
{
  opacity : 1;
}

html body #recover label[for=flip]
{
  right : auto;
  left  : -2.5em;
}

/** FORMS
********************************************************************/

html body .input
{
  position : absolute;
  left     : 0;
  bottom   : 3.5em;

  width    : 100%;
  height   : auto;

  padding  : 0 2.25em;
}

html body #login
{
  z-index : 100;
}

html body #recover
{
  z-index   : 1;
  opacity   : 0;

  transform : rotateY(180deg);
}

html body #container
{
  width         : 35em;
  height        : 42em;
  margin        : 0 auto;

  position      : relative;
  top           : 10em;

  border-radius : 0.5em;

  perspective   : 800px;

  z-index       : 1;
}

html body #container form
{
  overflow            : hidden;
  display             : block;
  width               : 100%;
  height              : 100%;

  position            : absolute;
  top                 : 0;
  left                : 0;

  transform-style     : preserve-3d;
  backface-visibility : hidden;
  transition          : 0.8s;

  background-color    : #FEFEFE;
  box-shadow          : 0 0 0.5em rgba(0, 0, 0, 0.4), 0 0 0.3em rgba(0, 0, 0, 1) inset;
}

html body #container input[type=checkbox]:checked ~ #login
{
  opacity   : 0;
  transform : rotateY(-180deg);
}

html body #container input[type=checkbox]:checked ~ #recover
{
  opacity   : 1;
  transform : rotateY(0deg);
}

/** INPUT|BUTTON|LINK
********************************************************************/

html body input
{
  color         : hsl(0, 0%, 50%);
  font-size     : 2em;
  font-family   : inherit;

  width         : 100%;
  height        : 2.5em;

  text-indent   : 0.7em;

  margin-bottom : 0.5em;
  padding-right : 2.5em;

  border        : none;
  border-bottom : 1px solid hsl(0, 0%, 90%);

  outline       : none;

  border-radius : 0;
  z-index       : 1;
}

html body input[type=submit]
{
  color            : hsl(0, 0%, 95%);
  text-indent      : 0;

  opacity          : 0.9;

  padding          : 0;
  margin           : 0.5em 0 0.5em;

  background-color : var(--application-color);

  border-radius    : 1em;
  cursor           : pointer;
}

html body input[type=submit]:hover
{
  opacity : 1;
}

html body input[type=checkbox]
{
  display : none;
}

/* SHOW PASSWORD
**********************************************/

html body .eye
{
  position : relative;
}

html body .eye i
{
  color     : chocolate;
  font-size : 2em;

  position  : absolute;
  right     : 1em;
  top       : 0.75em;

  cursor    : pointer;

  z-index   : 2;
}

html body .eye i:hover
{
  color : black;
}

/* PLACEHOLDER
**********************************************/

html body ::placeholder
{
  letter-spacing : 2px;
  color          : hsl(0, 0%, 80%);
}

html body ::-ms-input-placeholder
{
  letter-spacing : 2px;
  color          : hsl(0, 0%, 80%);
}