body{
    background: rgb(24, 62, 98);
    font: normal 17pt Comic Sans MS;
    }
    h1{
        color: white;
        align-items: center;
        display: flex;
        justify-content: center;
    }
    p{
        color: white;
        align-items: center;
        display: flex;
        justify-content: center;  
    }
    .button{
        padding: 10px 20px;
        font-size: 20px;
        width: 200px;
        height: 50px;
        border-radius: 10px;
        margin: 0 4px;
    }
    section#section1{
        background: white;
        border-radius: 25px;
        padding: 10px;
        width: 350px;
        margin: auto;
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.408);

    }
    section#section2{
        background: rgb(164, 41, 66);
        border-radius: 10px;
        padding: 10px;
        width: 580px;
        margin: auto;
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.408);

    }
/*     TESTE NOVO MODELO DE BUTAO*/
    .button2 {
        display: inline-block;
        padding: 15px 30px;
        border-radius: 10rem;
        color: #fff;
        text-transform: uppercase;
        font-size: 20px;
        letter-spacing: .15rem;
        transition: all .3s;
        position: relative;
        overflow: hidden;
        z-index: 1;
        margin: 0 14px;
      }
      
      .button2:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgb(136, 178, 132);
        border-radius: 10rem;
        z-index: -2;
        margin: 0 14px;
        
      }
      
      .button2:before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0%;
        height: 100%;
        background-color: rgb(77, 123, 74);
        transition: all .3s;
        border-radius: 10rem;
        z-index: -1;
        margin: 0 14px;
      }
      
      .button2:hover {
        color: #fff;
        margin: 0 14px;
      }
      
      .button2:hover:before {
        width: 100%;
        margin: 0 14px;
      }
/*
==============================================================================
==============================================================================
==============================================================================
==============================================================================
ATE AQUI TUDO BEM
*/

.button3 {
    display: inline-block;
    padding: 15px 35px;
    border-radius: 10rem;
    color: #fff;
    /*text-transform: uppercase;*/
    font-size: 19.5px;
    width: 100px;
    height: 25px;
    justify-content: center; 
    position: relative;
    overflow: hidden;
    z-index: 1;
    margin: 0 7px;
  }
  
  .button3:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(93, 170, 180);
    border-radius: 10rem;
    z-index: -2;
    margin: 0 7px;
    
  }
  
  .button3:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-color: rgb(48, 90, 96);
    transition: all .3s;
    border-radius: 10rem;
    z-index: -1;
    margin: 0 7px;
  }
  
  .button3:hover {
    color: #fff;
    margin: 0 7px;
  }
  
  .button3:hover:before {
    width: 100%;
    margin: 0 7px;
  }