:root {
    --dark-grey: #3f3f3f;
    --grey: #a1a1a1;
    --font-white-color: #c3c3c3;
    --orange: rgba(255, 166, 0, 0.74);
    --calculator-inside-backg: #1b1b1b;
}
body {
    background-image: radial-gradient(at 40% 20%, hsla(28, 100%, 74%, 1) 0, transparent 50%),
    radial-gradient(at 80% 0%, hsla(189, 100%, 56%, 0.8) 0, transparent 50%),
    radial-gradient(at 0% 50%, hsla(355, 85%, 93%, 1) 0, transparent 50%),
    radial-gradient(at 80% 50%, hsla(340, 100%, 76%, 1) 0, transparent 50%),
    radial-gradient(at 0% 100%, hsla(22, 100%, 77%, 1) 0, transparent 50%),
    radial-gradient(at 80% 100%, hsla(242, 100%, 70%, 0.8) 0, transparent 50%),
    radial-gradient(at 0% 0%, hsla(343, 100%, 76%, 0.9) 0, transparent 50%);
    /* radial-gradient(at (position of center from the left) (position of center from the top), color) */
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    overflow: hidden;
}

#cal-container {

    background-color: var(--calculator-inside-backg);
    border: 1.5px solid var(--font-white-color);
    border-radius: 25px;
    box-shadow: 3px 3px 10px 1px ;
    /*none(default)| h-offset(+ for right, - for left)(required), v-offset(+ for below, - for above)(required),
     blur(optional), spread(of blur)(optional), color(optional), inset(optional), initial(set to default), inherit(from parent element) */
    display: flex;
    flex-direction: column;
    padding: 80px 10px 15px 10px;
    max-width: 280px;
    
}


input {
    background-color: transparent;
    color: var(--font-white-color);
    text-align: end;
    border: 0px;
    font-size: 4rem;
    width: 100%;
}



button {
    cursor: pointer;
    border: 0px;
}


.btn-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 7px;
} 

.btn {
    display: flex;
    justify-content: center;
    align-items: center;   
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 20px;
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}

/* .btn:hover {
    transform: translate(-2px, -3px);
} */

/* .btn.active {
    background-color: #ffffff;
    color: #f69906;
} */
 
/* button colours-> font and backG  also hover*/
.btn-grey {
    color: var(--dark-grey);
    background-color: var(--grey);
}

.btn-grey:hover {
    background-color: #ededed;
    color: black;
}

.btn-dark-grey {
    color: var(--font-white-color);
    background-color: var(--dark-grey);
}

.btn-dark-grey:hover {
    background-color: #999999;
    color: white;
}

.btn-orange {
    color: var(--font-white-color);
    background-color: var(--orange);
}

.btn-orange:hover {
    background-color: orange;
    color: white;
}

/* make zero button larger than the others */
button[value="0"] {
    flex-grow: 0.6;
    border-radius: 30px;
}