/* This creates the space between each form group */
        .form-group {
            margin-bottom: 20px; /* Adjust this number to increase/decrease space */
        }
        /* --- General Layout --- */
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 0;
            background-color: #f9f9f9;
            color: #333;
            display: flex;
            flex-direction: column;
        }

        /* Standardize content containers */
        header, main, footer {
            max-width: 1000px;
            width: 100%;
            box-sizing: border-box;
        }
		
        .main-content-list li {
		margin-bottom: 20px;
	}
	
        h1 { color: #2c3e50; text-align: center; }
        h2 { color: #1434A4; text-align: center; }
        h3 { color: #d35400; font-size: 1.3em; }
        a { color: #00008B; text-decoration: none; transition: color 0.3s; }
        a:hover { color: #3498db; }
        
	@media screen and (max-width: 767px) {
    h2 { 
        margin-bottom: 0 !important; 
        padding-bottom: 0 !important; 
    }

    main { 
        margin-top: 0 !important; 
        padding-top: 0 !important; 
    }
}

        /* --- Sidebar Style --- */
        .sidebar-container {
            background-color: #2c3e50;
            color: #ecf0f1;
            z-index: 1000;
            box-shadow: 2px 0 10px rgba(0,0,0,0.3);
        }

        .sidebar-logo {
            padding: 10px;
            text-align: center;
        }

        .sidebar-menu {
            list-style: none;
            padding: 0;
            margin: 0;
            margin-left: 60px;
        }

        .sidebar-menu a {
            display: block;
            padding: 6px 15px;
            color: #ecf0f1;
            border-radius: 4px;
        }

        .sidebar-menu a:hover {
            background-color: #3498db;
        }
        
        .sidebar-menu a.active {
            background-color: #406040;
            font-weight: bold;
        }

        /* --- Desktop Layout (Screens wider than 900px) --- */
        @media (min-width: 901px) {
            .sidebar-container {
                position: fixed;
                top: 0;
                left: 0;
                height: 100vh;
                width: 340px;
                overflow-y: auto;
            }

            /* Push content right to make room for sidebar */
            header, main, footer {
                 /* 340px sidebar + 20px gap edited */
                padding: 0px;margin-top: 0px;margin-left: 430px;
            }
        }

        /* --- Mobile Responsive Rules (Screens 900px and below) --- */
		
		/* 1. Remove the large gap from the summary box */
.summary {
    margin-bottom: 10px !important;
}

/* 2. Tighten the footer spacing */
footer {
	border-top: 1px solid #ddd; /* A subtle light grey line */
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 3. Reduce the gap on the text inside the footer */
footer p {
    margin-top: 10px !important; /* Changed from your current 40px */
}
		
        @media (max-width: 900px) {
            header, main, footer {
                margin-left: 0;
                padding: 20px;
                width: 100%;
            }

            .sidebar-container { 
                order: 3; /* Moves sidebar to bottom */
                position: static; 
                width: 100%; 
                height: auto; 
                margin-top: 10px; 
                margin-bottom: 50px;
            }

            .sidebar-menu {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                padding: 20px 10px;
            margin-left: 0px;
            }

            .sidebar-menu li { margin: 5px; }
			
			footer {
    margin-top: -20px !important;
}
        }