html {
    box-sizing: border-box;
  }
  *, *:before, *:after {
    box-sizing: inherit;
  }
  .scratchpad{
    height: 100vh;
    width: 100vw;
    border: none;
    z-index: 11;
   
  }
  body {
      background:#ffffff;
  
  }
  .scratch-container {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width:100%;
  }
  
  .promo-container {
      
      padding:20px;
      margin:0 auto;
      text-align:center;
      font-family:'Open Sans', Arial,Sans-serif;
      color:#333;
      font-size:16px;
      bottom:15%;
      position: absolute;
      z-index: 10;
      top: 50%;
      left: 5%;
  }
  .btn {
    background:#F7CE36;
    color:#FFF;
    padding:10px 25px;
    display:inline-block;
    margin-top:15px;
    text-decoration:none;
    font-weight:600;
    text-transform:uppercase;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radiuss:3px;
  }
  
  .btn-grad {background-image: linear-gradient(to right, #F7CE36 0%, #F7CE36  51%, #F7CE36  100%)}
           .btn-grad {
              margin: 10px;
              padding: 15px 25px;
              text-align: center;
              text-transform: uppercase;
              text-decoration: none;
              transition: 0.5s;
              background-size: 200% auto;
              color: #093c71;            
             border: none;
              border-radius: 5px;
              display: block;
            }
  
            .btn-grad:hover {
              background-position: right center; /* change the direction of the change here */
              color: #fff;
              text-decoration: none;
            }