body {
    background-color: #62d3d7; /* light turquoise */
    font-family: Arial Rounded MT Bold, Arial, sans-serif; /* rounded font */
    line-height: 1.6;
    margin: 20px; /* add margin around the body */
    color: #02090c; /* dark turquoise for text */
    text-align: left; /* left-align all text */
    display: flex; /* use flexbox for centering */
    flex-direction: column; /* stack elements vertically */
    align-items: flex-start; /* left-align items horizontally */
    justify-content: flex-start; /* left-align items vertically */
    min-height: 100vh; /* ensure body takes full viewport height */
    padding: 10px; /* add padding inside the body */
    box-sizing: border-box; /* include padding in element's total width and height */
    max-width: 100%; /* prevent body from exceeding viewport width */
    max-height: 100%; /* prevent body from exceeding viewport height */
}

h1 {
    color: #02090c; /* dark turquoise */
    font-size: 30px; 
    padding: 10px;
    margin-bottom: 15px; /* increases space below h1 */
    margin-top: 10px; /* reduce space above h1 */
    background-color: #e3c6f4; /* light purple background */
    border: 5px solid #3c0954; /* purple border */
    border-radius: 5px; /* rounded corners */
    padding: 10px; /* padding inside the box */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* subtle shadow */
    width: fit-content; /* fit width to content */
    max-width: 900px; /* limit max width */
    height: fit-content; /* fit height to content */
    max-height: 200px; /* limit max height */
    margin-left: auto; /* left-align h1 horizontally */
    margin-right: auto; /* left-align h1 horizontally */
    font-family: Arial Rounded MT Bold, Arial, sans-serif; /* consistent font */
    text-align: center; /* center text */
}

h2 {
    color: #31023b; /* dark purple */
    font-size: 18px; 
    padding: 8px;
    margin-bottom: 20px; /* increase space below h2 */
    margin-top: 10px; /* reduce space above h2 */
    background-color: #e3c6f4; /* light purple background */
    border: 5px solid #cb309a; /* hot pink border */
    border-radius: 5px; /* rounded corners */
    padding: 10px; /* padding inside the box */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* subtle shadow */
    width: fit-content; /* fit width to content */
    max-width: 400px; /* limit max width */
    height: fit-content; /* fit height to content */
    max-height: 100px; /* limit max height */
    overflow-y: auto; /* add vertical scrollbar if content overflows */
    margin-left: auto; /* center h2 horizontally */
    margin-right: auto; /* center h2 horizontally */ 
    font-family: Arial Rounded MT Bold, Arial, sans-serif; /* consistent font */
    text-align: center; /* center text */
}

p {
    color: #051718; /* dark teal */
    font-size: 16px;
    padding: 10px;
    line-height: 1.7;
    margin-top: 2px; /* reduce space above p */
    margin-bottom: 10px; /* reduce space below p */
    background-color: #f0f8ff; /* light blue background */
    border: 1px solid #ccc; /* light gray border */
    border-radius: 5px; /* rounded corners */
    padding: 10px; /* padding inside the box */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* subtle shadow */
    width: fit-content; /* fit width to content */
    max-width: 600px; /* limit max width */
    height: fit-content; /* fit height to content */
    max-height: 300px; /* limit max height */
    overflow-y: auto; /* add vertical scrollbar if content overflows */
    margin-left: auto; /* center p horizontally */
    margin-right: auto; /* center p horizontally */
    font-family: Arial Rounded MT Bold, Arial, sans-serif; /* consistent font */
}

