* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    user-select: none;
    border: none;
}

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #1d1b1f;
    /* background: #3c3c3c; */
    position: relative;
}





/* they are for background colorful display */

#outerGradi {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: -1;
    filter: blur(100px);
    background-color: #000;
}

.inner-Gradi {
    border-radius: 999px;
    position: absolute;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    transform: scale(.6);
    background-color: #000;
}

/* animation for bottom div. */
@keyframes spinIt {
    0% {
        transform: rotate(0deg) scale(2);
    }

    100% {
        transform: rotate(1turn) scale(2);
    }
}

.inner-Gradi div {
    position: absolute;
    width: 100vw;
    height: 100vh;
    background: conic-gradient(from 0deg, red, orange, white, yellow, green, lime, blue, lightblue, purple, pink, red);
    animation: spinIt 8s linear infinite;
}





/* Calculator Body Starts from here */

.calcuBody {
    padding: 20px;
    border-radius: 36px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;

    background: rgba(255, 255, 255, .28);
    backdrop-filter: url(#frosted);
    -webkit-backdrop-filter: url(#frosted);
}

/* Calculator Display aka input */
#display {
    grid-column: span 4;
    padding: 60px 10px 30px;
    margin-bottom: 10px;
    border-radius: 20px;
    text-align: right;
    font-size: xx-large;
    color: #fff;
    background-color: #262632e1;
}

button {
    font-size: x-large;
    color: #2383c2;
    background-color: #2f2f37;
    border-radius: 20px;
    padding: 20px;
    cursor: pointer;
}

button:hover {
    color: #78c6f9;
    background-color: #3f3f3f;
}

.s-Symbol,
.symbol,
.equal {
    color: #fff;
}

.s-Symbol:hover,
.symbol:hover,
.equal:hover {
    color: #fff;
}

.s-Symbol {
    background-color: #7a7b7d;
}

.s-Symbol:hover {
    background-color: #5a5a5b;
}

.symbol {
    background-color: #025cb1;
}

.symbol:hover {
    background-color: #0278e6;
}

.zero {
    grid-column: span 2;
}

.equal {
    background-color: #2594fc;
    grid-row: span 2;
}

.equal:hover {
    background-color: #025cb1;
}

/* Calculator Body Ends here */





/* just to adjust color/background for small screen size */
@media (max-width: 500px) {
    .inner-Gradi {
        transform: scale(.8);
    }
}