body {
    height: 100vh;
    display: flex;
    justify-content: center;
    background-image: url(https://media.istockphoto.com/photos/pink-gum-balls-picture-id173871978?k=20&m=173871978&s=612x612&w=0&h=SFUINd8F16BYhyIPw-WJbPFyKMmTaNAmQAILVP8IlH0=);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}



#calculator {
    font-family: "Afacad Flux", sans-serif;
    background-color: rgb(236, 82, 146);
    border-radius: 15px;
    max-width: 500px;
    max-length: 100%;
    overflow: hidden;
    margin: auto;
    border-style: solid;
    border-color: black;

}

#display {
    width: 100%;
    padding: 20px;
    font-size: 5rem;
    text-align: left;
    border: none;
    color: black;
    background-color:rgb(255, 178, 197);
}

#buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 20px;
 
}

button {
    width: 100%;
    height: 100%;
    text-align: center;
    border-radius: 20px;
    color: white;
    background-color: rgb(192, 0, 74);
    font-size: 3rem;
    font-family: "Afacad Flux", sans-serif;
    cursor: pointer;
}
button:hover {
    background-color: rgba(255, 0, 34, 0.733);
}
button:active {
    background-color: rgb(255, 51, 78);
}

.left {
    background-color: black;
}
.left:hover {
background-color: rgb(20, 20, 20);
}
.left:active {
    background-color: rgb(58, 58, 58);
    }