body {
    background-color: purple;

}

#cal {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-rows: 20% 13% 12% 12% 12% 12% 2% 15%;
    background-color: black;

    /* v0 */
    /* padding: 3%; */
    /* margin: auto; */
    /* width: 230px; */
    /* v1 */
    /* width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    padding: 13%; */
    /* v2 */
    width: 12.5%;
    padding: 1% ;
}

#flex {
    display: flex;
    justify-content: center;
}

button {
    font-size: 1.75em;
    border-radius: 10%;
    padding: 0;
}

p {
    color: white;
    font-size: 1.2em;
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 8;
    grid-row-end: 9;

    margin: 0;
    margin-left: 0;
    padding-top: .7em;
    padding-left: .3em;
    background-color: red;
}

#display {
    grid-column-start: 1;
    grid-column-end: 5;

    font-size: 2.5em;
}

input {
    margin-bottom: 3%;
    background-color: white;
}

#Equals {
    grid-column-start: 3;
    grid-column-end: 5;
}

/* .col4{
    grid-column-start: 4;
    grid-column-end: 5;
} */

/* #right-hand-side {
    grid-column-start: 4;
    grid-column-end: 5;
} */

/*CLASSES*/

/* .row, .col and Div boundries
div{
    border: white;
}

.row{
    border: red;
}

.col {
    border: black;
}
*/

/* FLEX */

/* FLOAT & CLEAR
.col {}

.row {}
*/

/* GRID */


/*ID*/
@media screen and (max-width: 1445px) {
    #cal {
        width: 20%;
        padding: 1%;
    }
}

@media screen and (max-width: 1030px) {
    #cal {
        width: 27%;
        padding: 1%;
    }
}

@media screen and (max-width: 430px) {
    #cal {
        width: 80%;
        padding: 1%;
        }
}