:root{
   --blue:#2980b9;
   --red:tomato;
   --orange:orange;
   --black:#333;
   --white:#fff;
   --bg-color:#eee;
   --dark-bg:rgba(0,0,0,.7);
   --box-shadow:0 .5rem 1rem rgba(0,0,0,.1);
   --border:.1rem solid #999;
}
*{
	margin: 0;
	background: ghostwhite;
	padding: 1%;
	font-family: sans-serif;

}
section{
   padding:2rem;
   
}
.btn
 {
   display: block;
   width: 100%;
   text-align: center;
   background-color: var(--blue);
   color:var(--white);
   font-size: 1.7rem;
   padding:1.2rem 3rem;
   border-radius: .5rem;
   cursor: pointer;
   margin-top: 1rem;
}

.btn:hover
 {
   background-color: var(--black);
}

.text-center{
	text-align: center;

}
h1{
	text-transform: uppercase;
	letter-spacing: 0.1rem;
	color:#333;
}
.heading{
   text-align: center;
   font-size: 3.5rem;
   text-transform: uppercase;
   color:var(--black);
   margin-bottom: 2rem;
}
.checkout-form .form{
	
   padding:2rem;
   border-radius: .5rem;
   background-color: var(--bg-color);
}

.checkout-form .form .flex{
   display: flex;
   flex-wrap: wrap;
     gap: 1.5rem;
}

.checkout-form .form .flex .inputBox{
  
   margin: 10px;
   width: 45%;
}

.checkout-form .form .flex .inputBox span{
   font-size: 2rem;
   color:var(--black);
}

.checkout-form .form .flex .inputBox input,
.checkout-form .form .flex .inputBox select{
   width: 100%;
   background-color: var(--white);
   font-size: 1.7rem;
   color:var(--black);
   border-radius: .5rem;
   margin:1rem 0;
   padding:1.2rem 1.4rem;
   text-transform: none;
   border:var(--border);
}

.display-order{
   max-width: 50rem;
   background-color: var(--white);
   border-radius: .5rem;
   text-align: center;
   padding:1.5rem;
   margin:0 auto;
   display: flex;
   flex-direction: column;
   margin-bottom: 2rem;
   box-shadow: var(--box-shadow);
   border:var(--border);
}

.display-order span.products{
   display: inline-block;
   border-radius: .5rem;
   background-color: var(--bg-color);
   padding:.5rem 1.5rem;
   font-size: 2rem;
   color:var(--black);
   margin:.5rem;
}

.display-order span.grand-total{
   width: 80%;
   background-color: var(--red);
   color:var(--white);
   padding:1rem;
   margin: 1rem auto;
}
}
@media (max-width:600px){
	.checkout-form .form .flex .inputBox{
    
   width: 100%;
   border: 1px solid black;
}
.checkout-form .form .flex .inputBox span{
   font-size: 1.1rem;
   color:var(--black);
}
.checkout-form .form .flex .inputBox input,
.checkout-form .form .flex .inputBox select{
   width: 100%;
   background-color: var(--white);
   font-size: 1.1rem;
   color:var(--black);
   border-radius: .5rem;
   margin:1rem 0;
   padding:0.9rem 1.05rem;
   text-transform: none;
   border:var(--border);
}
}
