      <html><head><title>forum</title>
      <style type="text/css">

      *html{box-sizing:border-box;}


      input , button {
        display:inline;
        border: 5px solid;
        border-radius: 8px;
        font-size: 1rem;
        margin: 0.25rem;
        min-width: 125px;
        padding: 0.5rem;
        transition: background-color 0.5s ease-out;
      }

      input:valid {  
      border:5px solid green;
      background-color: #fffcc8;
      color:black;
      animation: shake 0.82s cubic-bezier(.36,.07,.19,.97);
      transform: translate3d(0, 0, 0)}
      input:focus:invalid {background-color:red;
        border: 4px dashed red;
      } 

      input:invalid{
        
      border:4px solid red;
      animation: shake 0.82s cubic-bezier(.36,.07,.19,.97);
      transform: translate3d(0, 0, 0)
        }

       textarea {border:5px dashed black}
      .visible input, submit:invalid;{visibility:hidden}
      .visible input, submit:valid;{visibility:visible}

      .alert{background-color:red; color:white;font-weight:bold;width:280px;text-align:center;}
      .succes{background-color:green; font-weight:bold;color:white;width:100%;text-align:center}

      .input:focus:valid {background-color:green;
        border: 4px solid green;
      }

      a {font-weight: bold}
      </style>
      </head>
      </html>
