* {
  font-family: "Montserrat", sans-serif;
  /* border: 1px solid red; */
}

html {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
}

body {
  margin: 0;
  box-sizing: border-box;
  background: rgb(223, 212, 232);
  background: linear-gradient(
    172deg,
    rgba(223, 212, 232, 1) 50%,
    rgba(255, 255, 255, 1) 100%
  );
  background-repeat: no-repeat;
}

h1,
h2,
button {
  font-family: "Montserrat", sans-serif;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
}

p {
  font-size: 0.9rem;
  letter-spacing: 2%;
}

.dnone {
  display: none;
}

/* text inside bubbles */

#textTL,
#textTR {
  padding-bottom: 1rem;
  font-size: 1rem;
  letter-spacing: 6%;
  width: 8rem;
  color: white;
}

#textBL,
#textBR {
  padding-top: 0.7rem;
  font-size: 1rem;
  letter-spacing: 6%;
  width: 8rem;
  color: white;
}

/* talk bubbles  */

#bubbleTR {
  background-image: url("../assets/imgs/bubbleTR.png");
}

#bubbleTL {
  background-image: url("../assets/imgs/bubbleTL.png");
}

#bubbleBR {
  background-image: url("../assets/imgs/bubbleBR.png");
}

#bubbleBL {
  background-image: url("../assets/imgs/bubbleBL.png");
}

lottie-player {
  width: 200px;
  height: 200px;
}

.welcomeScreenBG {
  background-color: #ffffff;
  transition: all 3000ms;
}
.gameMasterWrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 1rem;
  opacity: 0; /* to make it fade in at welcomescreen*/
  margin-bottom: 3rem;
}

.gmItem {
  border-style: none !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}

.speechBubbleWrapper {
  display: flex;
  height: 5rem;
}
.speechBubbleWrapperBot {
  margin-top: 1.5rem;
}

.gameMaster {
  align-self: center;
  width: 12rem;
  height: 10rem;
}

.bubble {
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: default;

  width: 10rem;
  height: 8rem;
}

.bubble > p {
  text-align: center;
  vertical-align: middle;
  position: absolute;
  font-size: 0.5rem;
  font-weight: 600;
  max-width: 4rem;
  color: #ffffff;
  letter-spacing: 0.5px;
}

.bubbleImage {
  max-width: 110%;
  max-height: 110%;
}

.botContainer {
  display: flex;
  justify-content: space-evenly;

  width: 100%;
  height: 10rem;
}

/* player styles */
#playerBolt:hover,
#playerClank:hover,
#playerGadget:hover {
  cursor: pointer;
}

#playerBolt,
#Bolt {
  height: 7.5rem;
  width: 7rem;
  background-image: url("../assets/imgs/playerBolt-grey.png");
  background-size: cover;
  object-fit: cover;
}
#playerClank,
#Clank {
  height: 7rem;
  width: 7rem;
  background-image: url("../assets/imgs/playerClank-grey.png");
  background-size: cover;
  object-fit: cover;
}
#playerGadget,
#Gadget {
  height: 7rem;
  width: 7rem;
  background-image: url("../assets/imgs/playerGadget-grey.png");
  background-size: cover;
  object-fit: cover;
}

#Player {
  height: 8rem;
  width: 7.5rem;
  background-image: url("../assets/imgs/playerBrain.png");
  background-size: cover;
  object-fit: cover;
}

.buttonContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  /* background-color: red; */
  width: 100%;
  height: 10rem;
}
#startGame {
  width: 5rem;
  height: 3rem;
  /* background-color: blue; */
}

#userInput {
  border: 3px solid #dcd6e4;
  box-sizing: border-box;
  border-radius: 270px;
  color: #8d809e;
  text-align: center;
  font-size: 1rem;
  height: 3rem;
  width: 14rem;
}

#userInput:focus {
  border: 3px solid #dcd6e4;
  box-sizing: border-box;
  border-radius: 270px;
  outline: none;
}

.inputWrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 1rem;
  justify-content: center;
}

.inputWrapper > input {
  width: 15rem;
}

.answerContainer {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  width: 100%;
}

.answerBubble {
  width: 9.5rem;
  height: 4.5rem;
  background-position: center;
  background-image: url(../assets/imgs/answerBubble.png);
  background-size: contain;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 1rem;

  opacity: 1;
  transition: all 500ms;
}

.guessBtn {
  padding-bottom: 0.3rem;
  border: none;
  background: none;
  background-image: url("../assets/imgs/guessButton.png");
  width: 10rem;
  height: 4rem;
  background-size: cover;
  color: white;
}

.guessBtn:disabled,
.guessBtn:disabled:hover {
  filter: grayscale(100%);
}

/* .guessBtn:hover {
} */

.cursorPointer {
  cursor: pointer;
}

.guessBtn:focus {
  outline: none;
}

#winnerModal {
  opacity: 0;
  transition: all 0.35s;
  height: 90%;
  width: 80%;
}

.winnerScreen {
  visibility: hidden;
  position: fixed;
  z-index: 10;
  margin: 0 2.5rem 0 2.5rem;
  top: 1rem;
  overflow: auto;
  background: radial-gradient(
    circle,
    rgba(238, 174, 202, 0.623) 0%,
    rgba(148, 187, 233, 0.623) 100%
  );
  backdrop-filter: blur(1rem);
  transition: block 4s;
  position: fixed;
  border-radius: 4rem;

  display: flex;
  justify-content: center;
  align-items: center;
}

.winnerContent {
  margin: 1% auto; /* 1% from the top and centered */
  padding: 1rem;
  width: 90%; /* Could be more or less, depending on screen size */
  height: 90%;
  color: white;
  text-align: center;
  display: flex;

  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.winnerContent > p {
  font-size: 2rem;
  margin: 0;
  padding: 0;
}

.winnerContent > h6 {
  font-size: 1.5rem;
  padding: 0rem;
  margin: 0.5rem;
}

#winner {
  display: none;
  height: 15rem;
}

#playerWinner {
  height: 20rem;
  width: 20rem;
  background-image: url("../assets/imgs/playerPlayer.png");
  background-size: cover;
  display: none;
}

.iconWrapper {
  justify-content: flex-end;
  margin: 1rem;
}

.volIcon {
  background-image: url("../assets/imgs/volIcon.png");
  background-size: cover;
  height: 2rem;
  width: 2.2rem;
  margin: 0 .5rem
}

.noVolIcon {
  background-image: url("../assets/imgs/noVolIcon.png");
  background-size: cover;
  height: 2.2rem;
  width: 2.2rem;;
  margin: 0 .5rem;
}

.hideVolIcon {
  display: none;
}

.homeIcon {
  background-image: url("../assets/imgs/homeIcon.png");
  background-size: cover;
  height: 2.2rem;
  width: 2.2rem;
  margin: 0 .5rem;
}

.volIcon:hover,
.homeIcon:hover {
  cursor: pointer;
}
/* REUSABLE CLASSES */

.flex {
  display: flex;
}

.center {
  justify-content: center;
  align-items: center;
}

/* Possibly reusable */
.fadeIn {
  opacity: 1;
  transition: opacity 3000ms;
}