* {
    box-sizing: border-box
}

.container {
    width: 100%;
    background-color: #ddd;
}

.skills {
    text-align: right;
    padding-top: 10px;
    padding-bottom: 10px;
    color: white;
}

.bar {
    width: 1%;
    background-color: rgb(27, 124, 216);
}

#waterlevel {
    display: none;
}

#waterindicator {
    text-align: center;
}

input[type=number] {
    width: 140px;
    border-radius: 5px;
    padding: 3px 12px;
    border: 3px solid #2f3966;
    -moz-outline-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 7px;

}

button,
input[type=button],
input[type=submit] {
    background-color: #0084ff;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 7px;
    font-family: Georgia,
        'Times New Roman',
        Times,
        serif;
    cursor: pointer;
    padding: 3px 12px;
    border: 3px solid #1833ab;


}

input[type=button]:hover,
input[type=submit]:hover {
    background-color: #9da0df80;
}