/* Header + Body + Footer */
    body {
        margin: 0;
		color: #000000;
        font-family: Arial, sans-serif;
		background-repeat: no-repeat;
		background-size: 100% 100%;
    }
    .top-bar, .bottom-bar {
        color: #000000;
		background-color: #cccccc;
        text-align: center;
        padding: 10px;
        position: fixed;
        width: 100%;
        z-index: 1000;
    }
    .top-bar {
        top: 0;
    }
    .bottom-bar {
        bottom: 0;
    }
	html {
		height: 100%
	}	

	/* Main logo */
	.logo-container {
		display: flex;
		justify-content: center; 	  /* horizontal alignment */
		/* align-items: center; */    /* vertical alignment */
		width: 100%;
		/* height: 100vh; */          /* browser height */
	}

	.logo-container img {
		max-width: 100%;
		height: auto;
	}

    .content {
        padding-top: 50px; /* Adjust according to the height of the top bar */
        padding-bottom: 50px; /* Adjust according to the height of the bottom bar */
        text-align: center;
        margin: auto;
    }
	
    p {
        margin: 20px 0;
    }
	
	a {
		color: #000000; 
		text-decoration: none;
	}
	a:hover {
		color: #52cbec;
		text-decoration: none;
	}

	.legend-container {
		display: flex;
		justify-content: center;
		width: fit-content;
		margin: 0 auto;
	}

	/* Keeps bars and labels together */
	.legend {
		display: inline-flex;
		flex-direction: column;
	}

	/* Four bars in one row */
	.colorbars {
		display: flex;
		align-items: center;
	}

	/* Individual bars */
	.colorbar {
		width: 175px;
		height: 5px;
	}

	/* Gap between the two groups */
	.spacer {
		width: 40px;
	}

	/* Labels */
	.labels {
		display: flex;
		margin-top: 6px;
	}

	.label {
		width: 350px;           /* 2 × 175px bars */
		text-align: center;
	}
	
	.labels .label:first-child {
		margin-right: 40px;     /* same width as spacer */
	}

	.green  { background: #b5e61d; }
	.blue   { background: #52cbec; }
	.orange { background: #ffc100; }
	.red    { background: #ed1c24; }

	.bold {
		font-weight: bold;
	}