body {
    font-family: Roboto, Arial, sans-serif; /* Specify primary font, with fallbacks */    text-align: center; /* Center align all body content */	text-align: left; /* Center align all body content */    font-size: 18px; /* Increase the font size */    background-color: #333333; /* Dark grey background color */    color: white; /* White text color */	font-weight: 300; /* Medium weight */	padding: 5px 5vw 10px 5vw; /* padding: [top] [right] [bottom] [left]; */
}
.resized-image {
    width: 100%;
    height: auto;
    max-width: 600px;
	border-radius: 10px;
}
@media (max-width: 768px) {
    .resized-image {
        max-width: 300px;  /* Smaller max-width for mobile devices */
    }
}

@media (max-width: 480px) {
    .resized-image {
        max-width: 100%;  /* Full width on very small devices */
    }
}

/* Target <strong> elements within <p> tags and increase font weight for extra boldness */
p strong {
    font-weight: 800;
	 text-align: left; /* Justify text within paragraphs */
    margin-bottom: 20px; /* Add margin to the bottom of paragraphs */
}

h1 {
    text-align: center; /* Center align the title */
    margin-top: 20px; /* Add margin to the top of the title */
}
/* Will indent paragraph (First Line Indent) */
.FLI {
    Padding-left: 30px;
	Padding-right: 25px;
	text-align: justify;
	border: 1px dotted #ddd;
	max-width: 80%;  
	border-radius: 10px;
	 background-color: hsla(220, 100%, 90%, 0.1); /* You can adjust the opacity by changing the alpha value. For a more transparent effect, lower the alpha value (e.g., 0.1 for 10% opacity). For less transparency, increase the alpha value (e.g., 0.5 for 50% opacity). */
}
/* small icon images */
.icon {
    width: 100px; /* Set the width of the image to 100px */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Ensure the image behaves as a block element */
    margin: 20px auto; /* Center the image horizontally and add margin */
    border-radius: 10px; /* Add rounded corners to the image */
}

.carousel-container {
    border: 1px solid #ddd;  /* Light grey border */background: linear-gradient(to left, #1de9b6, #1dc4e9);
    /* background-color: #ddd;  /* Light background for the entire carousel */ 
    padding: 7px;  /* Padding around the content within the container */
    margin: auto;  /* Center the carousel if needed */	box-sizing: border-box;  /* Include padding and border in the width/height calculations */	border-radius: 10px;  /* Rounded corners */    box-shadow: 0 4px 8px rgba(0,0,0,0.1);  /* Subtle shadow for depth */	max-width: 90%;  /* Limit the maximum width */    max-height: 90vh;  /* Limit the maximum height */    /* overflow: hidden;  /* Hide any overflow */     margin-bottom: 50px;  /* Adjust the value as needed to increase or decrease space */
}

/* adjusting the overal size of the slideshow */.slidecontainer {    max-width: 450px;    position: relative;    margin: auto;
}
.image-link {
    display: block;    text-decoration: none; /* Remove underline */    color: inherit;  	/* Maintain inherited color properties */	
}

