/*
  Created by Tutorialwork
  https://YouTube.com/Tutorialwork
  © 2019 - BetaSystem
*/
body, html{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #68F89E; /* For unsupported browsers */
  background-image: url("background.png");
  font-family: 'Roboto', sans-serif;
}
.container{
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 25%;
  padding: 2%;
  background: #A5C7D0;
  position: absolute;
  color: black;
  text-align: center;
}
input{
  background: #EDF4ED;
  border: 3px solid #FF4747;
  border-radius: 0px; /* Disable automatic border-radius */
  padding: 2%;
  margin-top: 1.5%;
  width: 80%;
  outline: none;
}
input:hover{
  border: 3px solid #8B2635;
  transition: all 0.4s;
}
button{
  background: #EDF4ED;
  border: 3px solid #FF4747;
  padding: 2%;
  margin-top: 1.5%;
  width: 85%;
  outline: none;
}
button:hover{
  background: #FF4747;
  transition: all 0.4s;
}
.error{
  color: red;
}

@media (max-width: 1224px) {
  .container{
    width: 85%;
  }
  input{
    padding: 3%;
  }
  button{
    width: 88%;
  }
}