body, html {
    height: 100%;
    margin: 0;
	font-family: Helvetica, sans-serif;
    color: white;
    background-color: #333; 
}

.normal { color: green; }
.low-risk { color: blue; }
.moderate-risk { color: yellow; }
.high-risk { color: orange; }
.very-high-risk { color: red; }

#waterOverlay {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 105, 255, 0.6); /* Light blue to simulate water */
    z-index: 10;
    transition: height 0.5s ease-in-out;
}

/* Initial minimal height to not cover the page */
#waterOverlay { height: 0%; }



.stuff {
    text-align: center;
    margin-bottom: 30%;
}

#climateData{
    margin-bottom: 30%;
    margin-left: 3%;
    margin-right: 3%;
}

#contentArea {
    padding: 20px;
}

.data-row {
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
    font-size: 3vw;
}

h1 {
	font-size: 3vw;
	font-style: bold;
	font-weight: 800;
	text-align: center;
    margin-top: 20%;
}

h2 {
    color: rgba(255, 255, 255, 0.744);
	font-size: 2vw;
	font-style: normal;
	font-weight: 100;
	margin-bottom: 10%;
	text-align: center;
}

h3 {
	font-size: 1vw;
	font-weight: 800;
	text-align: center;
}

h4 {
	font-size: 2vw;
    font-style: normal;
	font-weight: 100;
	text-align: center;
    margin-top: 20%;
    color: rgba(255, 255, 255, 0.744);
}

h5 {
	font-size: 2vw;
    font-style: normal;
	font-weight: 100;
	text-align: center;
}

h6 {
	font-size: 1vw;
	font-style: bold;
	font-weight: 800;
	text-align: center;
    color: rgba(255, 255, 255, 0.744);
}

footer {
	font-size: 1vw;
	font-style: bold;
	font-weight: 800;
	text-align: center;
    color: rgba(255, 255, 255, 0.744);
    margin-top: 20%;
    margin-bottom: 100%;
}