.red {
  color: #f56060;
}

.orange {
  color: #f9ae48;
}

.yellow {
  color: #fae94f;
}

.green {
  color: #90cf29;
}

.blue {
  color: #78e0e7;
}

.purple {
  color: #bea6ff;
}

.pink {
  color: #df75d9;
}

.red {
  color: #f56060;
}

.orange {
  color: #f9ae48;
}

.yellow {
  color: #fae94f;
}

.green {
  color: #90cf29;
}

.blue {
  color: #78e0e7;
}

.purple {
  color: #bea6ff;
}

.pink {
  color: #df75d9;
}

.bubbleContainer {
  display: grid;
  grid-template-columns: repeat(11, 100px);
  grid-template-rows: repeat(2, 110px);
  align-items: center;
  justify-items: center;
  padding: 2rem;
}
.bubbleContainer .bubble {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #17067b;
  font-size: 35px;
  border-radius: 50%;
  height: 100px;
  width: 100px;
  box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.26);
}
.bubbleContainer .bubble:hover {
  height: 110px;
  width: 110px;
  cursor: pointer;
}
.bubbleContainer .b1,
.bubbleContainer .b2,
.bubbleContainer .b3,
.bubbleContainer .b4,
.bubbleContainer .b5,
.bubbleContainer .b6 {
  grid-row: 1/2;
}
.bubbleContainer .b7,
.bubbleContainer .b8,
.bubbleContainer .b9,
.bubbleContainer .b10,
.bubbleContainer .b11 {
  grid-row: 2/3;
}
.bubbleContainer .b1 {
  grid-column: 1/2;
  background-color: #bea6ff;
}
.bubbleContainer .b2 {
  grid-column: 3/4;
  background-color: #fae94f;
}
.bubbleContainer .b3 {
  grid-column: 5/6;
  background-color: #90cf29;
}
.bubbleContainer .b4 {
  grid-column: 7/8;
  background-color: #f56060;
}
.bubbleContainer .b5 {
  grid-column: 9/10;
  background-color: #df75d9;
}
.bubbleContainer .b6 {
  grid-column: 11/12;
  background-color: #78e0e7;
}
.bubbleContainer .b7 {
  grid-column: 2/3;
  background-color: #df75d9;
}
.bubbleContainer .b8 {
  grid-column: 4/5;
  background-color: #f56060;
}
.bubbleContainer .b9 {
  grid-column: 6/7;
  background-color: #f9ae48;
}
.bubbleContainer .b10 {
  grid-column: 8/9;
  background-color: #fae94f;
}
.bubbleContainer .b11 {
  grid-column: 10/11;
  background-color: #bea6ff;
}

@media (max-width: 1150px) {
  .bubbleContainer {
    grid-template-columns: repeat(11, 85px);
  }
}
@media (max-width: 1000px) {
  .bubbleContainer {
    grid-template-columns: repeat(11, 70px);
  }

  .bubble {
    height: 90px;
    width: 90px;
  }
  .bubble:hover {
    height: 100px;
    width: 100px;
  }
}
@media (max-width: 900px) {
  .bubbleContainer {
    grid-template-columns: repeat(7, 100px);
    grid-template-rows: repeat(3, 100px);
  }
  .bubbleContainer .b1,
.bubbleContainer .b2,
.bubbleContainer .b3,
.bubbleContainer .b4 {
    grid-row: 1/2;
  }
  .bubbleContainer .b5,
.bubbleContainer .b6,
.bubbleContainer .b7 {
    grid-row: 2/3;
  }
  .bubbleContainer .b8,
.bubbleContainer .b9,
.bubbleContainer .b10,
.bubbleContainer .b11 {
    grid-row: 3/4;
  }
  .bubbleContainer .b1,
.bubbleContainer .b8 {
    grid-column: 1/2;
  }
  .bubbleContainer .b2,
.bubbleContainer .b9 {
    grid-column: 3/4;
  }
  .bubbleContainer .b3,
.bubbleContainer .b10 {
    grid-column: 5/6;
  }
  .bubbleContainer .b4,
.bubbleContainer .b11 {
    grid-column: 7/8;
  }
  .bubbleContainer .b5 {
    grid-column: 2/3;
  }
  .bubbleContainer .b6 {
    grid-column: 4/5;
  }
  .bubbleContainer .b7 {
    grid-column: 6/7;
  }
}
@media (max-width: 730px) {
  .bubbleContainer {
    grid-template-columns: repeat(5, 100px);
    grid-template-rows: repeat(5, 90px);
  }
  .bubbleContainer .b1,
.bubbleContainer .b2 {
    grid-row: 1/2;
  }
  .bubbleContainer .b3,
.bubbleContainer .b4 {
    grid-row: 2/3;
  }
  .bubbleContainer .b5,
.bubbleContainer .b6,
.bubbleContainer .b7 {
    grid-row: 3/4;
  }
  .bubbleContainer .b8,
.bubbleContainer .b9 {
    grid-row: 4/5;
  }
  .bubbleContainer .b10,
.bubbleContainer .b11 {
    grid-row: 5/6;
  }
  .bubbleContainer .b1,
.bubbleContainer .b5,
.bubbleContainer .b10 {
    grid-column: 1/2;
  }
  .bubbleContainer .b2,
.bubbleContainer .b7,
.bubbleContainer .b11 {
    grid-column: 5/6;
  }
  .bubbleContainer .b3,
.bubbleContainer .b8 {
    grid-column: 2/3;
  }
  .bubbleContainer .b4,
.bubbleContainer .b9 {
    grid-column: 4/5;
  }
  .bubbleContainer .b6 {
    grid-column: 3/4;
  }
}
.red {
  color: #f56060;
}

