/* General Styles */
body {
  font-family: Arial, sans-serif;
  background-image: url('images/image1.jpg'); /* Replace 'image1.jpg' with the path to your background image */
  background-repeat: no-repeat;
  background-size: cover; /* Scales the background image down by 50% */
  background-attachment: fixed; /* Make the background image fixed relative to the viewport */
  background-position: center; /* Center the background image */
  color: #fff;
  text-align: center;
  padding: 0; /* Remove default padding */
  margin: 0; /* Remove default margin */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh; /* Full viewport height */
}


/* Title */
h1.title {
  color: #007BFF;
  margin-bottom: 20px;
  font-size: 24px; /* Adjust this value to change the font size */
}

/* Heading 2 */
h2 {
  color: #4a4a4a;
}

/* Intro Box Styles */
.introBox {
  background-color: #ffffff; /* Solid white background */
  border-radius: 10px;
  padding: 20px;
  max-width: 600px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Bevel effect */
  border: 1px solid #ccc;
  color: #000; /* Black text color */
}

.introBox p {
  font-size: 18px;
  margin-bottom: 30px;
}

.introBox button {
  font-size: 20px;
  padding: 15px 30px;
  background-color: #007BFF;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Bevel effect */
}

.introBox button:hover {
  background-color: #0056b3;
}

/* Quiz Styles */
#quiz {
  background-color: #ffffff; /* Solid white background */
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Bevel effect */
  padding: 20px;
  max-width: 500px;
  margin-top: 20px;
  text-align: center;
  border: 1px solid #ccc;
  color: #000; /* Black text color */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Quiz Question */
h2#questionText {
  margin-bottom: 20px;
}

/* Answer Options */
label {
  display: block;
  margin-bottom: 15px;
  cursor: pointer;
  background-color: #f8f9fa;
  border-radius: 5px;
  padding: 10px;
  border: 1px solid #ddd;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Bevel effect */
}

input[type="radio"] {
  margin-right: 10px;
}

/* Buttons */
button {
  font-size: 20px;
  padding: 15px 30px;
  background-color: #007BFF;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Bevel effect */
}

button:hover {
  background-color: #0056b3;
}

/* Results Styles */
#results {
  background-color: #ffffff; /* Solid white background */
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Bevel effect */
  padding: 20px;
  max-width: 500px;
  margin-top: 20px;
  text-align: center;
  border: 1px solid #ccc;
  color: #000; /* Black text color */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#resultClan {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

#resultImage {
  max-width: 500px; /* Adjust as needed */
  margin-bottom: 20px;
}

#resultDescription {
  font-size: 16px;
  margin-bottom: 20px;
  line-height: 1.5;
}

#resultPercentages {
  font-size: 18px;
  margin-bottom: 20px;
}

#retakeQuiz {
  background-color: #007BFF;
  color: #fff;
}

#retakeQuiz:hover {
  background-color: #0056b3;
}

/* Centering Sections */
section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#startQuiz,
#quiz,
#tieBreak,
#tieBreakResults,
#results {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Tie Break Styles */
#tieBreak {
  display: none;
}

#tieBreakQuestion {
  background-color: #ffffff; /* Solid white background */
  border-radius: 10px;
  padding: 20px;
  max-width: 500px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Bevel effect */
  border: 1px solid #ccc;
  color: #000; /* Black text color */
}

/* Tie Break Button */
#nextTieQuestion {
  font-size: 20px;
  padding: 15px 30px;
  background-color: #007BFF;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Bevel effect */
  margin-top: 10px;
}

#nextTieQuestion:hover {
  background-color: #0056b3;
}

#retakeQuizFinal {
  font-size: 20px;
  padding: 15px 30px;
  background-color: #007BFF;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Bevel effect */
  margin-top: 10px;
}

#retakeQuizFinal:hover {
  background-color: #0056b3;
}

/* Centering for Tie Break Results */
#tieBreakResults {
  background-color: #ffffff; /* Solid white background */
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Bevel effect */
  padding: 20px;
  max-width: 500px;
  text-align: center;
  border: 1px solid #ccc;
  color: #000; /* Black text color */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Tie Break Results Button */
#retakeQuizFinal {
  background-color: #007BFF;
  color: #fff;
}

#retakeQuizFinal:hover {
  background-color: #0056b3;
}/* Buy Me Coffee Button Styles */
  .buy-me-coffee,
  .copy-text, 
  .back-to-main-menu {
    position: fixed;
    background-color: transparent;
    color: #fff;
    padding: 7px 15px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.7em;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s;
  }

  .buy-me-coffee:hover,
  .copy-text:hover, 
  .back-to-main-menu:hover {
    background-color: #e0a82d;
    text-decoration: underline;
  }

  .buy-me-coffee {
    bottom: 40px;
    right: 20px;
  }

  .copy-text {
    bottom: 20px;
    right: 20px;
  }

  .back-to-main-menu {
    bottom: 40px;
    left: 20px;
}