/* GENERAL SETTINGS =================================================================================================== */	        @page {
            size: A4;
            margin: 0.5in;
        }
        
        body {
            font-family: Tahoma, Verdana, Helvetica, sans-serif;
            font-size: 100%;
            line-height: 1.4;
            margin: 0;
            padding: 0;
            color: black;
			background-color: transparent;
        }
		
		#container {
		margin:0 auto;
		max-width:96%;
		background-color:transparent;
		}
        
        p {
            text-align: center;
            font-style: italic;
            margin-bottom: 15px;
            color: black;
        }
		
		a:link, a:active, a:visited {
		text-decoration:none;
		color:maroon;
		font-weight:bold;
		}



		a:hover {
		text-decoration:none;
		color:#b22222;
		font-weight:bold;
		}
        
        h1 {
            text-align: center;
            font-size: 1.6em;
            margin-bottom: 20px;
            color: maroon;
            padding-bottom: 10px;
        }
		
			h3 {
            font-weight: bold;
            font-size: 1em;
            color: black;
        }
        
       container {
            display: flex;
            flex-direction: column;
        }
		
		ul {
         /* Changes text color */
		   list-style-type: square; /* Options: disc, circle, square, none */
 			font-size: 1em;      /* Changes text size */
			margin-left: 5%;   /* Adds space between items */
			padding-left: 2%;
			}
		
		li {
         /* Changes text color */
			font-size: 1em;      /* Changes text size */
   /* Adds space between items */
			}
			
			#banner {
			display:block;
			background-color:transparent;
			}

			#menu {
			display:block;
			width:100%;
			font-size:1em;
			background-color:transparent;
			}



       
/* OUTLINE SECTION =================================================================================================== */	
        
        .outline-section {
            border: 1px solid maroon;
            border-radius: 8px;
            padding: 1%;
            background-color: #fafafa;
            break-inside: avoid;
            margin-bottom: 1.5%;
			font-size: 90%;
        }
        
        .outline-header {
            font-weight: bold;
            font-size: 1.2em;
            color: maroon;
			margin-top: 10px;
            margin-bottom: 10px;
            border-bottom: 1px solid maroon;
            padding-bottom: 0.3%;
        }


/* PERSON PROFILE & OTHER CARDS =================================================================================================== */	

    .person-grid { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
    .person-card { flex-grow: 1; flex-shrink: 0; flex-basis: calc(50% - 8px); box-sizing: border-box; background-color: #fafafa; border: 1px solid maroon; border-radius: 6px; padding: 1%; }
	/* --- Medium Desktops (3 Cards per row) --- */
	@media (min-width: 1200px) {
		.person-card {
		/* 4 Cards per row: 25% width minus three-quarters of 3 gaps (48px / 4) */
		flex-basis: calc(25% - 12px);
		}
	}
   	.person-name { font-weight: bold; color: #7e7e7e; font-size: 1em; margin-bottom: 4px; text-align: center; }
    .person-role { font-style: italic; color: #8B4513; font-size: 0.85em; margin-bottom: 6px; }
    .person-desc { color: #494949; font-size: 0.9em; margin-left:1%; }
		
		
/* CONTAINER FOR IMAGE AND CAPTION ============================================================================= */
        .image-container {
            width: 40%;
            margin: 15px;
            display: inline-block;
        }

        /* Align left */
        .image-container.align-left {
            float: left;
            margin-right: 20px;
        }

        /* Align right */
        .image-container.align-right {
            float: right;
            margin-left: 20px;
        }

        /* Image styling */
        .image-container img {
            width: 100%;
            height: auto;
            display: block;
            border: 1.5px solid maroon;
            border-radius: 5px;
        }

        /* Caption styling */
        .image-caption {
            text-align: center;
            font-size: 0.9em;
            color: #666;
            font-style: italic;
            margin-top: 8px;
            padding: 5px;
        }

        /* Demo content */
        .demo-text {
            margin-top: 20px;
        }

        /* Clear floats */
        .clearfix::after {
            content: "";
            display: table;
            clear: both;
        }
		
/* MODAL BOXES ================================================================================================= */

/* The Modal (background) */
        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1; /* Sit on top */
            padding:1%; /* Location of the box */
            left: 0;
            top: 0;
            width: 100vw; /* Full width */
            height: 100vh; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: #f4f4f4; /* Black w/ opacity */
						        }

/* Modal Content */
        .modal-content {
            background-color: #fefefe;
            margin: auto;
            padding: 3%;
            border: 1px solid maroon;
			width: 80vw;
			}

/* The Close Button */
        .close {
            color: black;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: gray;
            text-decoration: none;
            cursor: pointer;
        }	
		
		
/* COPYRIGHT =================================================================================================== */	
		
		.copyright-section {
		margin-top: 1.5%;
		border: 1px solid maroon;
		border-radius: 8px;
		padding: 1%;
		background-color: #fafafa;
		break-inside: avoid;
		margin-bottom: 1%;
		}
        
/* PRINTING =================================================================================================== */	
        @media print {
            body { font-size: 80%; }
            .outline-section { break-inside: avoid; }
            .context-section { break-inside: avoid; }
            .theme-section { break-inside: avoid; }
        }