@import url("https://fonts.googleapis.com/css2?family=Caveat&family=Roboto:wght@100;400&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-family: "Caveat", cursive;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
}
body {
  background-color: beige;
  background-image: url("piza-background.jpg");
}

.container {
  width: 900px;
  margin: 2rem auto;
  padding: 1.5rem;
}

.h1 {
  text-align: center;
  font-weight: bold;
  padding: 1.5rem 0;
}

.container > div > .h1 > i {
  -webkit-box-reflect: left;
  color: rgba(189, 201, 31, 0.959);
}

.customer-name {
  font-size: 1.5rem;
  text-align: center;
}

.reflect {
  position: relative;
  left: 2.5rem;
}

.name {
  min-width: 300px;
  padding: 0rem 0.25rem;
  border: none;
  border-bottom: 1px solid black;
  outline: none;
  background: transparent;
  font-size: 100%;
}

.size-of-pizza-container > h2 {
  text-align: center;
  font-size: 2rem;
  margin-top: 1rem;
}

.size-of-pizza-description {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.size-of-pizza-description > div {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  justify-content: center;
}

.size-of-pizza-description > div > div > label > img {
  height: 100px;
  width: 100px;
  vertical-align: middle;
}

.size-of-pizza-description > div > div:nth-child(2) > label > img {
  height: 110px;
  width: 110px;
  vertical-align: middle;
  /*transform: scale(1.1, 1.1);*/
}

.size-of-pizza-description > div:nth-child(2) > div:nth-child(1) > label > img {
  height: 120px;
  width: 120px;
  vertical-align: middle;
  /*transform: scale(1.2, 1.2);*/
}

.size-of-pizza-description > div:nth-child(2) > div:nth-child(2) > label > img {
  height: 130px;
  width: 130px;
  vertical-align: middle;
  /*transform: scale(1.4, 1.4);*/
}

.size-of-pizza-description > div > div {
  display: flex;
  align-items: center;
}

/* from below styling appears on topping title and onwards*/

p.topping-title {
  text-align: center;
  font-size: 2rem;
}

p.topping-title > .fa-face-kiss-wink-heart {
  color: #ffa700;
}

.topping {
  display: flex;
  justify-content: space-around;
  padding: 2rem 0;
  font-size: 1.25rem;
  color: black;
}
.topping > div > div > label {
  opacity: 0.6;
}

.topping > div > div > label:hover {
  cursor: pointer;
  opacity: 1;
}

.delivery-method {
  text-align: center;
  font-size: 1.5rem;
}

.delivery-method > select {
  padding: 0.5rem;
  border-radius: 0.5rem;
  border-color: grey;
}
.submit-button {
  text-align: center;
  padding: 1rem 0;
}

.submit-button > button {
  padding: 0.5rem 1rem;
  background-color: rgb(80, 80, 179);
  color: white;
  border-radius: 0.35rem;
  font-size: 1.5rem;
}

.bills {
  text-align: center;
  color: grey;
}
/*.size-of-pizza > div > img {
width:100%;
height: 100%;
opacity: 0.7;
border-radius: 50%;
}

.size-of-pizza > .pizza-image {
height:100%;
}


.size-of-pizza {
    position:relative;
    width: 450px;
    height:450px;
    padding: 2rem;
}


.size-of-pizza-description {
    position:absolute;
    left:50%;
     top:50%;
     transform: translate(-50%,-50%);
   color:#002147 ;
   font-size: 1.25rem;
}

.size-of-pizza-description > h3 {
    text-align: center;
    padding:.45rem 0;
}*/