*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}

body{
    background-color: rgb(244, 244, 244);
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    display:flex;
    justify-content: center;
    align-items: center;
    height:100vh;
    margin:0;
}

.container {
    width: 90%;
    max-width: 500px;
    min-height: 60vh;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 20px;
    border: solid 5px rgb(65, 122, 255);  
    padding: 20px; 
    box-sizing: border-box;
    overflow: auto;
}

.game-info{
    margin:20px;
    padding:10px;    
}

.controller {
display:flex;
align-items: center;
justify-content: center;
margin-top:50px;
}

.play{
border:none;
font-size: 30px;
border-radius: 20px;
padding:20px 30px;
 box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
 background-color: cornflowerblue;
}

.play:hover{
    cursor: pointer;
    background-color: rgb(0, 64, 255);
    
}
.replay-btn{
border:none;
font-size: 30px;
border-radius: 20px;
padding:20px 30px;
 display:none;
 box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
 background-color: cornflowerblue;
}

.replay-btn:hover{
    cursor: pointer;
    background-color: rgb(0, 64, 255);
  
}

.quit-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.quitbtn {
  cursor: pointer;
  background-color: rgb(79, 220, 255);
  color: white;
  border: none;
  font-size: 20px;
  border-radius: 20px;
  padding: 20px 30px;
  display: none; 
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.quitbtn:hover{
    cursor: pointer;
    background-color: rgb(0, 255, 234);
    color:white;  
}

#answer-buttons {
    display: flex;
    flex-direction: column; 
    align-items: center; 
    gap: 20px; 
  margin-top: 20px;
}

.answer-btn {
    padding: 15px 30px;
    font-size: 18px;
    border: none;
    border-radius: 10px;
    background-color: white;
    cursor: pointer;
    width: 70%; 
    transition: background-color 0.3s;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.answer-btn:hover {
    background-color: rgb(127, 202, 255);
}

#question-text{
    text-align: center;
}

#questions {
  display: flex;
  flex-direction: column;
  height: 100%;
}