body {
    margin: 0;
    min-height: 100%;
    display: grid;
    grid-template-columns: 1fr minmax(100px, 1180px) 1fr;
    grid-template-rows: min-content min-content min-content 1fr auto;
    grid-template-areas:
    "top    top     top"
    "header header  header"
    "alert  alert   alert"
    "main   main    main"
    "footer footer  footer";
}

html {
    height: 100%;
}

.whole-page-layout-grid--body {
    grid-area: b;
    padding-left: 20px;
    padding-right: 20px;
}

* {
    box-sizing: border-box;
}

/*TO REMOVE THE UP AND DOWN ARROWS FROM NUMBER INPUTS*/
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}