body {
  padding-bottom: 50px;
}

h1 {
  text-align: center;
}

div.builder {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, minmax(300px, auto));
  margin: 10px auto;
  grid-gap: 5px;
  width: 900px;
}

div.builder div {
  padding: 10px;
}

div.options {
  grid-column: 1/2;
  grid-row: 1/3;
}

div.toppings {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin: 5px 0;
  background-color: rgba(255, 255, 255, 0.8);
  border: 2px solid rgba(0, 0, 0, 0.5);
  border-radius: 5px;
}

div.toppings label img {
  width: 100px;
}

div.toppings label {
  text-align: center;
  border-radius: 5px;
  border: 2px solid transparent;
  padding: 5px;
  margin: 5px;
}

div.toppings label:hover {
  background-color: red;
  border-color: black;
  color: white;
  cursor: pointer;
}

div.toppings input:checked + label {
  background-color: red;
  color: white;
}

div.toppings input {
  display: none;
}

div.preview {
  grid-column: 2/4;
  grid-row: 1/3;
  position: relative;
}

div.preview img {
  width: 100%;
  position: absolute;
  top: 35px;
  left: 0;
  display: none;
}

div.preview img.base {
  display: block;
}

div.builder:has(#pepperoni:checked) div.preview img.pepperoni {display: block;}
div.builder:has(#sausage:checked) div.preview img.sausage {display: block;}
div.builder:has(#ham:checked) div.preview img.ham {display: block;}
div.builder:has(#mushrooms:checked) div.preview img.mushrooms {display: block;}
div.builder:has(#onions:checked) div.preview img.onions {display: block;}
div.builder:has(#pineapple:checked) div.preview img.pineapple {display: block;}
div.builder:has(#olives:checked) div.preview img.olives {display: block;}
div.builder:has(#peppers:checked) div.preview img.peppers {display: block;}

div.size {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  background-color: rgba(255, 255, 255, 0.8);
  border: 2px solid rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  margin: 5px 0;
}

div.size input {
  display: none;
}

div.size label {
  text-align: center;
  border-radius: 5px;
  border: 2px solid transparent;
  padding: 5px;
  margin: 5px;
}

div.size label:hover {
  background-color: red;
  border-color: black;
  color: white;
  cursor: pointer;
}

div.size input:checked + label {
  background-color: red;
  color: white;
}

div.crust {
  margin: 0 auto;
  background-color: rgba(255, 255, 255, 0.8);
  border: 2px solid rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  text-align: center;
}

div.information {
  margin: 30px auto;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.8);
  border: 2px solid rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  width: 750px;
}

div.information table {
  margin: 0 auto;
}

table tr td:nth-child(1){
  text-align: right;
}

table tr td {
  padding: 10px 5px;
}

th {
  text-align: center;
}

td.buttons input {
  margin: 0 10px;
}

p {
  text-align: center;
  margin: 0 auto;
  font-size: 18px;
  width: 300px;
  background-color: rgba(255, 255, 255, 0.8);
  border: 5px dashed red;
  border-radius: 10px;
  padding: 20px;
}