cart.css

*{
  text-align: center;
  font-family: Verdana, sans-serif;
}

html{
  scroll-behavior: smooth;
}

body{
  min-width: 900px;
  margin: 0;
}

.topnav{
  top: 0;
  background-color: white;
  position: fixed;
  padding-bottom: 7px;
  width: 100%;
  box-shadow: 0 0 2px 0 #A8A8A8;
}

.logo img {
  float: left;
  width: 208px;
  height: 55px;
  display: inline-block;
  margin-top: 4px;
}


.left li, .left li a{
  float: left;
  font-size: .95em;
  display: inline-block;
  margin: 3px 6px;
}

.left li a {
  text-decoration: none;
  color: black;
}

.emptyCart{
  margin-top: 38vh;
}

.emptyCart a{
  color: #0075FF;
  text-decoration: none;
}

.yourCart{
  margin-top: 80px;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 46px;
}

.emptyCart h2{
  font-weight: normal;
}

.yourCart h2{
  font-weight: 500;
  margin: -10px auto 20px 40px;
}

.yourCart a{
  color: #0075FF;
  text-decoration: none;
  margin: 55px 82px 20px auto;
}

#clearCart{
  font-size: 16px;
  margin: 10px;
  border-radius: 10px;
  margin-right: 88.5vw;
  text-decoration: underline;
  cursor: pointer;
}

.checkout{
  position: fixed;
  margin-top: 2vh;
  margin-left: 79vw;
}

#totalAmount{
  margin-right: 6vw;
  margin-top: 5vh;
}

#checkoutBtn{
  padding: 20px 45px;
  margin: 1vh 6vw auto auto;
  border-radius: 10px;
  border: white;
  background-color: #F1914B;
  cursor: pointer;
}

button{
  color: white;
}

.cartTitle ul{
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  list-style: none;
  margin: 30px 82px 0 40px;
  padding: 0 0 10px 0;
  border-bottom: 2px solid #888888;
}
#product{
  width: 100px;
  padding-right: 200px;
  margin-right: 18vw;
}

#price{
  width: 100px;
  margin-right: 13vw;
}

#quantity{
  width: 100px;
  margin-right: 12vw;
}

#checkoutTitle{
  width: 210px;
  margin-right: 2vw;
}

.shoppingCart{
  min-height: 50vh;
  display: inline-block;
}

.items{
  display: flex;
  flex-direction: column;
  float: left;
  margin: 2vh auto auto 40px;
}

.items img{
  display: inline-block;
  width: 10vw;
  min-width: 120px;
  border-radius: 10px;
  margin-bottom: 10px
}

.title{
  float: left;
  display: flex;
  flex-direction: column;
}

.title p {
  text-align: left;
  padding: 10px;
  margin: 12px auto auto auto;
  width: 248px;
  cursor: pointer;
}

.title p:nth-child(1){
  display: inline-block;
}

.title a{
  margin-right: 165px;
  margin-bottom: 8vh;
  font-size: 14px;
  color: red;
  cursor: pointer;
}

.price {
  float: left;
  display: flex;
  flex-direction: column;
  width: 50px;
  height: 30px;
  margin: 5vh auto auto 9.4vw;
}

.price p{
  margin-bottom: 13vh;
}

.quantity{
  float: left;
  display: flex;
  flex-direction: column;
  width: 10%;
  margin: auto auto auto 13vw;
}

.quantity p{
  margin-top: 48px;
  /* margin-bottom: 11.5vh; */
}

.quantity a{
  float: left;
  cursor: pointer;
  /* display: inline-block; */
}

.quantity #minus{
  margin: -40px auto 8vh 20px;
  font-size: 24px;
}

.quantity #plus{
  margin: -80px 20px 8vh auto;
}

@media screen and (max-width: 1150px){
  .quantity, #quantity{
    display: none;
  }
}

.summary{
  /* min-width: 925px; */
  width: 50%;
  margin: 10vh auto;
  border: 2px solid black;
  padding-bottom: 5vh;
}

h1{
  font-family: serif;
  font-size: 3em;

}


input[type="email"]{
  width: 42%;
  padding: 8px 15px;
  border: 1px solid black;
  background-color: #f7f7f7;
  margin-bottom: 10px;
}

.name{
  margin: 3px 5px;
}

.name input[type="text"]{
  width: 23.8%;
  padding: 8px 15px;
  border: 1px solid black;
  margin: auto 4px;
}

.name label{
  margin: 3px 6%;
}

.address input, .card input{
  width: 54%;
  padding: 8px 15px;
  border: 1px solid black;
  margin: 5px auto;
}
.exp{
  margin: 6px auto;
}

.exp input{
  width: 23.5%;
  padding: 8px 15px;
  border: 1px solid black;
  margin: auto 4px;
}


#payment{
  padding: 6px 10px;
  margin: 5px auto 13px auto;
  width: 59%;
}

#paymentMethod{
  margin-top: 10px;
}

input[type="submit"]{
  width: 59%;
  background-color: #0075FF;
  color: white;
  border: 1px solid black;
  padding: 10px 20px;
  border-radius: 8px;
  margin-bottom: 10px;
}

input[type="submit"]:hover{
  background-color: #1983FF;
}

input[type="submit"]:active{
  background-color: #0055B9;
}

.redirect{
  margin-top: 100px;
}

.loader {
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
  margin-left: 44vw;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}