/* Header styles */
	
	header {background-color: #007bff;color: white;padding: 5px 0;text-align: center;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2)}
	header h1 {margin: 0;font-size: 2.5em;font-weight: bold;letter-spacing: 2px;}.container {display: inline-block;margin-top: 20px;width: 90%;max-width: 600px;}
	
	/* Submit Button */
		.custom-submit-button {
	    /* 1. Basic Dimensions and Color */
	    padding: 12px 30px;   /* height width */
	    background-color: #009688; /* Teal color */
	    color: white;
	    font-size: 16px;
	    font-weight: bold;
	    border: none;
	    cursor: pointer;
	    margin-top: 20px;
	
	    /* 2. Curve Edges */
	    border-radius: 25px; /* Creates a nice, rounded shape */
	
	    /* 3. Smooth Transition for Hover Effects */
	    transition: 
	        background-color 0.3s ease-in-out,
	        transform 0.2s ease; /* Transition both color and size */
	}
	
	/* 4. Hover Effect: Change color and slightly expand */
	.custom-submit-button:hover {
	    background-color: #00695c; /* Darker teal on hover */
	    
	    /* Slightly expand the button for visual feedback */
	    transform: scale(1.03); 
	    
	    /* Optional: Add a subtle shadow */
	    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
	}
	
	
	/* Clear Button */
		.custom-clear-button {
	    /* 1. Basic Dimensions and Color */
	    padding: 10px 30px;   /* height width */
	    background-color: #009688; /* Teal color */
	    color: white;
	    font-size: 14px;
	    font-weight: bold;
	    border: none;
	    cursor: pointer;
	    margin-top: 15px;
	
	    /* 2. Curve Edges */
	    border-radius: 25px; /* Creates a nice, rounded shape */
	
	    /* 3. Smooth Transition for Hover Effects */
	    transition: 
	        background-color 0.3s ease-in-out,
	        transform 0.2s ease; /* Transition both color and size */
	}
	
	/* 4. Hover Effect: Change color and slightly expand */
	.custom-clear-button:hover {
	    background-color: #00695c; /* Darker teal on hover */
	    
	    /* Slightly expand the button for visual feedback */
	    transform: scale(1.03); 
	    
	    /* Optional: Add a subtle shadow */
	    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
	}
	
	/* Navigation Button */
		.custom-nav-button {
	    /* 1. Basic Dimensions and Color */
	    /* Sets the top and bottom padding to 6px (controls height)
       		and the left/right padding to 12px (controls width)
    	*/
    	padding: 6px 12px; 
	    /* background-color: #C82909; */ /* brown color */
	    background-color: #4CAF50; /* green color */
	    color: white;
	    font-size: 14px;
	    font-weight: normal;
	    border: none;
	    cursor: pointer;
	    margin-top: 12px;
	    text-decoration: none; /* <-- THIS IS THE KEY LINE to hide the underline in links */
	
	    /* 2. Curve Edges */
	    border-radius: 25px; /* Creates a nice, rounded shape */
	
	    /* 3. Smooth Transition for Hover Effects */
	    transition: 
	        background-color 0.3s ease-in-out,
	        transform 0.2s ease; /* Transition both color and size */
	}
	
	/* 4. Hover Effect: Change color and slightly expand */
	.custom-nav-button:hover {
	    /* background-color: #701705; */ /* Darker brown on hover */
	    background-color: #45a049; /* Darker green on hover */
	    
	    /* Slightly expand the button for visual feedback */
	    transform: scale(1.03); 
	    
	    /* Optional: Add a subtle shadow */
	    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
	}