.btn {
    display: inline-block;
    background: none;
    padding: 20px 70px;
    font-family: 'Lucida Bright';
    font-weight: 500;
    font-size: 16px;
    text-align: center;
    border: 0px;
    border-radius: 40px;
    letter-spacing: 0px;
    white-space: nowrap;
    text-decoration: none;
    color: #ffb03b;
    transition-duration: 0.4s;
    cursor: pointer;
    transition-property: box-shadow, background-image, border;
    transition-duration: 0.4s;
  }
  
  .btn-a:hover {
    padding: 13px 35px;
    background-image: -moz-linear-gradient( -45deg, rgb(255,230,0) 0%, rgb(255,190,0) 100%);
    background-image: -webkit-linear-gradient( -45deg, rgb(255,230,0) 0%, rgb(255,190,0) 100%);
    background-image: -ms-linear-gradient( -45deg, rgb(255,230,0) 0%, rgb(255,190,0) 100%);
    border: 0px;
    border-color: transparent;
    border-radius: 40px;
    color: #ffc56e;
    transition-duration: 0.4s;
    box-shadow: 0px 6px 8px 0.15px rgba(0, 0, 0, 0.1); 
  }
  
  .btn-a {
    background-image: -moz-linear-gradient( -45deg, rgb(255,210,0) 0%, rgb(255,170,0) 100%);
    background-image: -webkit-linear-gradient( -45deg, rgb(255,210,0) 0%, rgb(255,170,0) 100%);
    background-image: -ms-linear-gradient( -45deg, rgb(255,210,0) 0%, rgb(255,170,0) 100%);
    border-color: transparent;
    box-shadow: 0px 4px 2.85px 0.15px rgba(0, 0, 0, 0.1);
    z-index: 4;
  }
  
  button:focus {
    outline: none;
  }
  
  .submit-habit-container {
    text-align: center;
    margin-top: 65px;
  }
  
  .submit-habit {
    width: 160px;
    height: 47px;
    background-color: rgb(255,210,0);
    box-shadow: 0px 4px 2.85px 0.15px rgba(0, 0, 0, 0.1);
  }  
  
  .light-text {
  /*   transition: opacity 0.1s linear;
    opacity: 0.45; */
    transition: color 0.1s linear;
    color: #ffc56e;
  }
  
  .onclick {
    transition: width 0.4s ease-in-out,
                box-shadow 1.5s ease,
                background-color 0.2s linear 0.4s;
    width: 50px;
    font-size: 0;
    padding: 0;
    background-image: none;
    background-color: #00BC80;
    box-shadow: none;
    cursor: default;
  }
  
  .checkmark {
     display: none;
  }
  
  .show-checkmark {
    display: inline;
  }
  
  .checkmark svg {
    width: 35px;
    height: auto;
    padding: 0;
    padding-left: 0px;
    margin-left: -15px;
  }
  
  .checkmark svg .path  {
    stroke-linecap: round;
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
    animation: dash 0.5s ease forwards;
    -webkit-animation: dash 0.5s ease forwards;
  }
  
  @keyframes dash {
    to {
      stroke-dashoffset: 0;
    }
  }
  
  @-webkit-keyframes dash {
    to {
      stroke-dashoffset: 0;
    }
  }