body {
    --color-primary: #009579
    --color-primary-dark: #007f67
    --color-secondary: #252c6a
    --color-error: #cc3333
    --color-succsess: #4bb544
    --border-radius: 4px 
       }
 
 body{
 
 margin: 8;
 height: 370px;
 display: flex;
 align-items: center;
 font-size: 18px;
 background: url('backgroundb.jpg');
 background-size: cover;
 
  }
  
.container {
align-items: center;
  width: 400px;
  max-width:400px;
  margin: 17rem;
  padding: 2rem;
  box-shadow: 0 0 40px rgba(0,0,0,0.2);
  border-radius: 4px;
  background: #ffffff;
  }
  
  .container,
  .form__input,
  .form__button {
    font: 500 1rem 'Quicksand' sans-serif;
    }
    
    .form > *:first-child {
          margin-top: 0;
    }
    
    .form > *:last-child {
        margin-bottom:0
    }
    
    .form__title{
      margin-bottom:2rem;
      text-align: center;
     }
    
    .form__message {
        text-align: center;
        margin-bottom: 1rem;
      }
      
    .form__message--sucsess {
      color: #4bb544;
      }
      
    .form__message--error {
      color: #cc3333;
      }
      
    .form__input--group{
      margin-bottom: 1rem;
      }
      
    .form__input{
        display: block;
        width: 100%;
        padding: 0.75rem;
        box-sizing: border-box;
        border-radius: 4px;
        border: 1px solid #dddddd;
        outline: none;
        background: #eeeeee;
        transition: background 0.2s, border-color 0.2s;
      }
      
      
      .form__input:focus {
        border-color: #009579;
        background: #ffffff;
        }
        
      .form__input-error {
        color: #cc3333;
        border-color: #cc3333;
        }