/* Resets all the elements and removes the default margins and padding */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* The base styles for the html and body elements */
html,
body {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  box-sizing: border-box;
  min-height: 100vh;
}

/* The main body styling */
body {
  line-height: 1;
  font-family: Arial, sans-serif;
  color: #0484ca;
  background-color: #74ccf4;
  scroll-behavior: smooth;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* This ensures that the box-sizing is inherited */
*,
*:before,
*:after {
  box-sizing: inherit;
}

/* landing section*/
/* Full-screen landing section with a background image of hands and water */
.landingSection {
  height: 100vh;
  width: 100%;
  background: url("../Images/close-up-view-nature-concept.jpg") no-repeat center
    center;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
}

/* The overlay for the landing section */
.landingSection::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(1, 90, 156, 0.5);
}

/* this is the content container within landing section */
.landingContent {
  position: relative;
  z-index: 1;
  color: white;
  max-width: 800px;
  padding: 20px;
  animation: fadeIn 1.5s ease-out;
}

/* The landing section heading styling*/
.landingContent h1 {
  font-size: 3.5rem;
  margin-bottom: 20px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  color: #ffffff;
}

body.colour-blind-mode .landingContent h1 {
  color: #ffffff;
  text-shadow: 2px 2px 4px #000000;
}

/* The landing section paragraph styling */
.landingContent p {
  font-size: 1.8rem;
  margin-bottom: 40px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

/* The start button styling */
.startButton {
  padding: 15px 50px;
  background-color: #f8d34c;
  color: #015a9c;
  border: none;
  border-radius: 5px;
  font-size: 1.3rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* The start button hover effect */
.startButton:hover {
  background-color: #ffdf60;
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

/* The fade-in animation keyframes */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* top bar */
/* A fixed top bar styling */
.topBar {
  background-color: #015a9c;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  z-index: 1000;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  padding: 0 20px;
}

/* CSS styling and alignment for the logo image in top bar */
.topBar img {
  height: 80px;
  width: 80px;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}

/* The game title text in top bar */
.gameTitleText {
  flex-grow: 1;
  text-align: center;
  font-size: 1.8rem;
  font-weight: bold;
  text-decoration: none;
  color: #ffffff;
  padding: 0 10px;
}

/* Highlight colour styling for the text */
.highlightYellow {
  color: #f8d34c;
}

/* Accessibility Controls (Colour-blind toggle) */
.accessibilityControls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  min-width: 180px;
  justify-content: flex-end;
}

.colourBlindToggleLabel {
  font-size: 0.9rem;
  color: #ffffff;
  font-weight: normal;
  white-space: nowrap;
}

/* The switch - a box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: #f8d34c;
}

body.colour-blind-mode input:checked + .slider {
  background-color: #007bff;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196f3;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 24px;
}

.slider.round:before {
  border-radius: 50%;
}

/* sidebar */
/* the side navigation menu container */
.menuBar {
  position: fixed;
  top: 100px;
  left: 0;
  z-index: 999;
  width: 150px;
}

/* Styling for the menu button */
.menuButton {
  width: 100%;
  padding: 15px;
  background-color: #04b3fb;
  color: white;
  border: none;
  font-weight: bold;
  cursor: pointer;
  text-align: center;
  transition: background 0.3s ease;
}

/* The menu button hover effect for some styling */
.menuButton:hover {
  background-color: #f8d34c;
}

/* The menu links container which are hidden by default */
.menuLinks {
  display: none;
  background-color: #04b3fb;
  width: 100%;
  position: absolute;
  top: 100%;
  left: 0;
  height: calc(100vh - 100px - 45px - 60px);
  overflow-y: auto;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  transform: translateX(-100%);
}

/* The active state for the menu links */
.menuLinks.active {
  display: block;
  transform: translateX(0);
}

/* The CSS for the menu list styling */
.menuLinks ul {
  list-style: none;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

/* Menu list items */
.menuLinks li {
  text-align: center;
  border-top: 1px solid #03a0e0;
  flex-grow: 1;
}

/* This removes the border from first menu item */
.menuLinks li:first-child {
  border-top: none;
}

/* Menu link styling */
.menuLinks a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 15px;
  width: 100%;
  height: 100%;
  transition: background 0.3s ease;
}

/* Menu link hover effect for extra styling */
.menuLinks a:hover {
  background-color: #f8d34c;
}

/* main area */
/* This is the main content container */
.mainArea {
  margin-top: calc(100px + 45px);
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: margin-left 0.3s ease;
  flex-shrink: 0;
  flex-grow: 1;
  padding-top: 20px;
}

/* The content box styling */
.contentBox {
  width: 100%;
  max-width: 1000px;
  background-color: #ffffff;
  border: 2px solid #1ca3ec;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(15, 94, 156, 0.2);
  margin-bottom: 40px;
}

/* Content box heading styling */
.contentBox h1 {
  text-align: center;
  color: #0f5e9c;
  margin-bottom: 25px;
}

/* form */
/* Information form structure */
#infoForm {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 25px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  border: none;
}

/* The form label styling */
#infoForm label {
  display: block;
  font-weight: bold;
  color: #015a9c;
  margin-bottom: 0;
}