ul {
    color: #0b060a; /* dark gray */
    font-size: 18px;
    padding: 10px;
    line-height: 1.5;
    margin-top: 2px; /* reduce space above ul */
    margin-bottom: 10px; /* reduce space below ul */
    background-color: #f0f8ff; /* light blue background */
    border: 4px solid #0b060a; /* dark gray border */
    border-radius: 5px; /* rounded corners */
    padding: 10px; /* padding inside the box */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* subtle shadow */
    width: fit-content; /* fit width to content */
    max-width: 1000px; /* limit max width */
    height: fit-content; /* fit height to content */
    max-height: 1000px; /* limit max height */
    overflow-y: auto; /* add vertical scrollbar if content overflows */
    margin-left: auto; /* center ul horizontally */
    margin-right: auto; /* center ul horizontally */
    font-family: Arial Rounded MT Bold, Arial, sans-serif; /* consistent font */
    list-style-type: disc; /* bullet points */
    list-style-position: inside; /* bullets inside the box */
    text-align: left; /* left align text */
    text-justify: inter-word; /* justify text */
    text-indent: 20px; /* indent first line */
    text-transform: none; /* normal text case */
    letter-spacing: normal; /* normal letter spacing */
    word-spacing: normal; /* normal word spacing */
    white-space: normal; /* normal white space handling */
    word-break: normal; /* normal word breaking */
    hyphens: none; /* no hyphenation */
}

 #firstDiv {
    border: 3px solid black; /* black border */
    padding: 16px;
    margin-top: 30px;
    width: fit-content;
    height: fit-content;
    background-color:#e645c0; /* bright pink background */
    margin: 20px 0;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2); /* subtle shadow */
    border-radius: 10px; /* rounded corners */
    max-width: 900px; /* limit max width */
    max-height: 400px; /* limit max height */
    font-size: 16px; /* consistent font size */
    color: white; /* white text for contrast */
    font-family: Arial Rounded MT Bold, Arial, sans-serif; /* consistent font */
    line-height: 1.5; /* consistent line height */
    text-align: center; /* center text */
    margin-left: auto; /* center div horizontally */
    margin-right: auto; /* center div horizontally */
    display: flex; /* use flexbox for centering */
    align-items: center; /* center items vertically */
    justify-content: center; /* center items horizontally */
    flex-direction: column; /* stack elements vertically */
    text-align: center; /* center text */
    text-justify: inter-word; /* justify text */
    text-indent: 20px; /* indent first line */
    text-transform: none; /* normal text case */
    letter-spacing: normal; /* normal letter spacing */
    word-spacing: normal; /* normal word spacing */
    white-space: normal; /* normal white space handling */
    word-break: normal; /* normal word breaking */
    hyphens: none; /* no hyphenation */
}

div:hover {
    background-color: #752786; /* purple on hover */
    color: white; /* white text on hover */
    transform: scale(1.02); /* slightly enlarge on hover */
    box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.3); /* stronger shadow on hover */
    transition: background-color 0.3s, color 0.3s, transform 0.3s, box-shadow 0.3s; /* smooth transition */
} 

a {
    color: #02090c; /* dark turquoise */
    text-decoration: none; /* remove underline */
    font-weight: bold; /* bold text */
    font-family: Arial Rounded MT Bold, Arial, sans-serif; /* consistent font */
    font-size: 16px; /* consistent font size */
    margin: 5px; /* margin around links */
    padding: 5px; /* padding inside links */
    border-radius: 5px; /* rounded corners */
    transition: background-color 0.3s, color 0.3s; /*
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* subtle shadow */
    background-color: #f0f8ff; /* light blue background */
    text-align: left; /* left text */
    display: inline-block; /* allow padding and margin */
    text-align: left; /* left text */
    margin-left: auto; /* center a horizontally */
    margin-right: auto; /* center a horizontally */ 
    display: flex; /* use flexbox for centering */
    align-items: center; /* center items vertically */
    justify-content: center; /* center items horizontally */
    flex-direction: column; /* stack elements vertically */
    text-align: center; /* center text */
    text-justify: inter-word; /* justify text */
    text-indent: 20px; /* indent first line */
    text-transform: none; /* normal text case */    
    letter-spacing: normal; /* normal letter spacing */
    word-spacing: normal; /* normal word spacing */
    white-space: normal; /* normal white space handling */
    word-break: normal; /* normal word breaking */
    hyphens: none; /* no hyphenation */
}
a:hover {
    text-decoration: underline; /* underline on hover */
    background-color: #752786; /* purple on hover */
    color: white; /* white text on hover */
    transform: scale(1.05); /* slightly enlarge on hover */
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2); /* stronger shadow on hover */
    transition: background-color 0.3s, color 0.3s, transform 0.3s, box-shadow 0.3s; /* smooth transition */
}

button {
    background-color: #02090c; /* dark turquoise */
    color: white; /* white text */
    border: 5px solid #02090c; /* dark turquoise border */
    padding: 10px 20px; /* padding */
    border-radius: 5px; /* rounded corners */
    cursor: pointer; /* pointer cursor on hover */
    font-family: Arial Rounded MT Bold, Arial, sans-serif; /* consistent font */
    font-size: 16px; /* consistent font size */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* subtle shadow */
    margin: 10px; /* margin around button */
}
button:hover {
    background-color: #051718; /* darker teal on hover */
}

/* General Styles */
* {
    box-sizing: border-box; /* include padding and border in element's total width and height */
}   
/* Utility Classes */
.text-center {
    text-align: center; /* center text */
}
.mt-10 {
    margin-top: 10px; /* margin top 10px */
}
.mb-10 {
    margin-bottom: 10px; /* margin bottom 10px */
}
.mx-auto {
    margin-left: auto; /* center horizontally */
    margin-right: auto; /* center horizontally */
}
.padding-10 {
    padding: 10px; /* padding 10px */
}
.rounded {
    border-radius: 10px; /* rounded corners */
}
.shadow {
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* subtle shadow */
}

/* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
  float: left;
  width: 20%;
  padding: 5px; 
/* center images horizontally with padding */
}

/* Clear floats after image containers */
.row::after {
  content: "";
  clear: both;
  display: table;
}