.orange {
  color: #f9ae48;
}

.yellow {
  color: #fae94f;
}

.green {
  color: #90cf29;
}

.blue {
  color: #78e0e7;
}

.purple {
  color: #bea6ff;
}

.pink {
  color: #df75d9;
}

.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  cursor: pointer;
  text-decoration: none;
  border-radius: 5px;
  border: 2px solid white;
  background-color: #5035f9;
  color: white;
  width: 100%;
  height: 70px;
  margin: 1rem 0;
}
.btn:hover {
  background-color: #3c22e2;
}

.red {
  color: #f56060;
}

.orange {
  color: #f9ae48;
}

.yellow {
  color: #fae94f;
}

.green {
  color: #90cf29;
}

.blue {
  color: #78e0e7;
}

.purple {
  color: #bea6ff;
}

.pink {
  color: #df75d9;
}

.intermediatePage {
  background-color: #17067b;
  position: fixed;
  top: 0;
  height: 100%;
  width: 100%;
  flex-direction: column;
  padding: 4rem 0;
}
.intermediatePage .bg {
  position: absolute;
  background-image: url("./../images/bg.png");
  background-attachment: fixed;
  opacity: 0.5;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: -10;
}
.intermediatePage .displayMsg {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 1rem;
  background-color: rgba(80, 53, 249, 0.7);
  border-radius: 5px;
  font-size: 50px;
  min-width: 300px;
  margin: 0 20%;
}
.intermediatePage .displayMsg span {
  margin: 0 5px;
}
.intermediatePage .pointsDisplay {
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  margin: 1rem 0;
  font-size: 20px;
}
.intermediatePage .center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80%;
  margin-top: 1rem;
  padding: 0 20%;
}
.intermediatePage .center h2 {
  color: white;
  font-size: 40px;
}
.intermediatePage .center input {
  text-align: center;
  font-size: 50px;
  height: 80px;
  padding: 0 1rem;
  border-radius: 5px;
  border: none;
  margin: 1rem 0 0.5rem;
  color: #bea6ff;
}
.intermediatePage .center p {
  color: white;
  font-size: 20px;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

.modal, .gamePage {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.788);
  position: fixed;
  top: 0;
  height: 100%;
  width: 100%;
  flex-direction: column;
  padding: 20%;
  z-index: 100;
}
.modal .modal-contents, .gamePage .modal-contents {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 1rem;
  width: 100%;
  min-width: 250px;
  flex-direction: column;
}

.hidden {
  display: none;
}

.gamePage {
  justify-content: space-around;
  background-color: #17067b;
  padding: 0 2rem 3rem;
  z-index: 0;
  overflow: auto;
}

.bg {
  position: fixed;
  background-image: url("./../images/bg.png");
  background-attachment: fixed;
  opacity: 0.5;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: -10;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20%;
  width: 100%;
  flex-direction: column;
  margin-top: 5rem;
}
.center .questionBox {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  color: #5035f9;
  width: 500px;
  height: 100px;
  border-radius: 5px;
  align-self: center;
  font-size: 50px;
}

footer {
  display: flex;
  justify-content: space-between;
  padding: 1rem;
  margin: 1rem 0;
  bottom: 0;
  position: fixed;
  width: 100%;
  font-size: 30px;
}
footer .qNum, footer .timer {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70px;
  height: 70px;
  color: #17067b;
  background-color: #90cf29;
  border-radius: 5px;
}
footer .timer {
  background-color: #f9ae48;
}/*# sourceMappingURL=style.css.map */