@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&family=Sofia+Sans:ital,wght@0,1..1000;1,1..1000&display=swap');

html, body {
  height: 100%;

}

body > footer {
  position: sticky;
  top: 100vh;

}
/* background color */
body {
  background-color: rgb(151, 182, 218);
  font-family: "Quicksand", sans-serif;
  overflow-x: hidden;
}


#logo {
  max-height: 12rem;
}

/* letter box styles */
.letter-box {
  display: inline-block;
  border: #333 solid 2px;
  height: 100px;
  width: 50px;
  border-radius: 15px;
  margin: .2rem;
  position: relative;
  background: white;
  font-size: xx-large;
}

span.draggableLetters {
  height:100%;
  width:100%;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  background-color: inherit;
  border-radius: inherit;
  color: inherit;
}

/* style when span is being dragged */
.dragging {
  border: #333 1px solid;
  background-color: rgba(175,175,175, 0.5)!important;
}

/* Style when button is enabled */
.enabled {
  background-color: #007f3b;
  color: white;
}

.enabled:hover {
  border: 1px #007f3b solid; 
  background-color: rgba(0,127,59, 0.2);
  color: #007f3b;
}

/* Style when user's answer is right(.correct) or wrong(.incorrect) */
.correct {
  border: #007f3b 2px solid;
}

.incorrect {
  border: red 2px solid;
}

/* Style for hearts */
#lives {
  color: #f54563;;
}

/* Pop-up set display to none initially */
#game-over, #hint-area, #won-game, #instructions, #contact-modal {
  display: none;
}

/* Style for word guessed correctly in game over modal */
#words-guessed-correctly {
  list-style: none;
  text-align: center;
}

/*  Button styles */
button, #submit-button  {
  background-color: #2a6ebb;
  color: white;
  border-radius: 10px;
  padding-right: 15px;
  padding-left: 15px;
  margin-bottom: 0.5rem;
}

#submit-button:hover, button:not(.disabled,.enabled):hover {
  background-color: rgba(42,110,187, 0.3);
  border:  #2a6ebb 2px solid;
  color: #333;
}

.disabled {
  background-color: #333;
  color: white;


}

.noevents {
  pointer-events: none;
}

/* Hint area styles */
#hint-area {
  background-color: white;
  border-radius: 15px;
  font-size: small;
}

#hint-icon {
  color: orange;
}

/* Modal styles */
.pop-up {
  border: 2px solid #333;
  border-radius: 15px;
  background: white;
  margin: 0;  
}

/*  Media Queries for responsiveness of the letter boxes */
@media only screen and (max-width: 800px) {
  .letter-box {
    height: 90px;
    width: 40px;
    margin: .15rem;
    border-radius: 10px;
    font: large;
  }
}

@media only screen and (max-width: 500px) {
  .letter-box {
    height: 70px;
    width: 30px;
    margin: .1rem;
    border-radius: 5px;
    font: large;
  }
}

@media only screen and (max-width: 400px) {
  .letter-box {
    height: 70px;
    width: 30px;
    margin: 0;
    border-radius: 1px;
    font: large;
  }
}

@media only screen and (max-width: 330px) {
  .letter-box {
    height: 70px;
    width: 27px;
    margin: 0;
    border-radius: 1px;
    font: large;
  }
}