div {
  background-size: cover;
  font-family: "Gochi Hand";
}

.background {
  height: 600px;
  width: 900px;

  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;

  background-color: black;
}

.fadeOut {
  animation: fadeOut 0.5s ease-in-out forwards;
}

@keyframes fadeOut {
  0% {
    filter: brightness(100%);
    opacity: 1;
  }
  100% {
    filter: brightness(0%);
    opacity: 0;
  }
}

.fadeIn {
  animation: fadeIn 0.5s ease-in-out forwards;
}

@keyframes fadeIn {
  0% {
    filter: brightness(0%);
    opacity: 0;
  }
  100% {
    filter: brightness(100%);
    opacity: 1;
  }
}

.screen {
  height: 600px;
  width: 900px;

  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}

.homeScreen {
  background-image: url('https://kwong09.github.io/sunny-side-cafe/assets/homeScreenBackground.png');
}

#startButton {
  height: 80px;
  width: 170px;
  text-align: center;

  position: fixed;
  top: 87%;
  left: 50%;
  transform: translate(-50%, -50%);

  cursor: pointer;

  background-image: url('https://kwong09.github.io/sunny-side-cafe/assets/startButton.png');
  animation: startButtonFloat 1s infinite ease-in-out;
}

@keyframes startButtonFloat {
  0%{top: 87%;}
  50%{top: 85%;}
  100%{top: 87%;}
}

.customerScreen {
  background-color: rgb(148, 79, 33);
  display: none;
}


.customerOption1, .customerOption2, .customerOption3 {
  height: 250px;
  width: 200px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: antiquewhite;

  cursor: pointer;
  border-radius: 10px;
}

.customerBackground {
  height: 300px;
  width: 800px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgb(198, 150, 111);
  border-radius: 10px;
}

.customerOption1 {
  background-image: url('https://kwong09.github.io/sunny-side-cafe/assets/customer1.png');
  left: 20%;
}
.customerOption2 {
  background-image: url('https://kwong09.github.io/sunny-side-cafe/assets/customer2.png');
  left: 50%;
}
.customerOption3 {
  background-image: url('https://kwong09.github.io/sunny-side-cafe/assets/customer3.png');
  left: 80%;
}

.customerScreenTitle, .customerScreenDescription {
  background-color: antiquewhite;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);

  padding: 10px;
}

.customerScreenTitle {
  top: 15%;
  font-size: 30px;
}

.customerScreenDescription {
  top: 87%;
  width: 700px;
  text-align: center;
  font-size: 20px;
}





.orderScreen {
  background-image: url("https://kwong09.github.io/sunny-side-cafe/assets/orderBackground.png");
  display: none;
}

.counter {
  height: 200px;
  width: 900px;

  position: fixed;
  top: 400px;
  background-color: rgb(83, 100, 159);
}

.orderCounter {
  background-image: url("https://kwong09.github.io/sunny-side-cafe/assets/orderCounter.png");
}

.customer, .customer2 {
  height: 250px;
  width: 200px;

  position: fixed;
  top: 500px;
  left: 150px;
  background-image: url("https://kwong09.github.io/sunny-side-cafe/assets/customer1.png");

  animation: customerUp 1s ease-in-out forwards;
}

@keyframes customerUp {
  0% {
    top: 500px;
  }
  100% {
    top: 150px;
  }
}

@keyframes customerDown {
  0% {
    top: 150px;
  }
  100% {
    top: 500px;
  }
}

.topSign1,
.topSign2,
.topSign3,
.topSign4 {
  height: auto;
  width: max-content;
  font-size: 30px;
  padding: 20px;

  position: fixed;
  left: 50%;
  transform: translateX(-50%);

  background-color: antiquewhite;

  animation: signDown 1s ease-in-out forwards;
}

@keyframes signDown {
  0% {
    top: -100px;
  }
  100% {
    top: 0px;
  }
}

@keyframes signUp {
  0% {
    top: 0px;
  }
  100% {
    top: -100px;
  }
}

.nextButton1 {
  height: 100px;
  width: 150px;
  background-image: url("https://kwong09.github.io/sunny-side-cafe/assets/nextButton.png");
  position: fixed;
  right: -100%;
  top: 450px;
  cursor: pointer;

  animation-delay: 4s;
  animation: nextButtonRightAppear 2s ease-in-out forwards;
}

@keyframes nextButtonRightAppear {
  0% {
    right: -100%;
  }
  100% {
    right: 0%;
  }
}

