body {
    background-color: lightblue;
    font-family: 'Neucha', cursive;
}

#frame {
    position: fixed;
    background-color: white;
    width: 100vw;
    height: 68.4210526vw;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.secretBorder {
    position: absolute;
    width: 2.63157895vw;
    height: 68.4210526vw;
    top: -54%;
    left: -50vw;
    z-index: 3;
}

#sb1 {
    background-color: white;
}

.bold {
    font-weight: bold;
}

.absolute {
    position: absolute;
}

.gameScreen {
    width: 94.7368421vw;
    height: 63.1578947vw;
    position: fixed;
    left: 50%;
    top: 50%;
}

#shopPane {
    width: 63.1578947vw;
    height: 46.7368421vw;
    top: -31.5789474vw;
    left: -47.3684211vw;
    z-index: -2;
}

#orderPane {
    width: 63.1578947vw;
    height: 16.4210526vw;
    bottom: 31.5789474vw;
    left: -47.3684211vw;
    z-index: 0;
}

#ingredientsPane {
    width: 31.5789474vw;
    height: 63.1578947vw;
    top: -31.5789474vw;
    right: 47.3684211vw;
    z-index: 0;
}

#timerText {
    font-size: 2.5263158vw;
    text-align: right;
    bottom: 46.3157895vw;
    right: 85.0526316vw;
    width: 48.4210526vw;
}

#timer {
    font-size: 2.5263158vw;
    text-align: right;
    bottom: 46.3157895vw;
    right: 80.4210526vw;
    width: 12.6315789vw;
}

#perfect {
    width: 16vw;
    height: 4.21052632vw;
    top: -11.5789474vw;
    left: -24vw;
}

#priceText {
    font-size: 4.42105263vw;
    color: cornflowerblue;
    top: -9.05263158vw;
    left: -20vw;
}

.perfect-animation {
    animation: translate-y 700ms;
}

@keyframes translate-y {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-2.10526316vw);
    }
}

#customer {
    width: 19.7894737vw;
    height: 25.6842105vw;
    top: -14.7368421vw;
    left: -8.42105263vw;
    z-index: -1;
}

.exit-right {
    animation: exit-right 1.2s;
}

@keyframes exit-right {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(31.5789474vw);
    }
}

.enter-right {
    animation: enter-right 1s;
}

@keyframes enter-right {
    from {
        transform: translateX(31.5789474vw);
    }
    to {
        transform: translateX(0);
    }
}

.exit-left {
    animation: exit-left 1.2s;
}

@keyframes exit-left {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-31.5789474vw);
    }
}

.enter-left {
    animation: enter-left 1s;
}

@keyframes enter-left {
    from {
        transform: translateX(-31.5789474vw);
    }
    to {
        transform: translateX(0);
    }
}

#cup {
    width: 17.2631579vw;
    height: 26.1052632vw;
    top: -12.2105263vw;
    left: -43.5789474vw;
}

#tea {
    width: 16.4210526vw;
    height: 23.1578947vw;
    top: -9.6842105vw;
    left: -43.1578947vw;
}

#boba {
    width: 12.6315789vw;
    height: 6.73684211vw;
    top: 6.31578947vw;
    left: -41.4736842vw;
}

#redBean {
    width: 13.4736842vw;
    height: 2.52631579vw;
    top: -9.6842105vw;
    left: -41.6842105vw;
}

#jelly {
    width: 12.6315789vw;
    height: 8vw;
    top: 4.63157895vw;
    left: -41.4736842vw;
}

#whippedCream {
    width: 16.4210526vw;
    height: 11.3684211vw;
    top: -17.682105vw;
    left: -43.1578947vw;
}

#temperature {
    width: 11.7894737vw;
    height: 13.4736842vw;
    top: -18.9473684vw;
    left: -41.0526316vw;
}

.ingredientIcons {
    display: flex;
    flex-direction: row;
    row-gap: 0.52631579vw;
    position: absolute;
    justify-content: space-around;
    flex-wrap: wrap;
    width: 28.4210526vw;
}

#orderIcons {
    top: 21.0526316vw;
    left: -28.4210526vw;
}

#flavorIcons {
    top: -22.1052632vw;
    left: 17.2631579vw;
}

#toppingIcons {
    top: -7.36842105vw;
    left: 17.2631579vw;
}

#tempIcons {
    top: 7.78947368vw;
    left: 16.8421053vw;
}

.icon {
    width: 5.47368421vw;
    height: 5.47368421vw;
    margin-left: 0.21052632vw;
    margin-right: 0.21052632vw;
}

button {
    color: black;
    width: 12.6315789vw;
    font-size: 3.15789474vw;
    font-family: 'Neucha', cursive;
    background-color: pink;
    border-color: white;
}

#doneBtn {
    top: 17.8947368vw;
    left: 18.9473684vw;
}

#trashBtn {
    top: 17.8947368vw;
    left: 32vw;
}

#moneyCounter {
    top: 22.5263158vw;
    left: 29.4736842vw;
    font-size: 3.15789474vw;
    font-family:'Courier New', Courier, monospace;
}

.invisible {
    display: none;
}

.menuBg {
    background-image: linear-gradient(rgb(206,227,255), rgb(255,212,245));
    width: 94.7368421vw;
    height: 63.1578947vw;
    top: -31.5789474vw;
    left: -47.3684211vw;
}

.menuHeader {
    font-size: 11.3684211vw;
    white-space: nowrap;
}

#musicBtn {
    width: 6.73684211vw;
    height: 6.73684211vw;
    left: 30.7368421vw;
    bottom: 32.6315789vw;
}

#soundBtn {
    width: 6.73684211vw;
    height: 6.73684211vw;
    left: 39.1578947vw;
    bottom: 32.6315789vw;
}

#startMenuBtns {
    display: flex;
    flex-direction: column;
    width: 52.6315789vw;
    top: -8.42105263vw;
    left: -27.3684211vw;
}

.startMenuBtn {
    font-size: 5.89473684vw;
    height: 9.47368421vw;
    width: 52.6315789vw;
    margin-bottom: 2.10526316vw;
}

#startHeader {
    top: -31.5789474vw;
    left: -28.4210526vw;
}

.infoText {
    width: 84.2105263vw;
    left: -42.1052632vw;
    text-align: center;
}

#tutorialHeader {
    font-size: 8.42105263vw;
    top: -33.6842105vw;
    left: -18.9473684vw;
}

#tutorialText {
    font-size: 2.94736842vw;
    top: -15.7894737vw;
}

#creditsHeader {
    font-size: 8.42105263vw;
    top: -33.6842105vw;
    left: -11.5789474vw;
}

#creditsText {
    font-size: 4.42105263vw;
    top: -15.7894737vw;
}

#gameOverHeader {
    top: -35.3684211vw;
    left: -21.0526316vw;
}

#gameOverText {
    font-size: 5.05263158vw;
    white-space: nowrap;
    left: -19.3684211vw;
    top: -16.8421053vw;
    text-align: center;
}

#gameOverMenuBtns {
    display: flex;
    flex-direction: column;
    width: 31.5789474vw;
    top: 8.42105263vw;
    left: -15.7894737vw;
}

.gameOverMenuBtn {
    font-size: 4.42105263vw;
    width: 31.5789474vw;
    height: 8.4105263vw;
    margin-bottom: 2.10526316vw;
}

.backBtn {
    font-size: 4.42105263vw;
    width: 31.5789474vw;
    height: 8.42105263vw;
    left: -15.7894737vw;
    top: 18.9473684vw;
}