.water-content {
    gap:10px;
}
.water-content section {
    min-height: 100px;
    min-width:100px;
    max-width:90%;
    padding:10px;
    outline: 2px solid black;
    border-radius: 4px;
}
.weather-gauges h2 {
    margin-top:0;
}
.water-content table {
    border-collapse: collapse;
    outline: 1px solid #151515;
    margin:0 auto;
}
.water-content th,
.water-content td {
    outline: 1px solid #000000;
    padding:5px;
    
}
.water-content h2,
.water-content h3 {
    text-align:center;
}
.water-content p {
    max-width:1000px;
    padding-right:10px;
    padding-left:10px;
}
.data-table .col-reading, 
.data-table .col-now {
    background-color:rgba(204, 230, 8, 0.747);
}

.data-table .col-standing {
    background-color:rgba(230, 160, 8, 0.747);
}
/*---SMALLER THAN-------------------*/
@media screen and (max-width:740px){
.water-content th,
.water-content td {
    font-size:smaller;
}

}



@media screen and (max-width:600px){
.water-content {
    width:100%;
    padding:0;
}
.water-content section {
    padding:0;
    max-width:100%;
}
.table-scroll {
    overflow-x:auto;
    outline:1px solid black;
}
.water-content table {
    width:98%;
}
.water-content th,
.water-content td {
    padding:3px;
}


}