/* This the styling for the form text input */
#infoForm input[type="text"] {
  display: block;
  width: 100%;
  padding: 10px;
  border: 1px solid #74ccf4;
  border-radius: 5px;
  font-size: 1em;
  margin-bottom: 0;
}

/* STyling for the form submit button */
#infoForm button[type="submit"] {
  padding: 12px;
  background-color: #1ca3ec;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1.1em;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

/* The form submit button hover effects */
#infoForm button[type="submit"]:hover {
  background-color: #0f5e9c;
}

/* simulation */
/* This is the game container */
#gameDiv {
  margin-top: 30px;
  padding: 20px;
  border: 1px solid #74ccf4;
  border-radius: 8px;
  background-color: #f0faff;
}

/* The progress bars container */
#progressBarsDiv {
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px solid #d0eefc;
}

/* The attribute bars layout */
.attributeBarsDiv {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-top: 15px;
  flex-wrap: wrap;
}

/* An individual progress container */
.progressContainer {
  flex: 1;
  min-width: 150px;
  margin-bottom: 10px;
}

/* Progress bar label */
.progressContainer label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #015a9c;
  font-size: 0.9em;
}

/* The background for the progress bar */
.theBar {
  background-color: #e0f7ff;
  border-radius: 5px;
  overflow: hidden;
  height: 25px;
  border: 1px solid #b3e5fc;
  position: relative;
}

/* Progress bar fill styling */
.barFill {
  background-color: #1ca3ec;
  height: 100%;
  width: 0%;
  border-radius: 5px;
  transition: width 0.5s ease-out;
  text-align: center;
  color: white;
  font-weight: bold;
  line-height: 25px;
  font-size: 0.85em;
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.1);
}

/* Colour variations for the different progress in the progress bars */
.barFill.peopleColour {
  background-color: #5cb85c;
}

.barFill.moneyColour {
  background-color: #f0ad4e;
}

.barFill.waterColour {
  background-color: #5bc0de;
}

/* The progress bar value text */
.barValue {
  position: absolute;
  right: 10px;
  top: 0;
  line-height: 25px;
  font-size: 0.8em;
  color: #015a9c;
  font-weight: bold;
}

/* our story */
/* The story container */
#storyDiv {
  margin-bottom: 20px;
  position: relative;
}

/* Story fade effects */
.storyFadeEffect {
  opacity: 1;
  transition: opacity 0.2s ease-in-out;
}

/* Fade-out state styling */
.storyFadeEffect.fadeOut {
  opacity: 0;
}

/* The story paragraph styling */
#storyParagraph {
  font-size: 1.2em;
  margin-bottom: 20px;
  line-height: 1.6;
  color: #015a9c;
}

/* A strong text style in the story */
#storyParagraph strong {
  font-weight: bold;
  color: #0f5e9c;
}

/* choices */
/* This is the container for the choices form */
#choiceForm {
  margin-top: 20px;
}

/* Styling for the individual choice item */
#choicesDiv .choiceItem {
  display: block;
  margin-bottom: 12px;
  background-color: #eafaff;
  padding: 10px 15px;
  border-radius: 5px;
  border: 1px solid #c1e8fa;
  transition: background-color 0.2s ease;
  cursor: pointer;
}

