/* demo button */
  .demo-button {
    font-weight: var(--button-font-weight);
    font-family: "Ubuntu Condensed", sans-serif;
    display: inline-block;
    width: 8.55rem;
    height: 5vh;
    min-height: 40px;
    line-height: 2.5vh;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    border: 2px solid var(--demo-color);
    transition: color 0.5s;
    z-index: 1;
    font-size: var(--button-font-size);
    border-radius: var(--corner-radius);
    color: var(--demo-color);
    
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

  }
  
  .demo-button:before {
    content: "";
    position: absolute;
    z-index: -1;
    background: var(--demo-color);
    height: 150px;
    width: 200px;
    border-radius: 50%;
  }
  
  .demo-button:hover {
    color: #fff;
  }
  
  .demo-button:before {
    top: 100%;
    left: 100%;
    transition: all 0.7s;
  }
  
  .demo-button:hover:before {
    top: -30px;
    left: -30px;
  }
  
  .demo-button:active:before {
    background: var(--demo-color2);
    transition: background 0.1s;
  }