body{ background: #eee url(../imagens/5-dots.png);}

html,body{
    position: relative;
    height: 100%;
    width: 100%;
}


.login-container{
  position: relative;
  width: 350px;
  margin: 0 auto;
  margin-top: 120px;
  padding: 20px 40px 40px;
  text-align: center;
  background: #fff;
  border: 1px solid #ccc;
}

button, h3 { font-size: 18px; padding: 10px 5px; margin: 10px 0; }

#output{
  position: absolute;
  width: 300px;
  top: -75px;
  left: 0;
  color: #fff;
}

#output

#output


.login-container::before,.login-container::after{
  content: "";
  position: absolute;
  width: 100%;height: 100%;
  top: 3.5px;left: 0;
  background: #fff;
  z-index: -1;
  -webkit-transform: rotateZ(4deg);
  -moz-transform: rotateZ(4deg);
  -ms-transform: rotateZ(4deg);
  border: 1px solid #ccc;

}

.login-container::after{
  top: 5px;
  z-index: -2;
  -webkit-transform: rotateZ(-2deg);
  -moz-transform: rotateZ(-2deg);
    -ms-transform: rotateZ(-2deg);

}




.form-box input{
  padding: 20px;
  text-align: center;
  border: 1px solid #ccc;;
  background: #fafafa;
  transition:0.2s ease-in-out;
}

.form-box input:focus{
  outline: 0;
  background: #eee;
}

.form-box input[type="text"]{
  border-radius: 5px 5px 0 0;
  text-transform: lowercase;
}

.form-box input[type="password"]{
  border-radius: 0 0 5px 5px;
}

.form-box button.login{
  margin-top:15px;
  padding: 10px 20px;
}




@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}





@media screen and (min-width:1000px) {
 

  .form-box input{
    width: 100%;
    height:40px;
    font-size: 20px !important;
    margin: 5px 0 !important;
  }

  .form-box input::placeholder { 
    font-size:20px !important;
  }

  input::placeholder, input::-webkit-input-placeholder, input::-moz-placeholder,
  input::-ms-input-placeholder, input::-moz-placeholder { 
    font-size:160px !important;
  }

}




@media screen and (max-width: 999px) {
  * { font-size: 40px; }
  button, h3 { font-size: 40px !important; margin: 10px 0; }
  

  .login-container{
      position: relative;
      width: 90% !important;
      margin: 0 auto;
      margin-top: 120px;
      padding: 20px 40px 40px;
      text-align: center;
      background: #fff;
      border: 1px solid #ccc;
      
  }

  .form-box input{
      width: 100%;
      height:180px !important;
      font-size: 80px !important;
      margin: 30px 0 !important;
  }

    
  input::placeholder, input::-webkit-input-placeholder, input::-moz-placeholder,
  input::-ms-input-placeholder, input::-moz-placeholder { 
    font-size:160px !important;
  }

  
  
}