/* body {
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
  color: #333;
}

header {
  background-color: #2b427a
  color: #fff;
  padding: 20px;
  text-align: center;
} */


:root { 
  --background-color: #ffffff; /* Background color for the entire website, including individual sections */
  --default-color: #212529; /* Default color used for the majority of the text content across the entire website */
  --heading-color:  #021c79;                      /* 2d465e; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #fea500;            /* #559bcc; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
  --primary-color: #4a90e2;
  --secondary-color: #f0f4f8;
  --text-color: #333;
}


header h1 {
  margin: 0;
}

main {
  padding: 20px;
  margin: 50px auto;
  max-width: 600px;
  background-color:  rgba(28, 2, 146, 0);
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}


.question {
  margin-bottom: 20px;
  padding: 20px;
  background-color: var(--secondary-color);
  border-radius: 10px;
}

.question-text {
  font-weight: bold;
  margin-bottom: 15px;
}

.answers {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.answer-btn {
  background-color: white;
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.answer-btn:hover {
  background-color: var(--primary-color);
  color: white;
}

.answer-btn.selected {
  background-color: var(--primary-color);
  color: white;
}


.navigation {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.nav-btn {
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.nav-btn:hover {
  background-color: #357abd;
}

.results-container {
  margin-top: 20px;
  text-align: center;
  font-weight: bold;
}












footer {
  text-align: center;
  padding: 10px;
  background-color: #343a40;
  color: #fff;
}
.white{

  color: #ffffff;
}
#quiz{


}