@keyframes nextButtonRightDisappear {
  0% {
    right: 0%;
  }
  100% {
    right: -100%;
  }
}

.customerSpeechBubble {
  height: auto;
  width: 0px;
  padding: 20px;
  border-radius: 20px;

  position: fixed;
  top: 25%;
  left: 65%;
  transform: translateX(-50%);

  background-color: antiquewhite;

  animation: expandRight 1s ease-in-out forwards, floating 2s ease-in-out infinite;
}

@keyframes floating {
  0% {
    top: 25%;
  }
  50% {
    top: 27%;
  }
  100% {
    top: 25%;
  }
}

@keyframes expandRight {
  0% {
    width: 0px;
  }
  100% {
    width: 300px;
  }
}

@keyframes speechBubbleDown {
  0% {
    top: 25%;
    width: 300px;
  }
  100% {
    top: 100%;
    width: 300px;
  }
}

.customerSpeechBubble span {
  font-size: 20px;
  width: 0ch;
  opacity: 0;
  white-space: nowrap;
  display: inline-block;
  overflow: hidden;

  animation: textTyping 1s steps(100) forwards;
  animation-delay: 1s;
}

@keyframes textTyping {
  from {
    width: 0ch;
    opacity: 1;
  }
  to {
    width: 100ch;
    opacity: 1;
  }
}

.money {
  font-size: 30px;
  position: fixed;
  top: 10px;
  right: 20px;
}

.mainDishScreen {
  background-image: url('https://kwong09.github.io/sunny-side-cafe/assets/mainDishBackground.png');
  display: none;
}

.mainDish,
.mainDish2,
.mainDish3 {
  height: 150px;
  width: 150px;

  position: absolute;
  left: 15px;
  background-image: url("https://kwong09.github.io/sunny-side-cafe/assets/blankImage.png");
}

.drink,
.drink2,
.drink3 {
  height: 100px;
  width: 100px;

  position: absolute;
  left: 170px;
  background-image: url("https://kwong09.github.io/sunny-side-cafe/assets/blankImage.png");
}

.food,
.food2,
.food3 {
  height: 180px;
  width: 250px;
  background-image: url('https://kwong09.github.io/sunny-side-cafe/assets/plate.png');

  position: fixed;
  left: -125px;
  bottom: 0px;

  animation: plateIn 1s ease-in-out forwards;
}

@keyframes plateIn {
  0% {
    left: -125px;
  }
  100% {
    left: 325px;
  }
}

@keyframes plateOut {
  0% {
    left: 325px;
  }
  100% {
    left: 900px;
  }
}

.selection {
  height: 150px;
  width: 150px;
  top: 150px;

  position: fixed;
  cursor: pointer;
}

.selection:hover {
  transform: scale(1.1);
  transition: transform 0.2s ease-in-out;
}

.pancakeButton {
  background-image: url("https://kwong09.github.io/sunny-side-cafe/assets/pancakePlain.png");
  left: 150px;
}

.toastButton {
  background-image: url("https://kwong09.github.io/sunny-side-cafe/assets/toastPlain.png");
  left: 375px;
}

.eggsButton {
  background-image: url("https://kwong09.github.io/sunny-side-cafe/assets/eggsSunnySideUp.png");
  left: 600px;
}

@keyframes selectionButtonsDown {
  0% {
    top: 150px;
  }
  100% {
    top: 600px;
  }
}

.minigame,
.customizationWindow {
  height: 500px;
  width: 800px;
  background-color: rgb(148, 79, 33);
  overflow: hidden;

  position: fixed;
  left: 50px;
  top: 600px;
  z-index: 10;

  animation: none;
}

@keyframes minigameUp {
  0% {
    top: 600px;
  }
  100% {
    top: 50px;
  }
}

@keyframes minigameDown {
  0% {
    top: 50px;
  }
  100% {
    top: 600px;
  }
}

.closeButton {
  height: 50px;
  width: 50px;
  background-image: url('https://kwong09.github.io/sunny-side-cafe/assets/closeButton.png');

  position: absolute;
  cursor: pointer;
  left: 750px;
}

.gameScreen {
  height: 400px;
  width: 750px;

  position: absolute;
  left: 25px;
  top: 80px;
  background-color: white;

  overflow: hidden;
}

@keyframes gameScreenExit {
  0% {
    left: 25px;
  }
  100% {
    left: -800px;
  }
}

.customizationScreen {
  height: 400px;
  width: 750px;

  position: absolute;
  left: 800px;
  top: 80px;
  background-color: white;

  overflow: hidden;
}

