html, body {
  height: 100%;
  width: 100%;
  font-family: 'Prompt', sans-serif;
}

#all {
  background-color: red;
  width: 88%;
  margin: 0 auto;
}

#output, #output2 {
  background-color: transparent;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Chango', cursive;
  color: #345bb7;
}

#output3 {
  background-color: transparent;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Chango', cursive;
  color: #faab00;
}


#left {
  margin-left: 0%;
  margin-top: 0%;
  background-color: #ededfd;
  width: 40%;
  float: left;
  height: 300px;
  border: 10px #2986ff solid;
  text-align: center;
  padding: 10px;
  border-radius: 20px 20px 20px 20px;  
  
}

#right {
 margin-right: 0%;
  margin-top: 0%;
  background-color: #ededfd;
  width: 40%;
  float: right;
  height: 300px;
  border: 10px #2986ff solid;
  text-align: center;
  padding: 10px;
  border-radius: 20px 20px 20px 20px; 
}

button {
    margin-top: 10px;
    width: 100%;
    height: 60px;   
    background: #ffffff;
    border: 10px #67baf9 solid;
    color: #2986ff;   
    font-size:24px;
    font-weight:700;
    border-radius: 13px 13px 13px 13px; 
}

#button3 {
  background: #ffffff;
    border: 10px #f9cb67 solid;
    color: #ffc629; 
}

#left2 {
  margin-left: 0%;
  margin-top: 10%;
  background-color: white;
  width: 40%;
  float: left;
  height: 300px;
  border: 10px #e8e8e8 solid;
  text-align: center;
  padding: 10px;
  border-radius: 20px 20px 20px 20px; 
}

#right2 {
  margin-right: 0%;
  margin-top: 10%;
  background-color: #f9f6e1;
  width: 40%;
  float: right;
  height: 300px;
  border: 10px #ffdd00 solid;
  text-align: center;
  padding: 10px;
  border-radius: 20px 20px 20px 20px; 
}

.box div {
  background-color: transparent;
  height: 240px;
  text-align: center;
}

.box button {
  margin: 0 auto; 
}

#sub {
  width:30%;
  float: left;
  background: #ffffff;
  border: 10px #ff4d4d solid;
  color: #ff2929; 
  font-size:40px;
  padding: 0px;
}

#add {
  width:30%;
  float: right;
  background: #ffffff;
  border: 10px #3de659 solid;
  color: #29ff69; 
  font-size:40px;
  padding: 0px;
}

#buttons {
  height: 50px;
}

#points {
  background-color: transparent;
  height: 86px;
}

.filler {
  height: 20px;
  background-color: red;
}

#qtyBox {
  width:50%;
  text-align: center;
  background: transparent;
  border: 5px white solid;
  color: #ffa200; 
  font-size:80px;
  padding: 0px;
}

#chocolate {
  width: 120px;
}

html { 
  background: url("./Untitled760_20220925141408.png") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}