.slides {    /* display: none; */    /* animation-name: fade; */    /* animation-duration: 1.5s; */    position: relative; /* Necessary for positioning the caption absolutely within it */    width: 100%; /* Set a specific width if necessary */    height: auto; /* Adjust based on content or specific dimensions */    overflow: hidden;  /* Avoid overflow issues */
}
@keyframes fade {    from {opacity: .4}     to {opacity: 1}}
/* Changes position of the image inside the grey container. Can also reduce border by enabling the display:block; */img {
    width: 90%;    height: auto;
	/* display: block;  /* Remove extra space below the image */     display: block; /* Ensure images behave as block elements */    margin: 0 auto; /* Center the images horizontally */    max-width: 90%; /* Set the maximum width of the images to 50% of the viewport width */    border-radius: 15px;
}
/* this is the dot or square icon within the carousel  */.dot {    cursor: pointer;    height: 20px;    width: 25px;    margin: 0 10px; /* Adjust spacing as needed */    background-color: #bbb;    border-radius: 10%;    display: inline-block;    transition: background-color 0.6s ease;	/* display: flex; */    align-items: center;    justify-content: center;    
}
/* square animation & transition*/.active, .dot:hover {	background-color: #ffcc00
}
.Quiz {	/* background-color: #ddd; */	/* background: linear-gradient(to right, #0fd850, #f9f047); */	background: linear-gradient(to left, #1de9b6, #1dc4e9);    border-radius: 20px;    width: 700px;    margin: auto;			text-align: left; /* Center align all body content */    font-size: 18px; /* Increase the font size */    /* background-color: #333333; /* Dark grey background color */     color: black; /* text color */    font-weight: 400; /* Medium weight */	padding: 5px 0vw 10px 0vw; /* padding: [top] [right] [bottom] [left]; */	/* margin-bottom: 700px;  */	display: flex;    flex-direction: column;    align-items: center;    justify-content: space-between; /* This spreads out vertically */
}@media (max-width: 768px) {    .Quiz {        font-size: 14px;        padding: 5px 0vw 10px 0vw;    } }   
/* This controls the primary carousel box of images and sections */.dot-container {
     justify-content: center;  /* Center dots within the container */
	text-align: center;
    padding: 1px;  /* Adds padding above and below the dots */
    margin: 5px auto;   /* Centers the container on the page and adds space around it */
    background: #333333; /* light grey */
	width: 50%;          /* Sets the width of the container to X% of its parent element */
    border-radius: 10px;  /* Optional: adds rounded corners */
}
/* The dot in carousel that navigates to the desired page */
.dot-link {    /* outline: 2px solid blue;  // Adds a visual indicator for focus or hover */	/* .dot-link { */    /* display: inline-block;  // Keeps the layout consistent with other inline elements */	text-decoration: none; 	/* Removes underline from links */    color: inherit; 	/* Inherits color from parent elements */
}

/* Text caption on images */.caption {
    position: absolute;    bottom: 10px;  /* Position the caption at the bottom of the slide */    text-align: center; /* Center-align the text within the caption */		left: 0%;    /* Align the caption to the left side */
		right: 0%;    /* Align the caption to the right side */    width: 100%; /* Ensure the caption wraps correctly by stretching across the entire width of the image */	transform: none;  	/* Removes any transformations if previously set */	/* background-color: rgba(51, 51, 51, 0.8); /* Dark grey background with some transparency */ 	/* background-color: black;   */	font-weight: bold;	color: white; /* White text for high contrast */    padding: 1px 15%; /* padding above and below the text padding: increased to 15% on the left and right sides.  5px 10%; Top/bottom, Left/right padding */    font-size: 22px; /* Set an appropriate font size */	text-shadow: 2px 1px 3px rgba(0, 0, 0, 0.6);  /* Adds a subtle black shadow to the text */    box-sizing: border-box; /* Include padding and border in the element's total width and height */   word-wrap: break-word;  /* * Force long words to break and wrap  */   	overflow: hidden;  /* Avoid overflow */	/* z-index: 10;  // Make sure the z-index is high enough to be on top of the image	 */
}

/* bulletted items */
ul {    text-align: left; /* Left-align the bulleted list items */
}

ul li {    text-align: left; /* Left-align the content within each list item */
}

.parent-container {  /* Parent element of .collapsible button */
    display: flex;	flex-direction: column;	/* margin-top: 100px; /* Ensure there's a top margin */ 	/* Centers horizontally in the container */	/* justify-content: center;  */	justify-content: space-between; /* This spreads out children vertically */    align-items: center; /* Centers vertically in the container */    height: 100px; /* Set a height for vertical centering to take effect */    text-align: center; /* Centers inline elements like buttons */	position: relative; /* Ensures proper stacking context */    z-index: 5;         /* Adjust based on your needs, should be lower than captions if they overlap */	width: 100%; /* Ensure full width if not already set */    box-sizing: border-box; /* Includes padding and border in width calculation */
}

/* Text within the collapsible button after expanded*/.CollapseContent {
    border-radius: 15px; /*5% or pt */	padding: 0px 18px;    display: none;    overflow: hidden;    background-color: black;	color: white;	border: 1px solid #ffcc00; /* yellow-orange border*/	
}/* Buttons that collapse */
.collapsible {	margin-top: 40px;
   background-color: #f9f9f9; /*light-gray *//* background: linear-gradient(to right, #1de9b6, #1dc4e9); */    color: #444; /* button text color: #444;-black */	    cursor: pointer;	text-align: center; /* Center-align the text within the caption */		left: 0%;    /* Align the caption to the left side */		right: 0%;    /* Align the caption to the right side */    padding: 18px;    width: 75%; /* adjust size of button */    border: none;    text-align: Center;    outline: none;    font-size: 18px;    transition: background-color 0.4s ease;	border-radius: 15px;  /* Optional: adds rounded corners */
}

.collapsible:hover, .collapsible:focus {
    background-color: #ffcc00;
}
.collapsible::after {    content: "\002B"; /* Unicode character for the plus sign */    color: #777;    font-weight: bold;    float: right;    margin-left: 5px;
}

/* changes the icon arrow display on page titles */
.collapsible.active::after {    content: "\2212"; /* Unicode character for the minus sign. Really like this one but not supported on all devices:2B9D */
}

/* This is for when a selection is made in the carousel the button gets highlighted.  */
.highlighted-button {
    background-color: #ffcc00; /* yellow-orange */    color: #ffffff; /* change text color */	Smooth transition for color change	transition: background-color 0.5s ease; 	border-radius: 15px;  /* adds rounded corners */
}