@keyframes customizationScreenEnter {
  0% {
    left: 800px;
  }
  100% {
    left: 25px;
  }
}

.pancakePlain {
  background-image: url("https://kwong09.github.io/sunny-side-cafe/assets/blankImage.png");
}

.pancakeFruits {
  background-image: url("https://kwong09.github.io/sunny-side-cafe/assets/fruits.png");
}

.pancakeButter {
  background-image: url("https://kwong09.github.io/sunny-side-cafe/assets/butter.png");
}

.pancakeWhippedCream {
  background-image: url("https://kwong09.github.io/sunny-side-cafe/assets/whippedCream.png");
}

.toastPlain {
  background-image: url("https://kwong09.github.io/sunny-side-cafe/assets/blankImage.png");
}

.toastAvocadoEgg {
  background-image: url("https://kwong09.github.io/sunny-side-cafe/assets/avocado.png");
}

.toastPBJ {
  background-image: url("https://kwong09.github.io/sunny-side-cafe/assets/pbj.png");
}

.toastChocolate {
  background-image: url("https://kwong09.github.io/sunny-side-cafe/assets/chocolate.png");
}

.eggsSunnySideUp {
  background-image: url("https://kwong09.github.io/sunny-side-cafe/assets/eggsSunnySideUp.png");
}

.eggsOmelette {
  background-image: url("https://kwong09.github.io/sunny-side-cafe/assets/eggsOmelette.png");
}

.eggsScrambled {
  background-image: url("https://kwong09.github.io/sunny-side-cafe/assets/eggsScrambled.png");
}

.eggsHardBoiled {
  background-image: url("https://kwong09.github.io/sunny-side-cafe/assets/eggsHardBoiled.png");
}

#pancakePan {
  height: 150px;
  width: 350px;

  position: absolute;
  left: 200px;
  bottom: 80px;

  background-image: url('https://kwong09.github.io/sunny-side-cafe/assets/sizzlingPan.gif');

  cursor: pointer;
}

#sliderBar {
  height: 20px;
  width: 500px;

  background: linear-gradient(0.25turn, lightcoral, lightgreen, lightcoral);
  position: absolute;
  top: 42px;
  left: 125px;

  border-radius: 10px;
}

#sliderCircle {
  height: 50px;
  width: 50px;

  background-color: rgb(148, 79, 33);
  position: absolute;
  top: 25px;
  left: 110px;

  border-radius: 100%;

  animation: sliderAnimation 1.5s infinite ease-in-out;
}

@keyframes sliderAnimation {
  0% {
    left: 110px;
  }
  50% {
    left: 600px;
  }
  100% {
    left: 110px;
  }
}

#pancakeGameTextDiv {
  position: absolute;
  text-align: center;
  font-size: 20px;

  left: 50%;
  top: 125px;
  transform: translateX(-50%);
}

.nextGameButton {
  display: none;
  height: 60px;
  width: 100px;
  background-image: url('https://kwong09.github.io/sunny-side-cafe/assets/nextButton2.png');

  position: absolute;

  cursor: pointer;
}

.pancakeNextGameButton {
  top: 215px;
  left: 615px;
}

.customizationBase {
  height: 350px;
  width: 350px;

  position: absolute;
  left: 50px;
  top: 15px;
}

.pancakeBase {
  background-image: url("https://kwong09.github.io/sunny-side-cafe/assets/pancakePlain.png");
}

.toastBase {
  background-image: url("https://kwong09.github.io/sunny-side-cafe/assets/toastPlain.png");
}

.eggsBase {
  background-image: url("https://kwong09.github.io/sunny-side-cafe/assets/eggsSunnySideUp.png");
}

.customizationOptions {
  height: 370px;
  width: 200px;
  overflow-y: scroll;
  padding-top: 15px;
  padding-bottom: 15px;

  display: flex;
  flex-direction: column;
  gap: 15px;

  position: absolute;
  right: 0px;
  background-color: rgb(198, 150, 111);
}

.customizationOptions div {
  height: 170px;
  width: 170px;
  background-color: white;
  margin: auto;
  cursor: pointer;
  border-radius: 10px;

  flex-shrink: 0;
}

.toaster {
  height: 200px;
  width: 200px;
  background-image: url('https://kwong09.github.io/sunny-side-cafe/assets/toaster.png');

  position: absolute;
  top: 100px;
  left: 100px;
}

