/* Reset some default browser styles */
        body, html {
            margin: 0;
            padding: 0;
        }

        /* Apply a greenish background to the body */
        body {
            background: linear-gradient(to bottom, #c0eb34, #195905); /* Yellow/green to dark green gradient */
            font-family: Arial, sans-serif;
            color: #fff; /* Text color on the gradient background */
            display: flex;
            flex-direction: column;
            min-height: 100vh; /* Ensure a minimum viewport height to span the entire viewport */
        }

        /* Style the header */
        header {
            text-align: center;
            padding: 5px;
        }

        header h1 {
            font-size: 36px;
            margin-bottom: 5px;
        }

        header img {
            width: 600px; /* Adjust the width as needed */
            height: auto;
	    margin-top: 30px;	    
	    margin-bottom: 10px; /* Reduce the margin beneath the image */
	    border: 4px outset #195905; /* Dark green border */
        }

        /* Style the main content */
        main {
            flex: 1; /* Fill the remaining space */
            display: flex; /* Create a flex container for two columns */
            justify-content: space-between; /* Space between the columns */
            padding: 10px;
            max-width: 800px;
            margin: 10px auto; /* Center the columns horizontally */
        }

        /* Style individual columns */
        .column {
            flex: 1; /* Equal width for both columns */
  		font-size: 18px;
    		line-height: 1.5;
                text-align: center;
		padding: 5px;
        }

        /* Make the right column wider */
        .right-column {
            flex: 0.5; /* Adjust this value to make it wider */
  		font-size: 18px;
    		line-height: 1.5;
            text-align: center;
        }

	.right-column img {
    	max-width: 100%; /* Ensure the image doesn't exceed the column width */
    	height: auto;
 	border: 4px inset #195905; /* Dark green border */
	}

	/* Apply a style to the word within the span element */
	.bold-color-text {
    	font-weight: bold; /* Make the text bold */
    	color: #000000; /* Set the text color (dark green in this example) */
	}

        /* Style the footer */
        footer {
            text-align: center;
            padding: 10px;
            background-color: #27ae60; /* Darker green for the footer */
        }

        footer p {
            font-size: 14px;
            margin: 0;
        }

        /* Add hover effect for links */
        a {
            color: #fff; /* Links are white */
            text-decoration: none;
            transition: color 0.3s ease;
        }

        a:hover {
            color: #1abc9c; /* Change link color on hover */
        }
    </style>