/* Choices item hover effect */
#choicesDiv .choiceItem:hover {
  background-color: #d4f3ff;
}

/* Radio buttons styling */
#choicesDiv input[type="radio"] {
  margin-right: 10px;
  vertical-align: middle;
  cursor: pointer;
  accent-color: #015a9c;
}

/* The choice label styling */
#choicesDiv label {
  cursor: pointer;
  color: #015a9c;
  font-size: 1em;
  vertical-align: middle;
}

/* The users selected choice styling */
#choicesDiv .choiceItem:has(input[type="radio"]:checked) {
  background-color: #c1e8fa;
  border-color: #74ccf4;
}
#choicesDiv .choiceItem:has(input[type="radio"]:checked) label {
  font-weight: bold;
  color: #0f5e9c;
}

/* Confirm button styling */
#confirmButton {
  display: block;
  margin: 20px auto 0 auto;
  padding: 10px 25px;
  background-color: #1ca3ec;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1.05em;
  font-weight: bold;
  transition: background-color 0.3s ease, transform 0.1s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Confirm button hover effect */
#confirmButton:hover {
  background-color: #0f5e9c;
  transform: translateY(-1px);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
}

/* Confirm button active state styling */
#confirmButton:active {
  transform: scale(0.98);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* The choice button style */
