html {
	background-color: #f5ffe3;		/* light green background for the entire webpage*/ 
	} 				

.body {
		font-family: 'Open Sans', sans-serif;
		margin: 0;
	}

.header {
	background-color: #a1ca66; 		/* dark green colour */ 
	padding: 40px;
	display: flex;
	align-items: center;
	justify-content: center; /* Center the content horizontally */
	}
		
.header h1 {				/* h1 text styling for header */ 
	margin: 0;
	font-size: 4.5em;
	font-style: italic;
	font-weight: 600;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
	color: #fff;
	}

.navbar {					/* Navigation bar */ 
		background-color: #ede8c2;			/* yellow cream colour */ 
		padding: 10px 0;
		box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	}


	
.navbar ul {			/* Unordered lists */ 
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	}

.navbar li {			/* List items */ 
	margin: 0 15px;
	}

.navbar a {				/* To include links */ 
	text-decoration: none;
	color: #000;
	font-weight: 600;
	padding: 5px 10px;
	transition: color 0.3s ease;
	display: flex;
	align-items: center;
	gap: 5px; /* Space between icon and text */
	}

.navbar a:hover {
	color: #69873d;
	}

.file-input {				/* For file input */ 
  margin-bottom: 15px;
	}

.file {
	margin-right: 0px;
	color: white;
	padding: 10px 15px;
	font-weight: bold;
	font-size: 12px;
	border: none;
	cursor: pointer;
	width: 300px;
	text-align: left;
	}

.main-content {				/* To display description card and entries card on the same line */ 
		display: flex;
		flex-wrap: wrap; /* Allows wrapping on smaller screens */
		gap: 20px;
		padding: 20px;
		max-width: 1200px;
		margin: 20px auto;
		align-items: stretch;
		}
		
.description-card {
            flex-basis: calc(65% - 10px); /* Takes about 65% width */
			box-sizing: border-box;		/* do not overflow space with entries card */ 
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
			background-color: #fff;
			border-radius: 20px; 		/* rounded borders */ 
			padding: 10px 5px 10px 15px; 
			}

.description-card .headline {		
	font-size: 36px;
	font-weight: 700;
	color: #000e89;		/* dark blue */ 
	font-style: italic;
	}

.description-card p {			/* paragraph text CSS */ 
	line-height: 1.5;
	margin-top: 5px;
	margin-bottom: 5px;
	}

.entries-card {
	flex-basis: calc(35% - 10px); /* Takes about 35% width */
	background-color: #000e89;		/* dark blue */ 
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	text-align: center;
	position: relative;
	}


.search-form {
	display: flex;
	flex-wrap: wrap; 		/* wrap select elements */
	gap: 15px; 				/* Space between elements */
	align-items: center;
	justify-content: center; /* Center elements */
	width: 100%;
	max-width: 800px; 			/* Limit form width */
	margin-top: 20px;
	}

.search-form button {
	padding: 10px 25px;
	color: #fff;
	border: none;
	background-color: #556B2F;			/* dark green */ 
	border-radius: 5px;
	cursor: pointer;
	font-size: 1em;
	font-weight: 600;
	}

.search-form button:hover {
	background-color: #f5ffe3;			/* light green */ 
	color: #000;
	}
		
	
	
.footer {
		background-color: #5ea21b;		/* dark green background */ 
		color: #fff;
		text-align: center;
		padding: 15px;
		margin-top: 30px;
		font-size: 18px;
		}
		

.message-box {
			background-color: #f0f8ff;		/* Very light blue */ 
			border: 1px solid #ccc;
			border-radius: 10px;
			padding: 20px;
			max-width: 600px;
			margin: auto;
			font-size: 24px;				/* Big text */ 
		}
		
		
.box {	
    background-color: #c6e7ff;		/* light blue background */ 
    padding: 20px;	
    margin: 30px auto;
    border: 2px solid #999;
    border-radius: 10px;			/* Rounded corners */ 
    max-width: 600px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    text-align: left;
	}

.box2 {								/* copy box but alignment is different */ 
    background-color: #c6e7ff;		/* light blue background */ 
    padding: 20px;
    margin: 30px auto;
    border: 2px solid #999;
    border-radius: 10px;			/* rounded corners */ 
    max-width: 600px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    text-align: center;
	}
	
.box2 button {
		border: 5px solid #87cefa;  /* soft blue border */
		color: #000;                /* Black text */
		padding: 10px 20px;         
		text-align: center;			/* Align in the middle */ 
		display: inline-block;
		font-size: 30px;			/* Big font size so it is obvious */ 
		border-radius: 6px;         /* rounded corners */
		cursor: pointer;
		transition: background-color 0.3s ease;
		}

.box2 button:hover {
				background-color: #000e89;			/* turns dark blue when hover */ 
				color: #fff;						/* white text */ 
				}
				
.container {						/* To put content in a container to display items in the middle */ 
    display: flex;
    justify-content: center;
	}