html, body {
  margin: 0;
  overflow: hidden;
  background-color: rgb(233, 233, 245);
  color: black;
  font-family: sans-serif;
}

body {
  --scale: 1;
  --pageHeight: 100vh;
  --pageWidth: 100vw;
}

p {
  margin: 0;
}

.content {
  position: absolute;
  top: 0;
  left: 0;
  height: var(--pageHeight);
  width: var(--pageWidth);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.world {
  width: 0;
  height: 0;
  position: absolute;
  width: 80vmin;
  height: 80vmin;
  display: flex;
  align-items: center;
  justify-content: center;
  container-type: size;
}

.world-bg {
  position: absolute;
  width: 90cqmin;
  height: 90cqmin;
  background-color: #fff;
  z-index: -2;
  border-radius: 50%;
  border: 0.5vmin solid rgb(196, 196, 219);
}

.planet {
  background-color: rgb(28, 28, 64);
  position: absolute;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.planet-score {
  color: white;
  font-size: 3vmin;
}

.cherry {
  transform: scale(200%);
  background-image: url("../img/cherry-normal.svg");
}
.danger .cherry, .cherry.outside {
  background-image: url("../img/cherry-danger.svg");
}

.strawberry {
  transform: scale(200%);
  background-image: url("../img/strawberry-normal.svg");
}
.danger .strawberry, .strawberry.outside {
  background-image: url("../img/strawberry-danger.svg");
}

.grapes {
  transform: scale(200%);
  background-image: url("../img/grapes-normal.svg");
}
.danger .grapes, .grapes.outside {
  background-image: url("../img/grapes-danger.svg");
}

.dekopon {
  transform: scale(200%);
  background-image: url("../img/dekopon-normal.svg");
}
.danger .dekopon, .dekopon.outside {
  background-image: url("../img/dekopon-danger.svg");
}

.orange {
  transform: scale(200%);
  background-image: url("../img/orange-normal.svg");
}
.danger .orange, .orange.outside {
  background-image: url("../img/orange-danger.svg");
}

.apple {
  transform: scale(200%);
  background-image: url("../img/apple-normal.svg");
}
.danger .apple, .apple.outside {
  background-image: url("../img/apple-danger.svg");
}

.pear {
  transform: scale(200%);
  background-image: url("../img/pear-normal.svg");
}
.danger .pear, .pear.outside {
  background-image: url("../img/pear-danger.svg");
}

.peach {
  transform: scale(200%);
  background-image: url("../img/peach-normal.svg");
}
.danger .peach, .peach.outside {
  background-image: url("../img/peach-danger.svg");
}

.pineapple {
  transform: scale(200%);
  background-image: url("../img/pineapple-normal.svg");
}
.danger .pineapple, .pineapple.outside {
  background-image: url("../img/pineapple-danger.svg");
}

.cantaloupe {
  transform: scale(200%);
  background-image: url("../img/cantaloupe-normal.svg");
}
.danger .cantaloupe, .cantaloupe.outside {
  background-image: url("../img/cantaloupe-danger.svg");
}

.watermelon {
  transform: scale(200%);
  background-image: url("../img/watermelon-normal.svg");
}
.danger .watermelon, .watermelon.outside {
  background-image: url("../img/watermelon-danger.svg");
}

.fruit {
  background-size: contain;
  background-repeat: no-repeat;
}
.fruit.next {
  opacity: 0.5;
}

@keyframes scale-animation {
  0%, 100% {
    transform: scale(200%);
  }
  50% {
    transform: scale(300%);
  }
}
.fruit-dead {
  animation: scale-animation 1s infinite;
}

.divider {
  position: absolute;
  z-index: -3;
  width: 300%;
}

.world-object {
  position: absolute;
  border-radius: 50%;
}

.hidden {
  display: none;
}

.invisible {
  visibility: hidden;
}

.game-over-popup {
  position: absolute;
  width: min(90vw, 70vh);
  height: 90vh;
  font-size: 3vmin;
  background-color: white;
  border: 0.5vmin solid rgb(196, 196, 219);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 3vh;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 3vmin;
}

.button-row {
  display: flex;
  width: 100%;
  justify-content: space-around;
}

.score-table-container {
  width: 100%;
  flex: 1;
  overflow: scroll;
}

.score-table {
  width: 100%;
  text-align: center;
  font-weight: 200;
  color: #444;
}

.score-table tbody tr:nth-child(odd) {
  background-color: rgba(0, 0, 0, 0.05);
}

button {
  font-size: 3vmin;
  padding: 0.5em 0.7em;
  border: 0.5vmin solid black;
  border-radius: 1vmin;
  color: white;
}

.game-over-button {
  margin: 3vmin 0.5vmin;
  border-color: rgb(187, 23, 56);
  background-color: rgb(233, 37, 77);
}

.select-players-ui {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.select-players-heading {
  font-size: 5vmin;
  margin: 1vmin;
}

.select-players-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.select-players-button {
  margin: 1vmin;
  font-size: 7vmin;
  min-width: 100px;
  padding: 0.5em 1.5em;
  border-radius: 2vmin;
}
.select-players-button:nth-child(1) {
  background-color: rgb(217, 21, 76);
  border-color: rgb(151.9, 14.7, 53.2);
}
.select-players-button:nth-child(2) {
  background-color: rgb(248, 69, 69);
  border-color: rgb(213.8518134715, 8.0481865285, 8.0481865285);
}
.select-players-button:nth-child(3) {
  background-color: rgb(142, 69, 133);
  border-color: rgb(99.4, 48.3, 93.1);
}
.select-players-button:nth-child(4) {
  background-color: rgb(248, 170, 53);
  border-color: rgb(203.643062201, 125.0086124402, 7.056937799);
}
.select-players-button:nth-child(5) {
  background-color: rgb(255, 123, 0);
  border-color: rgb(178.5, 86.1, 0);
}
.select-players-button:nth-child(6) {
  background-color: rgb(233, 19, 19);
  border-color: rgb(163.1, 13.3, 13.3);
}
.select-players-button:nth-child(7) {
  background-color: rgb(199, 216, 51);
  border-color: rgb(143.8283950617, 156.9037037037, 29.9962962963);
}
.select-players-button:nth-child(8) {
  background-color: rgb(247, 186, 185);
  border-color: rgb(233.7076923077, 71.3538461538, 68.6923076923);
}
.select-players-button:nth-child(9) {
  background-color: rgb(227, 205, 57);
  border-color: rgb(174.1699115044, 154.817699115, 24.6300884956);
}
.select-players-button:nth-child(10) {
  background-color: rgb(139, 203, 99);
  border-color: rgb(93.5038461538, 158.55, 52.85);
}
.select-players-button:nth-child(11) {
  background-color: rgb(13, 115, 45);
  border-color: rgb(9.1, 80.5, 31.5);
}

/*# sourceMappingURL=styles.css.map */