.choiceButtonStyle {
  display: block;
  width: 100%;
  margin: 10px 0;
  padding: 12px 15px;
  background-color: #3ea4f0;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1em;
  transition: background-color 0.3s ease, transform 0.1s ease;
  text-align: left;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Choice button hover effect */
.choiceButtonStyle:hover {
  background-color: #1ca3ec;
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

/* Choice buttons active state styling */
.choiceButtonStyle:active {
  transform: scale(0.98);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* nav buttons */
/* Navigation buttons container */
#navButtonsDiv {
  text-align: center;
  margin-top: 20px;
}

/* The back buttons styling */
#backButton {
  padding: 10px 20px;
  background-color: #f8d34c;
  color: #015a9c;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.3s ease, transform 0.1s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* The back buttons hover effect*/
#backButton:hover {
  background-color: #ffdf60;
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

/* The back buttons active state styling */
#backButton:active {
  transform: scale(0.98);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* dropdowns */
/* Dropdown container */
.dropdownBox {
  width: 100%;
  max-width: 1000px;
  margin: 40px auto 0 auto;
}

/* Dropdown area width */
.dropdownsArea {
  width: 100%;
}

/* The individual dropdowns styling */
.aDropdown {
  margin-bottom: 15px;
  border: 1px solid #1ca3ec;
  border-radius: 5px;
  overflow: hidden;
  background-color: white;
}

/* Dropdown button styling */
.dropdownButton {
  width: 100%;
  padding: 15px;
  text-align: left;
  background-color: #1ca3ec;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: bold;
  transition: background 0.3s;
  position: relative;
}

/* Dropdown button arrow positioning */
.dropdownButton::after {
  content: "\25BC";
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.3s ease;
}
.dropdownButton.active::after {
  transform: translateY(-50%) rotate(180deg);
}

/* The dropdown button hover effect */
.dropdownButton:hover {
  background-color: #0f5e9c;
}

/* The dropdown content which is hidden by default */
.dropdownInfo {
  display: none;
  padding: 20px;
  flex-wrap: wrap;
  background-color: white;
  border-top: 1px solid #1ca3ec;
  animation: slideDown 0.4s ease-out forwards;
  max-height: 0;
  overflow: hidden;
}

/* Active dropdowns content */
.dropdownInfo.active {
  display: flex;
  max-height: 2000px;
  overflow-y: auto;
}

/* The text part of the dropdowns */
.dropdownTextPart {
  flex: 2;
  min-width: 60%;
  padding-right: 20px;
}

/* Dropdown headings styling */
.dropdownTextPart h2 {
  color: #0f5e9c;
  margin-bottom: 10px;
  margin-top: 15px;
  font-size: 1.3em;
}

/* First heading in dropdown style */
.dropdownTextPart h2:first-of-type {
  margin-top: 0;
}

/* Dropdown paragraph styles */
.dropdownTextPart p {
  margin-bottom: 10px;
  color: #0f5e9c;
  line-height: 1.6;
}

/* Image part of dropdown styles */
.dropdownImagePart {
  flex: 1;
  min-width: 200px;
  max-width: 300px;
  display: flex;
  align-items: center;
  padding-left: 10px;
}

/* Dropdown images styles */
.dropdownImagePart img {
  width: 100%;
  height: auto;
  border-radius: 5px;
  border: 1px solid #74ccf4;
}

/* about us */
/* This is the about us section container */
.aboutUsSection {
  width: 100%;
  background-color: #e0f7ff;
  padding: 30px 20px;
  flex-shrink: 0;
}

/* About us content container */
.aboutUsContent {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

/* About us text styling */
.aboutText {
  flex: 1;
  min-width: 300px;
  color: #0f5e9c;
}

/* About us heading styling*/
.aboutText h2 {
  color: #015a9c;
  margin-bottom: 20px;
  font-size: 1.8rem;
}

/* About us paragraphs styling */
.aboutText p {
  margin-bottom: 15px;
  line-height: 1.6;
  color: #015a9c;
}

/* The last paragraph in the about us section */
.aboutText p:last-child {
  margin-bottom: 0;
}

/* this is the about us image container */
.aboutImage {
  flex: 1;
  min-width: 300px;
  max-width: 450px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* About us image styling*/
.aboutImage img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* footer*/
/* The footer container */
.footerArea {
  background-color: #015a9c;
  color: white;
  width: 100%;
  position: relative;
  height: auto;
  min-height: 60px;
  display: flex;
  align-items: center;
  z-index: 100;
  padding: 10px 20px;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.2);
  margin-top: auto;
}

/* This is the footer content container */
.footerContent {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding-left: 20px;
  gap: 15px;
  transition: padding-left 0.3s ease;
  text-align: left;
}

/*Container for the icon and text*/
.footerItem {
  display: flex;
  align-items: center;
  margin: 5px 10px;
}

/* icon image */
.footerIcon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  object-fit: contain;
}

.footerItem p {
  margin: 0;
  font-size: 0.9rem;
}

.footerItem a.backTopLink {
  margin: 0;
}

.backTopLink {
  color: white;
  text-decoration: none;
  font-weight: bold;
  font-size: 0.9rem;
  transition: color 0.3s;
}

/* Back to top link hover effect*/
.backTopLink:hover {
  color: #f8d34c;
}

/* Donate button styling */
.donateButton {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 24px;
  background-color: #0077b6;
  color: white;
  font-weight: bold;
  text-decoration: none;
  border-radius: 8px;
  transition: background-color 0.3s ease, transform 0.2s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  border: none;
}

/* Donate button hover effect */
.donateButton:hover {
  background-color: #023e8a;
  transform: scale(1.05);
}

/* popup */
/* This is the popup background overlay */
.myPopupBackground {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(1, 90, 156, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  visibility: hidden;
}

/* The visible popup background */
.myPopupBackground.visible {
  opacity: 1;
  visibility: visible;
}

/* The popup box */
.myPopupBox {
  background-color: #ffffff;
  padding: 30px 40px;
  border-radius: 8px;
  border: 2px solid #1ca3ec;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  text-align: center;
  max-width: 450px;
  width: 90%;
  color: #015a9c;
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

/* The visible popup box */
.myPopupBackground.visible .myPopupBox {
  transform: scale(1);
}

/* Popup alert text styling */
#myAlertText {
  font-size: 1.1em;
  line-height: 1.5;
  margin-bottom: 25px;
}

/* the popup buttons container */
.popupButtons {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 0;
}

/* The popup button styling */
.popupButtons button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.2s ease, transform 0.1s ease;
  min-width: 80px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Popup button hover effect */
.popupButtons button:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
}

/* Popup button active state style */
.popupButtons button:active {
  transform: scale(0.98);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* OK button in the popups style */
#myAlertOkButton {
  background-color: #1ca3ec;
  color: white;
}

/* The OK button hover effect */
#myAlertOkButton:hover {
  background-color: #0f5e9c;
}

/* The cancel button in the popup style */
#myAlertCancelButton {
  background-color: #f8d34c;
  color: #015a9c;
}

/* The cancel button hover effect */
#myAlertCancelButton:hover {
  background-color: #ffdf60;
}

