body{
  margin: 0; 
  
}

#timer{
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; 
  font-size: 2rem; 
  color: red;   
}

.textOverlay{
  text-align: center; 
  padding-top: 7%;
  padding-left: 32%;  
  position: absolute;
}

.splashBg{
  /* background-image: url('/images/bg.gif'); */
  /* background-size: cover;  */
  background-color: rgb(255, 238, 6); 
  height: 100vh; 
}


.gameboardContainer{
  display: flex;
  flex-direction: column; 
  width: 100vw;
  height: 100vh; 
  /* background: black;  */
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; 
  /* color: white;  */
}

.gameboardHeader {
  color: white;
  padding-bottom: 35px;
  padding-top: 25px;
  background-color: rgb(255, 238, 6);
  /* background-image: url('/images/bg.gif');  */
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: center;
  height: 35vh; 
  width: 100vw;
}


.score{
  background-color: white;
  color: black;
  width: 200px; 
}
.boardCat {
  font-size: 2rem; 
  text-align: center;
}

.gameboard{
  display: flex;
  /* border: solid yellow; */
  height: 100vh; 
}

.boardQues {
    /* border: solid black; */
    height: 13.5vh;
    font-size: 2.5rem; 
    text-align: center;
    padding-top: 8%; 
    cursor: pointer;

}

.category1{
  color: red; 
}

.category2{
  color: blue; 
}

.category3{
  color: green; 
}

.category4{
  color: purple;
}

.boardQues:hover{
  color: grey; 
}

.disabled {
  color: white;
  background: white; 
  pointer-events: none;
}




/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }
  
  /* Modal Content/Box */
  .modal-content {
    background-color: #fefefe;
    /* margin: 15% auto; 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    height: 100%; 
    width: 100%; /* Could be more or less, depending on screen size */
  }
  
  /* The Close Button */
  .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }

  #answerChoices{
    display: flex; 
    flex-direction: column;
    height: 50%;  
  }

  .answerChoicesR1{
    display: flex; 
    height: 50%;
    width: 100%; 
  }

  .answerChoicesR2{
    display: flex; 
    height: 50%; 
  }

  .answerChoicesC1R1, .answerChoicesC2R1, .answerChoicesC1R2, .answerChoicesC2R2 {
    width: 50%; 
    font-size: 2rem; 
    text-align: center; 
    padding-top: 5%; 
  }

  .questionTextBox{
    height: auto; 
    background-color: black; 
    
  }

  #questionText{
    font-size: 4rem; 
    text-align: center;
    color: white;
    padding: 30px; 
  }


  /* sweet alert */

  .swal-modal {
    background-color: black;
    /* border: 3px solid white; */
  
  }

  .swal-title{
    color: white; 
  }

  .swal-text {
    color: white; 
    font-size: 2rem; 
  }