body {  /*body apearance and stylings.*/
    background-image: url("./images/table.png"); 
    /* background-color: gray; */
    background-size: cover;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bold;
    text-align: center;
    /* border: 2px solid #ccc; */
    padding-top: 10px;
    padding-bottom: 10px;
    /* font-weight: bold; */
    margin-bottom: 5px;
    border-radius: 5px;
    max-width: 600px;
    min-width: 400px;
    margin: auto;
    margin-top: 10%;
    margin-bottom: 10%;
}

.card {
    text-align: center;
    /* border: 2px solid #ccc; */
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: bold;
    /* width: 400px; */
    /* margin-bottom: 5px; */
    border-radius: 5px;
    background-color: lightgray;
    /* background-size: 50%; */
    max-width: 400px;
    min-width: 300px;
    margin: auto;
    margin-top: 10%;
    margin-bottom: 10%;
}

h1 {    /*h1 tags of our HTML.*/
    margin-top: 10px;
    margin-bottom: 10px;
}

h2 {    /*h2 tags of our HTML.*/
    font-size: 50px;
    margin-top: 0;
    margin-bottom: 20px;
}

button {    /*Botton styling*/
    border: none;
    padding-top: 10px;
    padding-bottom: 10px;
    color: whitesmoke;
    font-weight: bold;
    width: 100px;
    margin-bottom: 5px;
    border-radius: 5px;
}

#increment-btn {    /*incimenation button styleing.*/
    background: darkred;
}

#save-btn {     /*save button styling.*/
    background: darkgreen;
}

#reset-btn {
    background: darkblue;
}