/* restart*/
/* The restart button styling */
#restartButton {
  padding: 10px 25px;
  background-color: #1ca3ec;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1.05em;
  font-weight: bold;
  transition: background-color 0.3s ease, transform 0.1s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-top: 10px;
  display: inline-block;
}

/* Restart button hover effect */
#restartButton:hover {
  background-color: #0f5e9c;
  transform: translateY(-1px);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
}

/* The restart buttons active state style */
#restartButton:active {
  transform: scale(0.98);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* contact form section */
/* Styling main container for contact form part of the page */
.contactFormMainSection {
  width: 100%;
  padding: 40px 20px;
  background-color: #e0f7ff;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Styling for the contact form itself*/
#mainContactForm {
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
}

/* Label styling for the contact form */
#mainContactForm label {
  display: block;
  font-weight: bold;
  color: #015a9c;
  margin-bottom: 0;
}

/* Text input and textarea styling for the contact form */
#mainContactForm input[type="text"],
#mainContactForm input[type="email"],
#mainContactForm textarea {
  display: block;
  width: 100%;
  padding: 10px;
  border: 1px solid #74ccf4;
  border-radius: 5px;
  font-size: 1em;
  font-family: Arial, sans-serif;
  margin-bottom: 0;
  box-sizing: border-box;
}

#mainContactForm textarea {
  resize: vertical;
  min-height: 100px;
}

/* Submit button styling for the contact form */
#mainContactForm button[type="submit"] {
  padding: 12px;
  background-color: #1ca3ec;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1.1em;
  font-weight: bold;
  transition: background-color 0.3s ease;
  margin-top: 10px;
}

/* Submit button hover effect for the contact form */
#mainContactForm button[type="submit"]:hover {
  background-color: #0f5e9c;
}

.contactFormMainSection .contentBox h1 {
  text-align: center;
  color: #0f5e9c;
  margin-bottom: 25px;
}

/*  COLOUR-BLIND MODE STYLES  */
body.colour-blind-mode {
  background-color: #d1e7f7;
  color: #003366;
}

body.colour-blind-mode .highlightYellow {
  color: #ffcc00;
  font-weight: bold;
  text-decoration: underline;
}

body.colour-blind-mode .landingContent h1 {
  color: #ffffff;
}
body.colour-blind-mode .landingContent p {
  color: #f0f0f0;
}

body.colour-blind-mode .startButton {
  background-color: #007bff;
  color: #ffffff;
  border: 2px solid #0056b3;
}
body.colour-blind-mode .startButton:hover {
  background-color: #0056b3;
}

body.colour-blind-mode .topBar {
  background-color: #003366;
}
body.colour-blind-mode .topBar .gameTitleText {
  color: #ffffff;
}
body.colour-blind-mode .topBar .highlightYellow {
  color: #ffdd44;
  text-decoration: underline;
}

body.colour-blind-mode .menuButton {
  background-color: #007bff;
  color: #ffffff;
}
body.colour-blind-mode .menuButton:hover {
  background-color: #ffc107;
  color: #000000;
}

body.colour-blind-mode .menuLinks {
  background-color: #0069d9;
}
body.colour-blind-mode .menuLinks a {
  color: #ffffff;
}
body.colour-blind-mode .menuLinks a:hover {
  background-color: #ffc107;
  color: #000000;
}

body.colour-blind-mode .contentBox {
  background-color: #f8f9fa;
  border-color: #007bff;
}
body.colour-blind-mode .contentBox h1 {
  color: #003366;
}

body.colour-blind-mode #infoForm label {
  color: #003366;
}
body.colour-blind-mode #infoForm input[type="text"] {
  border-color: #007bff;
  background-color: #ffffff;
  color: #000000;
}
body.colour-blind-mode #infoForm button[type="submit"] {
  background-color: #007bff;
  color: white;
}
body.colour-blind-mode #infoForm button[type="submit"]:hover {
  background-color: #0056b3;
}

body.colour-blind-mode #gameDiv {
  background-color: #e9ecef;
  border-color: #007bff;
}

