@import url('https://fonts.googleapis.com/css2?family=Anton&family=Kanit:ital,wght@0,300;0,400;0,600;1,800&family=League+Gothic&family=Ramaraja&family=Shizuru&family=Syne+Mono&display=swap');
/* font-family: 'Ramaraja', serif; */

:root {
    --back-ground-color: rgba(34, 240, 240, 0.685);
    --button-color: rgba(41, 39, 39, 0.74);
}

* {
    width: auto;
    margin: 0;
    padding: 0;
    height: auto;
}

body {
    /* width: fit-content;
    height: fit-content; */
    background-color: var(--back-ground-color);
    border-radius: 40px;
    margin-top: 4%;
    margin-left: 15%;
    margin-right: auto;
    /* overflow-y: hidden; */
}

.container {
    max-width: 400px;
    margin: 10vh auto 0 auto;
    box-shadow: 0px 0px 43px 17px var(--button-color);
}

#display {
    background-color: azure;
    text-align: right;
    height: 80px;
    padding: 16px 8px;
    font-size: 25px;
    border: 0.5px solid bisque;
    border-top: 1px solid bisque;
}

.buttons {
    display: grid;
    border-bottom: 1px solid bisque;
    border-left: 1px solid bisque;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.buttons>div {
    border-top: 1px solid bisque;
    border-right: 1px solid bisque;
}

.button {
    border: 0.5px solid bisque;
    line-height: 80px;
    text-align: center;
    font-size: 25px;
    cursor: pointer;
}
#equal{
    background-color: blue;
    color: white;
}
.button:hover{
    background-color: var(--button-color);
    color: white;
    transition:0.5s ease-in-out;
}