body {
            margin: 20px; /* Remove default margin */
            padding: 0; /* Remove default padding */
			font-family: 'Arial', sans-serif;
			font-size: 16px;
			margin-top: 150px; /* Adjust based on banner height */

        }
		
/* Or target the main content element: */
main {
  margin-top: 50px; /* Adjust based on banner height */
}
		
		button {
			font-size: 32px; /* Adjust the font size as needed */
}


.banner {
  position: fixed; /* Fix the banner to the top */
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background-color: #233a5b;
  display: flex; /* Allow alignment of logo */
  justify-content: flex-end; /* Align logo to the right */
  align-items: center; /* Align logo vertically in center */
}

.banner img {
  height: 100%; /* Scale logo to same height as banner */
  width: auto; /* Maintain aspect ratio based on height */
}


.banner-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Center the text */
  color: white; /* Ensure text color is white */
  background-color: rgba(0, 0, 0, 0); /* No transparency */
  padding: 20px; /* Adjust padding */
  font-size: 36px; /* Adjust font size */
  text-align: center; /* Align text horizontally */
}



.logo {
  position: absolute; /* Positions logo on top of the banner */
  top: 0;
  right: 0;
  height: 100%; /* Scale logo to same height as banner */
  width: auto; /* Maintain aspect ratio based on height */
}

.logo img {
  width: 100%;
  height: 100%;
}
   		.home {
		
		font-size: 16px
		}
		
		.quiz {
			font-size: 32px
		}
		
		#Answer {
			font-size: 32px; /* Adjust the font size as needed */
}
		

#myDropdownButton {
  background-color: #233a5b;
  color: white;
  border: none;

  /* Ensure button element fits within dropdown height: */
  /*max-height: 100%;*/
  /*line-height: 16px;*/ /* Match font size for vertical centering */

  /* Additional styles for hover effects, borders, etc. (optional) */
  &:hover {
    background-color: #1F324D; /* Darker shade on hover (optional) */
    cursor: pointer;
  }
}

#homebutton {
  background-color: #233a5b;
  color: white;
  border: none;
  top: 50px;
  left: 0px;
  position: fixed; /* Fix the dropdown to the top */
  z-index: 100; /* Ensure it appears on top of the banner */
  /* Ensure button element fits within dropdown height: */
  height: 50px; /* Maintain same height as banner */
  /*max-height: 100%;*/
  /*line-height: 16px;*/ /* Match font size for vertical centering */

  /* Additional styles for hover effects, borders, etc. (optional) */
  &:hover {
    background-color: #1F324D; /* Darker shade on hover (optional) */
    cursor: pointer;
  }
}

.dropdown {
  position: fixed; /* Fix the dropdown to the top */
  top: 56px;
  left: 150px;
  border: none;
  color: white;
  height: 50px; /* Maintain same height as banner */
  /* Adjust width as needed for your dropdown content */
  /* Consider using 'max-width' to prevent excessive width */
  z-index: 100; /* Ensure it appears on top of the banner */
}


/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
	background-color: #233a5b;
	color: white;

}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropdownbutton {
	background-color: #233a5b;
}
	
#Master-body {
	
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }

    .Master-button {
      background-color: #233a5b;
      color: white;
      padding: 5px 30px;
      border: none;
      border-radius: 5px;
      font-size: 20px;
      cursor: pointer;
      margin: 5px;
	  text-align: center;
	  cursor: pointer;
	  transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out; /* Add transition */
    }
	
	.Master-button:active {
  background-color: #1b304b; /* Darken on click */
  transform: translateY(2px); /* Move down slightly */
}

    .Master-button-container {
      display: flex;
      justify-content: space-between; /* Horizontally space buttons */
      width: 500px; /* Adjust as needed */
    }

.resource-button {
  width: 150px; /* Set a fixed width for all resource buttons */
  height: 50px; /* Set a fixed height for all resource buttons */
}

.resource-button img {
  max-width: 100%; /* Ensure the image does not exceed button width */
  max-height: 100%; /* Ensure the image does not exceed button height */
  object-fit: contain; /* Ensure the image maintains its aspect ratio */
}

.panels-container {
  display: flex;
  flex-direction: column;
  width: 100%; /* Adjust width as needed */
}



.panel {
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 5px;
  text-align: justify;
  background-color: white;
  flex: 1;
  
}

.panels {
    display: flex;
    flex-direction: row; /* Default: horizontal layout */
    justify-content: space-between; /* Optional: adds spacing */
    flex-wrap: wrap; /* Ensures wrapping if necessary */
}



.image-panel {
  gap: 20px; /* Change the value to adjust the gap size */
  text-align: justify;
  background-color: white;
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: flex-end; /* Align image to right edge */
  justify-content: space-between; /* Horizontally space elements */
}


h2 {
  margin-bottom: 10px;
}

p {
  line-height: 1.5;
}	
    
table {
	border-collapse: collapse;
}
th, td {
	border: 1px solid black;
	padding: 10px; /* Adjust padding as needed */
	text-align: left;
}
		
.toggleHelp {
	display: none;
}
   
 
footer {
    width: 100%;
    bottom: 0;
    left: 0;
    background-color: #233a5b; /* Change to your preferred background color */
    color: white; /* Change to your preferred text color */
    text-align: center;
    padding: 10px 0; /* Adjust padding as needed */
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.5); /* Optional: adds a shadow effect */
    z-index: 1000; /* Ensures the footer stays on top */
} 

.footer-text {
  font-size: 10px; /* Adjust as needed */
} 
@media (max-width: 768px) {
    .panels {
        flex-direction: column; /* Change to vertical layout on small screens */
        align-items: center; /* Center align for a better look */
    }

    .panel {
        width: 90%; /* Make panels take up most of the width */
        max-width: 500px; /* Prevents them from getting too large */
        margin-bottom: 20px; /* Add spacing between stacked panels */
    }
    .table-container {
        width: 100%;
        overflow-x: auto;
        border: 1px solid black; /* Ensures a consistent border */
    }

    table {
        width: 100%; /* Ensures the table fits inside the panel */
        max-width: 100%;
        border-collapse: collapse; /* Prevents double borders */
        table-layout: fixed; /* Prevents auto-sizing issues */
    }

    th, td {
        border: 1px solid black !important; /* Forces consistent border width */
        padding: 5px; /* Adjust padding for smaller screens */
        white-space: nowrap; /* Prevents text wrapping */
    }
	.banner-text {
        font-size: 4vw !important; /* Increases size for better readability */
        white-space: normal; /* Allows wrapping on small screens */
        text-align: center;
    }
	
	    .logo {
        height: 50px !important; /* Scale down for mobile */
        max-width: 70%; /* Ensure it doesn't take too much space */
    }
	
}