body.colour-blind-mode .progressContainer label {
  color: #003366;
}
body.colour-blind-mode .theBar {
  background-color: #ced4da;
  border-color: #adb5bd;
}
body.colour-blind-mode .barFill {
  /* General progress bar for colour-blind mode */
  background-color: #007bff;
  color: white;
}
body.colour-blind-mode .barFill.peopleColour {
  background-color: #28a745;
  color: white;
}
body.colour-blind-mode .barFill.moneyColour {
  background-color: #ffc107;
  color: #000000;
}
body.colour-blind-mode .barFill.waterColour {
  background-color: #17a2b8;
  color: white;
}
body.colour-blind-mode .barValue {
  color: #000000;
}

body.colour-blind-mode #storyParagraph {
  color: #003366;
}
body.colour-blind-mode #storyParagraph strong {
  color: #002244;
  text-decoration: underline;
}

body.colour-blind-mode #choicesDiv .choiceItem {
  background-color: #e9ecef;
  border-color: #007bff;
}
body.colour-blind-mode #choicesDiv .choiceItem:hover {
  background-color: #d4eaff;
}
body.colour-blind-mode #choicesDiv label {
  color: #003366;
}
body.colour-blind-mode
  #choicesDiv
  .choiceItem:has(input[type="radio"]:checked) {
  background-color: #b8daff;
  border-color: #0056b3;
}
body.colour-blind-mode
  #choicesDiv
  .choiceItem:has(input[type="radio"]:checked)
  label {
  color: #002244;
  font-weight: bold;
}

body.colour-blind-mode #confirmButton {
  background-color: #28a745;
  color: white;
}
body.colour-blind-mode #confirmButton:hover {
  background-color: #1e7e34;
}

body.colour-blind-mode .choiceButtonStyle {
  background-color: #007bff;
  color: white;
}
body.colour-blind-mode .choiceButtonStyle:hover {
  background-color: #0056b3;
}

body.colour-blind-mode #backButton {
  background-color: #ffc107;
  color: #000000;
  border: 1px solid #e0ac00;
}
body.colour-blind-mode #backButton:hover {
  background-color: #e0ac00;
}

body.colour-blind-mode .aDropdown {
  border-color: #007bff;
  background-color: #f8f9fa;
}
body.colour-blind-mode .dropdownButton {
  background-color: #007bff;
  color: white;
}
body.colour-blind-mode .dropdownButton:hover {
  background-color: #0056b3;
}
body.colour-blind-mode .dropdownInfo {
  background-color: #f8f9fa;
  border-top-color: #007bff;
}
body.colour-blind-mode .dropdownTextPart h2 {
  color: #003366;
}
body.colour-blind-mode .dropdownTextPart p {
  color: #212529;
}

body.colour-blind-mode .aboutUsSection {
  background-color: #e0f0ff;
}
body.colour-blind-mode .aboutText h2 {
  color: #003366;
}
body.colour-blind-mode .aboutText p {
  color: #002244;
}

body.colour-blind-mode .footerArea {
  background-color: #003366;
  color: #e0f0ff;
}
body.colour-blind-mode .backTopLink {
  color: #ffdd44;
}
body.colour-blind-mode .backTopLink:hover {
  color: #ffffff;
}

body.colour-blind-mode .donateButton {
  background-color: #28a745;
  color: white;
}
body.colour-blind-mode .donateButton:hover {
  background-color: #1e7e34;
}

body.colour-blind-mode .myPopupBackground {
  background-color: rgba(0, 20, 40, 0.7);
}
body.colour-blind-mode .myPopupBox {
  background-color: #f8f9fa;
  border-color: #007bff;
  color: #003366;
}
body.colour-blind-mode #myAlertOkButton {
  background-color: #007bff;
  color: white;
}
body.colour-blind-mode #myAlertOkButton:hover {
  background-color: #0056b3;
}
body.colour-blind-mode #myAlertCancelButton {
  background-color: #ffc107;
  color: #000000;
}
body.colour-blind-mode #myAlertCancelButton:hover {
  background-color: #e0ac00;
}

body.colour-blind-mode #restartButton {
  background-color: #007bff;
  color: white;
}
body.colour-blind-mode #restartButton:hover {
  background-color: #0056b3;
}

