/********************************
*** Body
***********************************/
body {
  background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSOzme0xFwSTs9lnwpJswBXRcMR3A89GNVoxw&usqp=CAU");
}

#main {
  display: flex;
  flex-direction: column;
  align-content: center;
  background-color: black;
  border-radius: 10%;
  height: 90%;
  width: 100%;
  margin: 10px auto;
}




/********************************
*** HEADING
***********************************/

h1 {
  font-family: 'Purple Purse', cursive;
  font-size: 5em;
  text-align: center;
  color: #dd8a87be;
  margin-bottom: 0;
 
}

/********************************
*** Question
***********************************/

#question {
  width: 70%;
  padding: 30px;
  border: 3px solid #D3B9A5;
  border-radius: 20%;
  background-color: sienna;
  text-align: center;
  font-size: 1.5em;
  color: white;
  margin: 10px auto;
}

/********************************
*** Answer
***********************************/

#answer {
  width: 70%;
  margin: 10px auto;
  color: white;
  background-color: #545348;
  border-radius: 20%;
  border: 6px solid #D3B9A5;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 40px 10px 10px;
}

#answer ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  width: 100%;
  justify-content: space-evenly;
  list-style: none;
}

#answer ul li {

  width: 50%;
  height: 40px;
  background-color: #5D2523;
  padding-top: 15px;
  text-align: center;
  margin: 5px;
  font-weight: bolder;
  border-radius: 8px;
  box-shadow: 5px 5px 5px grey;
  cursor: pointer;
  transition:  .3s ease-in-out;
}
#answer ul li:hover{
  width: 400px;
}

#answerList {
  display: flex;
  align-content: flex-start;
}

/********************************
*** Scoreboard
***********************************/

#scores {
  display: flex;
  width: 70%;
  background-color:  #5D2523;
  border: 7px solid #D3B9A5;
  border-radius: 20%;

  justify-content: center;
  margin: 10px auto;
  padding: 20px;
}

#player1,
#player2 {
  width: 40%;
  background-color: #D3B9A5;
  color: #545348;
  font-size: 1.3em;
  box-shadow: 2px 2px 2px 2px grey;
  border-radius: 5%;
  margin: 5px;
  text-align: center;
}


/********************************
*** Reset button
***********************************/


#playAgain{
  display: flex;
  justify-content: center;
  text-align: center;


}
#playAgainBtn {
  display: flex;
  align-self: center;
  text-align: center;
  background-color: #182528;
  color: #D3B9A5;
  width: 150px;
  height: 30px;
  padding: 5px 0px 1px 40px;
  margin: 10px auto;
  border-radius: 5px;
  box-shadow: 2px 2px 2px lightgrey;
  cursor: pointer;
}