:root{
	--forecolor: #0000ff;
	--backcolor: #0000ff10;
	--menuhover: #000000;
	--menuhoverback: #ff00ff19;
	--bordcolor: #0000ff30
}

body{
	margin:0;
	font:76% verdana,tahoma,sans-serif;
	background:var(--backcolor);
	color:var(--forecolor);
	word-wrap: break-word;
}

h1{
	font-size:3.1em;
	letter-spacing:-2px;
	text-align:left;
	background-color:inherit;
}

h2{
	margin-top: 10px;
	margin-bottom: 20px;
	text-align:center;
	font-size:1.6em;
	letter-spacing:-1px;
	font-weight:normal;
}

a:link {
    color: var(--forecolor);  /* Unvisited link */
}

a:visited {
    color: var(--forecolor);  /* Visited link */
}

#title{
	margin-top:20px;
	margin-bottom:-10px;
	margin-left:170px;
}

.indented-paragraph div {
    flex: 1; /* Allows the text to take the remaining space */
}

.indented-paragraph {
    margin-left: 50px; /* Adjusts indentation */
    margin-right: 10px;
	margin-bottom: 0px;
    line-height: 1.6; /* Adjusts line spacing */
}

p.indented-paragraph a {
    display: inline;
    margin 0;
	padding: 0;
}

.indented-paragraph img {
    float: left; /* Retains the float for images */
    margin-right: 20px;
    margin-bottom: 10px;
}

/* Ensures that the links under "Important Links" are displayed vertically */

.flex-container {
    display: flex;
}

#container {
    flex: 1;  /* Keeps the container growing if needed */
    max-width: calc(100% - 220px); /* Ensure it doesn't exceed the viewport width */
    margin: 20px; /* Your desired hard-coded margin */
    padding: 10px;  /* Add padding to give space inside the border */
    border: 5px solid var(--bordcolor); /* Add a visible border */
}

#sidebar {
    width: 130px;
    margin-right: 20px;
}


.pdf-list {
    margin-left: 2em;     /* indent */
}

.pdf-list li {
    margin-bottom: 0.3em;
}


img {
    display: block;   /* Make the image a block element */
    margin-left: auto;  /* Automatically set left margin */
    margin-right: auto; /* Automatically set right margin */
}



.date {
    font-weight: bold; /* Make the date bold */
    font-size: 1.1em;  /* Slightly larger font size */
    margin-bottom: 10px; /* Space below the date */
	margin-left: 30px;
	margin-top: 20px;
}

.centeredDate {
    font-weight: bold; /* Make the date bold */
    font-size: 1.1em;  /* Slightly larger font size */
    margin-bottom: 10px; /* Space below the date */
    margin-top: 20px;
    text-align: center;  /* Center the text */
    clear: both;         /* Prevent text from floating next to images */
    display: block;      /* Ensure the entire block behaves consistently */
    width: 100%;         /* Use full width to properly center text */
}


/*
	MENU ITEMS
	----------
	Menu Items are displayed as buttons and used as a
	list of links to other pages. These are embedded in
	a sidebar object, defined above.
*/
.menu{
	display:block;
	width:120px;
	height: 12px;
	padding:4px 2px 4px 4px;
	font-size:1.1em;
	font-weight:bold;
	color:var(--forecolor);
    margin-bottom: 15px; /* Add even spacing between buttons */
}
.menu:last-child {
    margin-bottom: 0; /* No margin for the last button */
}

.menu:hover{
	background-color:var(--menuhoverback);
	color:var(--menuhover);
}

.credits{
	margin-bottom:10;
	margin-left:10;
	font-size:0.8em;
	background-color:inherit;
	color:var(--forecolor);
	text-align: center; 
}

.custom-hr {
    width: 324px;  /* Set the width of the line to 50% of the container */
    margin: 20px 0 4px 0;  /* Remove left margin for flush alignment */
    border: none;  /* Remove the default border */
    border-top: 2px solid var(--forecolor);  /* Create a solid line */
}