@import url('https://fonts.googleapis.com/css2?family=Itim&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Overpass:ital,wght@0,100..900;1,100..900&family=Poppins&display=swap');
button:hover {
  background-color: #4caf50;
  color: white;
  cursor: pointer;
}
#restartButton{
  display: none;
}
#saveData{
  color: white;
  background: linear-gradient(135deg, #62ff77, #317100, #9fd995);
}
#saveData:hover{
  color: rgb(0, 0, 0);
  background: linear-gradient(135deg, #7be394, #5ec857, #5bce7a);
}
#modalAskingName{
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 30px;
  width: 100%;
  height: 430px;
  z-index: 1;
}
.main-container{
  display: flex;
  justify-content: center;
  align-items: center;
position: relative;
width: 100%;
height: 100vh;
}

.modal {
  display: none;
  position: fixed;
  z-index: 2;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  width: 300px;
  margin: 15% auto;
  text-align: center;
}

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

body {
  font-family: "Montserrat", serif;
    background-image: url(pics/questionMark.jpg);
background-position: 560px;
/* background: linear-gradient(135deg, #00ffc4, #2a4675, #a7c2ef); */
color: #333;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
}

h1, h2 {
text-align: center;
margin-bottom: 20px;
}

/* Buttons */
#nextInputButton{
color: black;
background-color:#45a049 ;
}
#nextInputButton:hover{
color: rgb(255, 255, 255);
background-color:#ff0000 ;
}

/* score board buttons  */
#scoreBoardButton{
  display: none;
  margin-top: 10px;
  background-color: rgb(180, 180, 177)  ;
  color: black;
}

#scoreBoardButton:hover{
  background-color: rgb(159, 159, 157)  ;
}

/* check button */
#checkButton{
  display: none;
  margin-top: 10px;
}
.btn {
padding: 10px 20px;
border: none;
border-radius: 5px;
font-size: 16px;
font-weight: bold;
transition: all 0.3s ease;
}

.btn-primary {
background: #4caf50;
color: white;
}

.btn-primary:hover {
background: #45a049;
}

.btn-secondary {
background: #f44336;
color: white;
}

.btn-secondary:hover {
background: #d32f2f;
}

/* Main Container */
.main-container {
width: 90%;
max-width: 600px;
margin: auto;
}

#quiz-container {
width: 700px;
display: flex;
flex-direction: column;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
text-align: center;
}

#main {
margin-top: 20px;
}

.overFlowScroll{
  overflow: scroll;
}

/* Timer */
#timer {
font-size: 18px;
font-weight: bold;
color: #ff5722;
}

/* Form Modal */
.form-modal {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
display: flex;
flex-direction: column;
gap: 10px;
}

input {
padding: 8px;
border: 1px solid #ccc;
border-radius: 5px;
width: 100%;
}

/* Pop-Up Modal */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
justify-content: center;
align-items: center;
z-index: 10;
}

.modal-content {
background: white;
padding: 20px;
border-radius: 10px;
text-align: center;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
animation: slideDown 0.4s ease;
}

@keyframes slideDown {
from {
  transform: translateY(-50px);
  opacity: 0;
}
to {
  transform: translateY(0);
  opacity: 1;
}
}

/* Styling labels for better appearance */
.labels_And_Options{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.labels_And_Options label{
  width: 115%;
}
.labels_And_Options label:hover{
  background: linear-gradient(90deg, #5a5a5a,rgb(227, 225, 225), #000000);
}
.labels_And_Options input{
  width: 5%;
  height: 20px;
}
form label {
display: block;
margin: 10px 0;
font-size: 16px;
font-weight: 500;
color: #333;
padding: 5px;
background-color: #f2f2f2;
border-radius: 5px;
cursor: pointer;
transition: all 0.2s ease-in-out;
}

form label:hover {
background-color: #e0e0e0;
}

/* Completion Bar */
#completionBarContainer {
margin-top: 20px;
width: 100%;
height: 20px;
background-color: #e0e0e0;
border-radius: 10px;
overflow: hidden;
}

#completionBar {
height: 100%;
width: 0;
background: linear-gradient(90deg, #4caf50,rgb(68, 190, 255), #1e90ff);
transition: width 0.5s ease-in-out;
}

/* user data css */
.user-Data-Css{
  font-size: 17px;
  font-weight: bold;
}