html, body {
    margin: 0; 
    height: 100%; 
    overflow: hidden
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 99vh; 
  width: 100vw;
  overflow: hidden;
  position: relative;
}

.toppings-container {
    height: 50vh;
    width: 100vw;
}

.centerer {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100vw;
}

.difficultybutton {
    text-align: center;
    width: 50%;
    height: 100px;
    margin: 2% auto;
    font-size: 20px;
}

#thebuttons {
    margin: auto;
    text-align: center;
    margin-top: 10%;
    width: 100%;
    z-index: 2;
}

#order {
    text-align: center;
    position: fixed;
    bottom: 0;
    right: 0;
    height: 30vh;
    width: 30vw;
    border-style: solid;
    border-color: black;
    border-width: 1px;
    display: none;
}

.popup {
    display: none;
    position: fixed;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
}

.popup-content {
    background: #fff;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
}

#title-screen {
    display: block;
}

#order-screen {
    display: none;
}

#next1 {
    display: none;
    margin: auto;
}

#thecanvas {
    width: 20vw;
    height: 35vh;
    position: fixed;
    bottom: 4%;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
}

#toppings1-screen {
    display: none;
}

.nextbutton {
    float: right;
}

.prevbutton {
    float: left;
}

.resetbutton {
    position: absolute;
    bottom: 0;
    left: 0;
}

.topping {
    display: inline-flex;
    flex-direction: column;
    justify-content: end;
    width: 33vw;
    height: 50vh;
    vertical-align: bottom;
}

.base {
    display: inline-flex;
    flex-direction: column;
    justify-content: end;
    width: 24.5vw;
    height: 50vh;
    vertical-align: bottom;
}

#rainbow-jelly {
    background-color: red;
}

#tapioca {
    background-color: brown;
}

#grass-jelly {
    background-color: green;
}

#toppings2-screen {
    display: none;
}

#pearl {
    background-color: palegoldenrod;
}

#pudding {
    background-color: lightyellow;
}

#oreo {
    background-color: chocolate;
}

#base-screen {
    display: none;
}

#taro {
    background-color: violet;
}

#passion {
    background-color: orange;
}

#milk {
    background-color: peachpuff;
}

#matcha {
    background-color: greenyellow;
}

#final-screen {
    display: none;
}