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

/* Shake animations */
@keyframes shake-1 {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-1px); }
}

@keyframes shake-2 {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-2px); }
}

@keyframes shake-3 {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-3px); }
}

@keyframes shake-4 {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-4px); }
}

@keyframes shake-5 {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-5px); }
}

/* Shake effects */
.shake-1 { animation: shake-1 0.5s linear infinite !important; }
.shake-2 { animation: shake-2 0.5s linear infinite !important; }
.shake-3 { animation: shake-3 0.5s linear infinite !important; }
.shake-4 { animation: shake-4 0.5s linear infinite !important; }
.shake-5 { animation: shake-5 0.5s linear infinite !important; }

/* Overlay to simulate water effect */
#waterOverlay {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 105, 255, 0.6);
    z-index: 10;
    transition: height 0.5s ease-in-out;
    height: 0%; /* Initial minimal height to not cover the page */
}


#Title {
    padding: 20px;
    margin-top: 15%;
}

            h1{
                font-size: 3vw;
                font-weight: 800;
                text-align: center;

            }

            h2{
                font-size: 2vw;
                font-weight: 100;
                text-align: center;
                margin-bottom: 10%;

                margin-left: 3%;
                margin-right: 3%;
            }

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

#climateData {
    margin-bottom: 5%;
    margin-left: 3%;
    margin-right: 3%;
    color: #8f8f8f;
}

#explanation {
    font-size: 2vw;
    font-weight: 100;
    text-align: center;
    margin-top: 13%;
    margin-bottom: 5%;
}

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

#contentArea {
    padding: 20px;
}

            #contentArea h1 {
                padding: 20px;
                font-size: 2vw;
                font-weight: 800;
                text-align: center;
                color: #8f8f8f;
                margin-top: 11%;
            }

            #contentArea h2 {
                font-size: 1vw;
                font-weight: 100;
                text-align: center;
                margin-bottom: 10%;

                margin-left: 3%;
                margin-right: 3%;
            }

            #contentArea h3 {
                font-size: 1vw;
                font-weight: 100;
                text-align: center;

                margin-left: 25%;
                margin-right: 25%;

            }

            #contentArea h4 {
                font-size: 1.5vw;
                font-weight: 500;
                text-align: center;

                margin-left: 2%;
                margin-right: 2%;
            }

            #contentArea h5 {
                font-size: 1.5vw;
                font-weight: 100;
                text-align: center;

                margin-left: 15%;
                margin-right: 15%;
            }

            #contentArea h6 {
                font-size: 1vw;
                font-weight: 100;
                text-align: center;

                margin-top: 10%;
                margin-left: 25%;
                margin-right: 25%;
            }



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