*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: serif;
    

}

#container{
    width: 100%;
    height: 100vh;
    background-color: #e3f9ff;
    display: flex;
    justify-content: center;
    align-items: center;
    
}
.calculator{
    background: #3a4452;
    padding: 20px;
    border-radius: 10px;
}


.calculator form input{
    border:0;
    outline: 0;
    width: 60px;
    height: 60px;
    border-radius: 10px;
    box-shadow:  -8px -8px 15px rgba(195, 204, 206, 0.1),5px 5px 15px rgba( 0, 0,0, 0.2);
    background: transparent;
    font-size: 20px;
    cursor: pointer;
    margin: 10px ;
    color: #fff;
}

form .display{
    display: flex;
    justify-content: flex-end;
    margin: 20px 0;
}

form .display input {
    text-align: right;
    flex: 1;
    font-size: 45px;
    box-shadow: none;
}

form input.equal{
    width:145px ;
     color: #33ffd8;
}

form input.operator{
    color: #33ffd8;

}

/* Responsive Design */

        /* Mobile (up to 767px) */
        @media (max-width: 767px) {
            .calculator-container {
                padding: 15px;
                border-radius: 15px;
            }
            
            .display {
                height: 100px;
                padding: 15px;
            }
            
            .previous-operation {
                font-size: 1rem;
            }
            
            .current-operation {
                font-size: 2rem;
            }
            
            .button {
                height: 60px;
                font-size: 1.3rem;
            }
            
            .buttons-grid {
                gap: 10px;
            }
            
            .device-icon:nth-child(1) {
                opacity: 1;
                color: #4cd964;
            }
        }

        /* Tablet (768px to 1023px) */
        @media (min-width: 768px) and (max-width: 1023px) {
            .calculator-container {
                max-width: 450px;
                padding: 25px;
            }
            
            .display {
                height: 130px;
                padding: 25px;
            }
            
            .current-operation {
                font-size: 2.8rem;
            }
            
            .button {
                height: 75px;
                font-size: 1.6rem;
            }
            
            .device-icon:nth-child(2) {
                opacity: 1;
                color: #4cd964;
            }
        }