.timerCircle {
  height: 200px;
  width: 200px;
  background: conic-gradient(
    lightgreen,
    rgb(255, 229, 113),
    lightcoral,
    lightcoral,
    lightcoral,
    lightcoral,
    lightcoral,
    rgb(255, 229, 113),
    lightgreen
  );

  position: absolute;
  top: 100px;
  left: 350px;

  border-radius: 100%;
  cursor: pointer;
}

.timerLine {
  height: 5px;
  width: 100px;
  background-color: black;

  position: absolute;
  top: 200px;
  left: 350px;

  transform-origin: center right;
  animation: timerLineRotate 1s infinite linear;
}

@keyframes timerLineRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.toastNextGameButton {
  top: 170px;
  left: 625px;
}

#toastGameTextDiv {
  position: absolute;
  text-align: center;
  font-size: 20px;

  left: 50%;
  top: 50px;
  transform: translateX(-50%);
}

.poppingScreen {
  height: 300px;
  width: 500px;

  position: absolute;
  left: 125px;
  top: 50px;

  background-color: rgb(198, 150, 111);
}

.poppingItem {
  height: 80px;
  width: 80px;
  position: absolute;
  top: 220px;
  cursor: pointer;
}

.egg1 {
  background-image: url('https://kwong09.github.io/sunny-side-cafe/assets/eggsHardBoiled.png');
}

.egg2 {
  background-image: url('https://kwong09.github.io/sunny-side-cafe/assets/eggsSunnySideUp.png');
}

.egg3 {
  background-image: url('https://kwong09.github.io/sunny-side-cafe/assets/none.png');
}

.eggsGameTextDiv {
  position: absolute;
  text-align: center;
  font-size: 20px;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.eggsGameTextDiv2 {
  position: absolute;
  text-align: center;
  font-size: 20px;
  top: 370px;
  left: 50%;
  transform: translateX(-50%);
}

.eggsNextGameButton {
  position: absolute;
  right: 10px;
  top: 170px;
}

.nextButton2, .nextButton3, .nextButton4 {
  height: 100px;
  width: 150px;
  background-image: url("https://kwong09.github.io/sunny-side-cafe/assets/nextButton.png");
  position: fixed;
  right: -100%;
  top: 450px;
  cursor: pointer;
}

.nextButton4 {
  animation-delay: 1s;
  animation: nextButtonRightAppear 1s ease-in-out forwards;
}

.drinksScreen {
  background-image: url('https://kwong09.github.io/sunny-side-cafe/assets/drinksBackground.png');
  display: none;
}

.icedButton,
.hotButton,
.coffeeButton,
.matchaButton,
.teaButton {
  height: 125px;
  width: 125px;

  position: absolute;
  cursor: pointer;
}

.icedButton {
  top: 70px;
  left: 100px;
  background-image: url("https://kwong09.github.io/sunny-side-cafe/assets/emptyCup.png");
}

.hotButton {
  top: 250px;
  left: 100px;
  background-image: url("https://kwong09.github.io/sunny-side-cafe/assets/emptyMug.png");
}

.coffeeButton {
  left: 300px;
  top: 400px;
  background-image: url("https://kwong09.github.io/sunny-side-cafe/assets/hotCoffee.png");
}

.matchaButton {
  left: 480px;
  top: 400px;
  background-image: url("https://kwong09.github.io/sunny-side-cafe/assets/hotMatcha.png");
}

.teaButton {
  left: 660px;
  top: 400px;
  background-image: url("https://kwong09.github.io/sunny-side-cafe/assets/hotTea.png");
}

@keyframes drinksUp {
  0% {
    top: 400px;
  }
  100% {
    top: 160px;
  }
}

@keyframes drinksTextUp {
  0% {
    top: 400px;
  }
  100% {
    top: 130px;
  }
}

.drinkCustomizationScreen {
  height: 400px;
  width: 750px;

  position: absolute;
  left: 25px;
  top: 80px;
  background-color: white;

  overflow: hidden;
}

.drinksText {
  position: absolute;
  font-size: 20px;
}

.coldText {
  left: 140px;
  top: 40px;
}

.hotText {
  left: 140px;
  top: 230px;
}

.coffeeText {
  left: 320px;
  top: 400px;
}

.matchaText {
  left: 500px;
  top: 400px;
}

.teaText {
  left: 700px;
  top: 400px;
}


.pickupScreen {
  background-image: url('https://kwong09.github.io/sunny-side-cafe/assets/orderBackground.png');
  display: none;
}


.pancakePlain, .toastPlain, .coffee2, .matcha2, .tea2 {
  background-image: url('https://kwong09.github.io/sunny-side-cafe/assets/none.png');
}