body.colour-blind-mode .contactFormMainSection {
  background-color: #e0f0ff;
}
body.colour-blind-mode #mainContactForm label {
  color: #003366;
}
body.colour-blind-mode #mainContactForm input[type="text"],
body.colour-blind-mode #mainContactForm input[type="email"],
body.colour-blind-mode #mainContactForm textarea {
  border-color: #007bff;
  background-color: #ffffff;
  color: #000000;
}
body.colour-blind-mode #mainContactForm button[type="submit"] {
  background-color: #007bff;
  color: white;
}
body.colour-blind-mode #mainContactForm button[type="submit"]:hover {
  background-color: #0056b3;
}

/* TABLET RESPONSIVE */
@media (max-width: 992px) {
  .gameTitleText {
    padding: 0 5px;
  }
  .accessibilityControls {
    min-width: 160px;
  }
  .footerContent {
    justify-content: center;
  }

  .menuBar {
    width: 100%;
  }

  .menuButton {
    width: 100%;
    position: static !important;
  }

  .menuLinks {
    width: 100%;
    top: 100%;
    height: auto;
    max-height: calc(100vh - 100px - 45px - 60px);
    overflow-y: auto;
  }

  .menuLinks ul {
    width: 100%;
    height: auto;
    justify-content: flex-start;
  }

  .menuLinks li {
    width: 100%;
    flex-grow: 0;
  }

  .menuLinks a {
    width: 100%;
    padding: 15px 10px;
    font-size: 0.9rem;
  }

  .mainArea {
    margin-left: 20px;
    margin-right: 20px;
    margin-top: calc(100px + 45px + 20px);
  }
}

/* MOBILE RESPONSIVE */
@media (max-width: 768px) {
  .topBar {
    padding: 10px;
    height: auto;
    flex-direction: column;
  }
  .topBar img {
    height: 50px;
    width: 50px;
    margin: 5px auto;
  }
  .gameTitleText {
    font-size: 1.2rem;
    padding-right: 0;
    margin-left: 0;
    order: 2;
    width: 100%;
    text-align: center;
    margin-bottom: 8px;
  }
  .accessibilityControls {
    order: 3;
    margin-bottom: 5px;
    width: 100%;
    justify-content: center;
    gap: 5px;
    flex-direction: column;
    align-items: center;
  }
  .colourBlindToggleLabel {
    font-size: 0.85rem;
    text-align: center;
    margin-bottom: 3px;
  }
  .switch {
    width: 44px;
    height: 20px;
  }
  .slider:before {
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
  }
  input:checked + .slider:before {
    transform: translateX(24px);
  }

  .landingContent h1 {
    font-size: 2rem;
  }

  .landingContent p {
    font-size: 1.1rem;
  }

  /*  Mobile Menu Positioning  */
  .menuBar {
    width: 100%;
    top: 150px;
    height: 45px;
    left: 0;
    position: fixed;
    z-index: 999;
  }
  .menuButton {
    position: static !important;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .menuLinks {
    width: 100%;
    top: 100%;
    left: 0;
    transform: translateX(-100%);
    max-height: calc(100vh - 150px - 45px - 60px);
    position: absolute;
  }
  .menuLinks.active {
    transform: translateX(0);
  }

  .mainArea {
    margin-left: 10px;
    margin-right: 10px;
    padding: 10px;
    margin-top: calc(150px + 45px + 10px);
  }

  .contentBox {
    padding: 15px;
  }

  .contentBox h1 {
    font-size: 1.5rem;
    margin-bottom: 20px;
  }

  #infoForm {
    max-width: 100%;
  }
  .attributeBarsDiv {
    flex-direction: column;
    gap: 10px;
  }

  .footerContent {
    padding-left: 10px;
    padding-right: 10px;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footerItem {
    margin: 8px 0;
    justify-content: center;
  }

  .footerArea {
    height: auto;
    padding: 10px 15px;
  }

  .aboutUsContent {
    flex-direction: column;
    padding: 20px 15px;
    gap: 20px;
  }

  .aboutText,
  .aboutImage {
    min-width: 100%;
  }

  .dropdownInfo {
    flex-direction: column;
  }

  .dropdownImagePart {
    padding-left: 0;
    padding-top: 15px;
    max-width: 100%;
  }

  .dropdownTextPart {
    padding-right: 0;
  }
}

/* The dropdown animation keyframes*/
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
    max-height: 0;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    max-height: 2000px;
  }
}