body{
    background: #0F2027;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #2C5364, #203A43, #0F2027);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #2C5364, #203A43, #0F2027); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    
}

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');

h1{
    text-align:center;
    color:white;
    padding-top: 10vw;
    font-family: 'Open Sans', sans-serif;
}

textarea {
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    color:#000428;
    padding: 150px;
    font-size:x-large;
    font-family: 'Open Sans', sans-serif;
}

.bn632-hover {
    width: 160px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    margin: 20px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 55px;
    text-align:center;
    border: none;
    background-size: 300% 100%;
    border-radius: 50px;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
  }
  
  .bn632-hover:hover {
    background-position: 100% 0;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    display: block;
    margin-left: auto;
    margin-right: auto;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
  }
  
  .bn632-hover:focus {
    outline: none;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  
  .bn632-hover.bn18 {
      background-image: linear-gradient(
        to right,
        #25aae1,
        #40e495,
        #30dd8a,
        #2bb673
      );
          display: block;
        margin-left: auto;
     margin-right: auto;
      box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
  }