#tipform{
    background-color: purple; 
    border: 3px solid blue; 
    height: auto; 
}

.header{
    background-color: aquamarine
}

.head{
    background-color: black; 
}

body {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; 
    background-color: black; 
    text-align: center; 
    
    
}

.label {
    text-transform: capitalize; 

}

.billamount{
    font-size: 2rem; 
}

input {
    size: 4rem; 
}

#display {
    font-size: 2rem; 
}

#peopleamt {
    border-block-color: black; 

}

p{
    font-size: 2rem; 
}

#btnCLick {
    font-size: 3rem; 
    color: blue; 
}

#total {
    font-size: 3rem; 
}

img {
    width: 30%;
    height: auto;
  }

  .deconstructed {
    position: relative;
    margin: auto;
    color: transparent;
    font-family: 'Cambay', sans-serif;
    font-size: 10vw;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.03em;
  }
  
  .deconstructed > div {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color:darkslategrey;
    pointer-events: none;
  }
  
  .deconstructed > div:nth-child(1) {
    -webkit-mask-image: linear-gradient(black 25%, transparent 25%);
    mask-image: linear-gradient(black 25%, transparent 25%);
    animation: deconstructed1 5s infinite;
  }
  
  .deconstructed > div:nth-child(2) {
    -webkit-mask-image: linear-gradient(transparent 25%, black 25%, black 50%, transparent 50%);
    mask-image: linear-gradient(transparent 25%, black 25%, black 50%, transparent 50%);
    animation: deconstructed2 5s infinite;
  }
  
  .deconstructed > div:nth-child(3) {
     -webkit-mask-image: linear-gradient(transparent 50%, black 50%, black 75%, transparent 75%);
    mask-image: linear-gradient(transparent 50%, black 50%, black 75%, transparent 75%);
    animation: deconstructed3 5s infinite;
  }
  
  .deconstructed > div:nth-child(4) {
     -webkit-mask-image: linear-gradient(transparent 75%, black 75%);
    mask-image: linear-gradient(transparent 75%, black 75%);
    animation: deconstructed4 5s infinite;
  }
  
  @keyframes deconstructed1 {
    0% {
      transform: translateX(100%);
    }
    26% {
      transform: translateX(0%);
    }
    83% {
      transform: translateX(-0.1%);
    }
    100% {
      transform: translateX(-120%);
    }
  }
  
  @keyframes deconstructed2 {
    0% {
      transform: translateX(100%);
    }
    24% {
      transform: translateX(0.5%);
    }
    82% {
      transform: translateX(-0.2%);
    }
    100% {
      transform: translateX(-125%);
    }
  }
  
  @keyframes deconstructed3 {
    0% {
      transform: translateX(100%);
    }
    22% {
      transform: translateX(0%);
    }
    81% {
      transform: translateX(0%);
    }
    100% {
      transform: translateX(-130%);
    }
  }
  
  @keyframes deconstructed4 {
    0% {
      transform: translateX(100%);
    }
    20% {
      transform: translateX(0%);
    }
    80% {
      transform: translateX(0%);
    }
    100% {
      transform: translateX(-135%);
    }
  }