*{
    margin: 0;
    padding: 0;
  }
  .heading{
    display:inline-block;
    font-size: 3.125rem;
    padding : 3.125rem 0 0.3125rem 8.75rem;
    color: black;
    margin:0 28.125rem 0 ;
  }

  .connect{ 
    font-size:1.2rem;
    padding: 0.625rem;
    background-color: greenyellow;
    position : relative;
    bottom : 0.5rem;
  }
  .connect:hover{
    background-color: rgb(14, 244, 14);
  }

  h2{
    font-size: 3rem;
    margin: 1.25rem;
  }
  
  .fontSize{
    font-size : 1.5rem;
  }
  .bigFont{
    font-size: 2.5rem;
  }
  
  .designRate{
    padding:0.625rem ;
  }
  .bill{
    font-size: 1.5rem;
  }
  .rate{
    font-size: 1.5rem;
  }
  .dark{
    background-color : #cce5ff ;
  }
  .btn{
    font-size:1.2rem;
    padding: 0.625rem;
    background-color: greenyellow;
  }

  .btn:hover{
    background-color: green;
  }

  .payNow{
    font-size:1.2rem;
    padding: 0.625rem;
    position : relative;
    bottom : 0.5rem;
    background-color: rgb(249, 151, 151);
    
  }
  .payNow:hover{
    background-color: grey;
  }
  .tip{
    font-size: 1.5rem;
  }
  .error{
    font-size: 1.5rem;
  }
  .total{
    font-size: 1.5rem;
  }
  #price{
    font-size : 2.5rem;
    margin-top: 1.25rem;
  }
  
  .hidden{
    display:none;
  }
  
  .containeryellow{
    border: 0.25rem solid red;
    border-radius: 1.875rem;
    height:31.25rem;
    display:flex;
    align-items: center;
    justify-content: center;
  }
  
  .containerred{
    border: 0.25rem solid red;
      border-radius: 1.25rem;
    text-align: left;
    width: 50rem;
    height: 22rem;
    overflow: auto;
    display:inline-block;
  }
  
  .containerblue{
      border-radius: 1.875rem;
    margin-left: 1.875rem;
    border: 0.25rem solid red;
    text-align: center;
    width: 50rem;
    height: 22rem;
    overflow: auto;
    display:inline-block;
  }
  
  .containerblack{
    border:0.25rem solid black;
    text-align:center;
     background: linear-gradient(to bottom right, #ffff00 0%, #ff0000 100%);
  }
  
  ul li{
    padding: 0.625rem;
   
  }
  
  #search{
    margin: 0  auto;
  }
  
  ul{
    padding : 1.25rem;
     background: linear-gradient(to bottom right, #ffff00 0%, #ff0000 100%);
  }
  
  ul li{
    background: turquoise ;
    color: darkblue;
    margin: 0.3125rem;
    
  }
  ul li:hover{
    background-color: rgb(30, 30, 241);
  }
  
  .containergreen{
    
  border:0.25rem solid red;
      border-radius: 1.875rem;
    height:31.25rem;
    display:flex;
    align-items: center;
    justify-content: center;
   
  
  }
  
  .containerorange{
     background: linear-gradient(to bottom right, #ffff00 0%, #009900 100%);
  border:0.25rem solid red;
     width: 50rem;
    height: 22rem;
    justify-content: center;
    display:inline-block;
      border-radius: 1.875rem;
  
  }
  
  .containerviolet{
    border:0.25rem solid red;
      border-radius: 1.875rem;
    width: 50rem;
    height: 22rem;
     display:inline-block;
    margin-left: 1.875rem;
    align-items:center;
    justify-content: center;  
  }
  
  
  .button1{
    padding: 1.875rem;
    margin:4rem;
    
  }
  .button2{
    padding: 1.875rem;
    margin:4rem;
  }

  div p{
    text-align: center;
    font-size : 1.5rem;
    font-weight: 700;
  }

  .thankyou{
    background: linear-gradient(to bottom right, #33ccff 0%, #000000 100%);
   padding:0.625rem;
   height:10rem;
   margin:2.5rem;
    border-radius:1.875rem;
    font-weight: 700;
    position: relative;
    bottom:0.9375rem;
    font-size: 1.5rem;
  }
 
  @media(max-width:1700px)
  {
    html{
      font-size: 85%;
    }
  }


  @media(max-width:1435px)
  {
    html{
      font-size: 75%;
    }
  }
  
  @media(max-width:1275px)
{
  html{
    font-size: 68%;
  }
}

@media(max-width:1140px)
{
  html{
    font-size: 60%;
  }
}


@media(max-width:1000px)
{
  html{
    font-size: 50%;
  }
}

@media(max-width:833px)
{
  html{
    font-size: 45%;
  }
}

@media(max-width:750px)
{
  html{
    font-size: 35%;
  }
}

@media(max-width:590px)
{
  html{
    font-size: 25%;
  }
}

@media(max-width:425px)
{
  html{
    font-size: 21%;
  }
}



@media(max-width:400px)
{
  .heading{
    width:25%;
    height: 5%;
  }
  .connect
  {
    height: 2%;
  }
  
  .containerred,.containerblue,.containerorange,.containerviolet
  {
    width:100%;
  }
  

}