@import 'normalize.css';

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-family: 'Open Sans', sans-serif;
}

.wrapper {
    padding: 35px 40px;
    border-radius: 24px;
    background: #ffffff;
    border: 1px solid #686868;
    max-width: 80%;
  }

.gameTitle  h1 {
    text-align: center;
    /* Remove width and height for responsiveness */
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 500;
    font-size: 52px;
    letter-spacing: -0.01em;
    color: #1C1A1A;
    /* The following styles can be removed if not needed */
    flex: none;
    order: 0;
    flex-grow: 0;
}

h1 span {
    color: #E98427;
}

.easy-container {
    cursor: pointer;
    font-family: Noto Sans;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 0em;
	margin: 20px 20px 0 0;
	border: 4px solid #A5D1A4;
	border-radius: 24px;
    background-color: #E5F3E5;
    width: 608px;
    height: 156px;
}

.upcoming-container {
    font-family: Noto Sans;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 0em;
	margin: 20px 20px 0 0;	
	border-radius: 24px;
    background-color: #F0EEEE;   
	border: 4px solid #585858;
    width: 608px;
    height: 156px;
}

.post-thumb {
	float: right;
    margin: 30px 20px 30px 20px; 
}
.post-thumb img {
    display: block;

}

.post-content {
	margin: 50px 20px 50px 20px;
}

.easy-container:hover {
    border: 4px solid #7cd17b;
    background-color: #cff1cf;
}

.floatRight{
    float: right;
}

.topBtn {
/* Restart Button */
width: 160px;
height: 50px;
padding: 9px 0px;
color: white;
margin-right: 10px;
/* TDPM/Orange/600 */
background: #DA6A1C;
border-radius: 12px;
font-size: 20px;
}

.topBtn:hover {
    background-color: #EA4C0C;
    color: white;
}

.crossBtn {
padding: 10px 0px;
width: 50px;
height: 50px;
background: #C2370C;
color: white;
border-radius: 100px;
font-size: 20px;

}

.crossBtn:hover {
    background: #EA4C0C;
    color: white;
}
.questionNumLabel{
    text-decoration: underline;
    text-underline-offset: 10px;
}

.container h3, .menuLabel   {
    font-size: 22px;
    letter-spacing: -0.01em;
    text-align: left;

}
.menuLabel, .menuOutput {
    display: inline-block;
}

.menuLabel, .menuOutput {
    vertical-align: middle;
}

.menuLabel{
    margin-right:50px;
    width: 100px;
}
.menuLabel2{
    font-size: 22px;
    letter-spacing: -0.01em;
    text-align: left;
    margin-right:25px;
}



.menuOutput {
    font-size: 32px;
    font-weight: 700;
}


.answerBtn {
    margin: 0 5px 0px 0;
    width: 96px;
    height: 66px;

    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #DDDADA;
    font-weight: 500;
    font-size: 20px;
    color: #1C1A1A;
    
    

}

.volume-slider input {
    accent-color: #E98427;
 
}


.question {
    display: none;
}
.question.active {
    display: block;
}
.menuOutput {
    text-align: center;
}

.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 */
	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: 6% auto; /* 15% from the top and centered */
	padding: 40px;
	border: 1px solid #888;
	width: 40%; /* Could be more or less, depending on screen size */
}
.modal-content img {
    min-width: 100px;
    max-width: 100%;
    height: auto;
}

.modal-content button {
    min-width: 100px;
    max-width: 100%;
    height: auto;
}

.modal-content h3 {
    text-align: center;
	font-size: 24px;
    font-weight: 700;
    min-width: 100px;
    max-width: 100%;
    height: auto;

}



.modal-content button {
	margin-right: 10px;
	margin-left: 10px;
	width: 250px;
	height: 45px;
	border-radius: 10px;
}

.close {
	position: absolute;
	right: 0;
	top: 0;
	padding: 12px 16px 12px 16px;
}

.close:hover,.close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
}

#exitNo:hover, #endContBtn:hover  {
    background-color: #DDDADA;

} 

#exitYes:hover{
    background-color: #EA4C0C;

}



#endRetryBtn:hover,#finishBtn:hover {
    background-color:#8B24CC;
    color: white;
}


.answerBtnGroup button:hover {
    background-color: #F6E892;
}

.answerBtn:last-child {
    margin-right: 0;  
}