* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(top-view-wooden-desk-with-notebooks-copy-space.jpg);
    background-size: cover;
    background-position: right;

}

#mainContainer {
    content: "";
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction:column;
    
    min-height: 600px;
    border: none;
    box-shadow: 0px 0px 5px;
    max-width: 500px;
    width: 90vw;
    min-width: 320px;
    border-radius: 40px;
    background: rgb(145, 234, 240, .0);
    filter: brightness(1.1);

    box-shadow:    inset 0px 4px 5px rgba(255,255,255, 1),
                    inset 0px -4px 5px rgba(0,0,0, 6),
                    0px 10px 30px rgba(0,0,0, 0.25);
                

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: hidden;
    
}

#mainContainer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 45%;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, .2),
        rgba(255, 255, 255, 0)
    );
    z-index: 2;
    pointer-events: none;
}

#mainContainer::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: radial-gradient(
        ellipse at center,
        rgba(255, 255, 255, .15),
        transparent
    );
    z-index: 2;
    pointer-events: none;
}

#screenContainer {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    flex-direction: column;
    margin-bottom: 1rem;
    margin-top: 2rem;
    height: 25%;
    min-height: 120px;
    width: 90vw;
    max-width: 450px;
    border: 1px rgba(106, 181, 190, 0.274);
    box-shadow:    inset 0px 4px 5px rgba(255,255,255, .3),
                    inset 0px -4px 5px rgba(0,0,0, .2),
                    0px 10px 40px rgba(0,0,0, 0.25);
                 
    
    border-radius: 30px;
    font-size: 72px;
    padding: 0 20px;
    background: rgb(135, 153, 172, .05);
    z-index: 3;
    overflow: hidden;
}


#buttonContainer {
    display: flex;
    height: auto;
    
    max-height: 450px;
    width: 100%;
    max-width: 450px;
    flex-wrap: wrap;
    border: 1px rgba(106, 181, 190, 0.274);
    gap: 12px;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
    border-radius: 40px;
    padding-top: 2.5%;
    padding-bottom: 2.5%;
    box-shadow: inset  0px 6px 10px rgba(0,0,0, .4) ,
                inset  0px -6px 10px rgba(255,255,255, .2),
                0px 10px 40px rgba(0,0,0, .25);
                
                
    background: rgb(130, 227, 240, .05);
    z-index: 3;
}

#buttonContainer::before,
#buttonContainer::after {
    content: "";
    position: absolute;
    top: 59%;
    width: .25%;
    height: 30%;
    background: radial-gradient(
        ellipse at center,
        rgba(255, 255, 255, 0.37),
        transparent
    );
    pointer-events: none;
    z-index: 1;
    filter: blur(1px);
}

#buttonContainer::before {
    left: 5.6%;
    transform: translateY(10%);
    
}

#buttonContainer::after {
    right: 5.6%;
    transform: translateY(10%);
}



button {
    content: "";
    position: relative;
    height: 75px;
    width: 75px;
    border-radius: 60%;
    font-size: 25px;
    box-shadow: 0px 2px 4px,
              inset 0px -2px 4px;
    filter: brightness(2);
    border: none;
    
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
overflow: hidden;
z-index: 1;
cursor: pointer;

}

button::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    
    background: radial-gradient(
        ellipse at 50% 0%,
        rgba(255, 255, 255, .4),
        rgba(255, 255, 255, 0),
        transparent
    );
    

    pointer-events: none;
    z-index: 2;
}

button::after {
    content: "";
    position: absolute;
    bottom: 0%;
    left: 0%;
    width: 100%;
    height: 50%;
    background: radial-gradient(
        ellipse at center,
        rgba(0, 0, 0, .1 ),
        transparent
    );
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
}

button:active {
    transform: scale(.97);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .2),
                0 1px 1px rgba(255, 255, 255, .1);
    
}

button:hover {
    animation: lightSweep 1.5s ease-in-out;
}

button:focus {
    outline:none;
}

#one, #two, #three, #subtract {
    background: rgb(145, 234, 240, .1);
    filter: brightness(1.2);
}

#mrc, #mMinus, #mPlus, #squareRoot, #percent {
    background: rgb(52, 148, 155, .1);
} 

#arrow, #seven, #eight, #nine, #divide {
    background: rgb(176, 98, 44, .1);
}

#ce, #ac {
    background: rgb(240, 97, 0, .1);
    filter: brightness(1);
}

#four, #five, #six, #multiply {
    background: rgb(46, 68, 70, .1);
}

#zero, #doubleZero, #decimal, #equal, #addition {
    background: rgb(112, 79, 56, .1);
}