:root {
    --theme-bg-color: rgba(255, 255, 255, 0.5);}
    
   body {
       background-image: url('wavesBG.jpg');
       background-repeat: no-repeat;
       background-position: center;   
       color: #000;
       margin: 0;
       display: flex;
       flex-direction: column;
       font-family: 'Poppins', sans-serif;
       justify-content: center;
       align-items: center;
       min-height: 100vh;
   }
   button{
       border: none;
       padding: 0.8rem;
       border-radius: 35px;
       width: 8rem;
       background-color: white;
       font: inherit;
       font-size: 10pt;
       font-weight: 600;
       margin-top: 1rem;
       box-shadow: 10px 8px 10px 2px rgba(0, 0, 0, 0.2),
       -10px -10px 20px 0 rgba(255, 255, 255, 0.5);
   }
   button:hover{
       cursor: pointer;
   }
   button:active{
       box-shadow: inset 6px 6px 10px 0 rgba(0, 0, 0, 0.2),
       inset -6px -6px 10px 0 rgba(255, 255, 255, 0.5);
   }
   .container {
       display: flex;
       flex-direction: column;
       padding: 2rem 3rem;
       width: 50vw;
       backdrop-filter: blur(5px);
       background-color: var(--theme-bg-color);
       box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
       -webkit-backdrop-filter: blur(20px);
       border-radius:20px;
   }
   
   .results{
       text-align: left;
       display: flex;
       flex-direction: row;
       justify-content: space-between;
       align-content: center;
   }
   
   .bottom-results{
       display: flex;
       flex-direction: row;
       justify-content: space-between;
   }
   h1 {
       margin: 0 0 1rem;
       text-align: center;
       text-transform: uppercase;
       text-decoration:underline;
       text-shadow: -1px 1px 0px #fff;
   }
   strong{
       color:navy;
   }
   span{
       color:black
   }
   .form_control{
       margin: 15px 0;
       display: flex;
       align-items: center;
   }
   .form_control label{
       font-weight: 600;
       margin-bottom: 0.25rem;
       margin-right: 1rem;
   }
   .form_control input {
       box-shadow: 12px 12px 24px 0 rgba(0, 0, 0, 0.2),
       -12px -12px 24px 0 rgba(255, 255, 255, 0.5);
       border-radius: 40px;
       font: inherit;
       font-size: 18pt;
       border: none;
       padding: 0.75rem;
       width: 40%;
       box-shadow: inset 6px 6px 10px 0 rgba(0, 0, 0, 0.2),
       inset -6px -6px 10px 0 rgba(255, 255, 255, 0.5);
   }
   .form_control input:focus{
       outline: none;
       box-shadow: 0px 0px 10px #1080BF;
   }
   .form_control label {
       display: block;
   }
   
   #finalTotal::before,
   #billPerPerson::before,
   #tip::before,
   #tiptotal::before,
   #tipPerPerson::before,
   #totalPerPerson::before {
       content:"$";
   }