body{
    background-image: linear-gradient(to right top, #0a2222, #103131, #154042, #1a5053, #206065);
    font-family: 'Courier New', Courier, monospace;
    color: wheat;
    
}
/* Style all input fields */
input {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    
  }
  
  /* Style the submit button */
  input[type=submit] {
    background-color: #063c28;
    border-color:linear-gradient(to right bottom, #0a2222, #083035, #063d4b, #114b62, #28577a);
    
    color: wheat;
    cursor: pointer;
    font-family: 'Courier New', Courier, monospace;
    box-shadow: 1px 1px gray;
    
    
  }

  input[type=submit]:hover{
    background-color: #0e291f;
    box-shadow: none;
  }
  
  /* Style the container for inputs */
  .container {
    background-color: #f1f1f1;
    padding: 20px;
   
    background-image: linear-gradient(to right top, #0a2222, #103131, #154042, #1a5053, #206065);
    border-radius: 10px;

   font-family: 'Courier New', Courier, monospace;
    color:bisque;
    
  }
  
  /* The message box is shown when the user clicks on the password field */
  #message {
    display:none;
    background: #f1f1f1;
    color: #000;
    position: relative;
    padding: 20px;
    margin-top: 10px;
    background-image: linear-gradient(to right top, #0a2222, #103131, #154042, #1a5053, #206065);
    border-radius: 10px;
  }
  
  #message p {
    padding: 0px 30px;
    font-size: 18px;
    
  }
  
  /* Add a green text color and a checkmark when the requirements are right */
  .valid {
    color: green;
  }
  
  .valid:before {
    position: relative;
    left: -35px;
    content: "✔🤩";
  }
  
  /* Add a red text color and an "x" when the requirements are wrong */
  .invalid {
    color: red;
  }
  
  .invalid:before {
    position: relative;
    left: -35px;
    content: "✖💀";
  }