body {
  background: black;
}

form.cuadro {
  position: absolute;
  top:  50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: darkslategray; 
  background: linear-gradient(to bottom, navy, skyblue); 
  border-top: 2px solid gray;
  border-left: 1px solid gray;
  border-right: 1px solid gray;
  border-radius: 0.3em;
  padding: 1em;
  text-align: center;
/*
  animation-name: cajalogin;
  animation-duration: 0.75s;
*/
}

/*
@keyframes cajalogin {
   0% { transform: translate(-50%,-50%) scale(0.1);  
           transform-origin: center; }
}
*/

ul.login {
  display: flex;
  flex-direction: column;
  flex-wrap: no-wrap;
  align-items: center;
  align-content: stretch;
  justify-content: safe center;
  list-style-type: none;
  margin: 0; 
  padding: 0em;
}

ul.login li > img.logo {
  margin-top: 1em;
  vertical-align: middle;
  width: 128px;
  height: 128px;
  animation-name: rotarlogo;
  animation-duration: 1s;
  filter: drop-shadow(0px 0px 0.5em white);
}

@keyframes rotarlogo {
  0% { filter: unset;
          transform: rotateX(360deg)  scale(5); 
        }
  95% { transform: rotateX(0deg) scale(1);
            filter: drop-shadow(0px 0px 1em white);
          }
  100% { transform: rotateX(0deg); 
           }
}

ul.login li div {
  padding: 0;
  text-align: center;
}

ul.login li > div.compania {
  margin: 0.5em;
  color: azure;
  text-shadow: 1px 1px red;
  font-size: 2.5em; 
}

ul.login li div input {
  margin: 0.3em 0;
  padding: 0.4em 0.4em; 
  font-size: 1.4em;
  color: white;  
}

ul.login li div input:focus {
  color: indigo;
  animation: none;
}

ul.login li div input::placeholder {
  font-size: 0.8em;
  color: midnightblue;
}

ul.login li input.entrar {
  margin: 1em auto;
  padding: 0.5em 1em; 
  font-size: 1.1em;
}


/*------------------------------------*/



@media (max-height: 420px) {

  ul.login li > img.logo {
    display: none;
  }

}


/*------------------------------------*/


@media (max-height: 350px) {

  ul.login {
    flex-direction: row;
    justify-content: left safe;
    vertical-align: center;
    padding: 0.5em;
  }

  ul.login li:first-child {
    display: none;
  }

  ul.login li > img.logo {
    vertical-align: middle;
    width: 64px;
    height: 64px; 
    margin-right: 1em;
    margin-bottom: 0;
  }

  ul.login li input.entrar {
    padding: 0.5em;
    margin-left: 0.5em;
  }

}


/*--------------------------------*/


@media (max-height: 250px) {

  form.cuadro {
    padding: 0.5em;
  }

  ul.login li > img.logo {
    width: 32px;
    height: 32px;
    padding-right: 1.5em;
    margin: 0;
  }

}