/* MODERN CALCULATOR
   Developed by Ashif Khan */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* CSS Variables */

:root{

    --primary:#4facfe;
    --secondary:#00f2fe;
    --operator:#ff9800;
    --operator-hover:#f57c00;
    --clear:#ff3b30;
    --clear-hover:#d63031;
    --delete:#8e44ad;
    --delete-hover:#6c3483;
    --equal:#2ecc71;
    --equal-hover:#27ae60;
    --text:#ffffff;
    --glass:rgba(255,255,255,.15);
    --glass-border:rgba(255,255,255,.20);
    --shadow:
        0 15px 35px 
        rgba(0,0,0,.30);
    --transition:.25s ease;
}

/* Global Reset */

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow-x:hidden;
    background: linear-gradient(
     -45deg,
     #0f2027,
     #203a43, 
     #2c5364, 
     #4facfe

     );
    background-size:400% 400%;
    animation:gradientBG 12s ease infinite;
}

/* Animated Background */

@keyframes gradientBG{

    0%{
        background-position:0% 50%;
    }

    50%{
        background-position:100% 50%;
    }

    100%{
        background-position:0% 50%;
    }

}

/* Main Container */

.container{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:20px;
}

/* Calculator Card */

.calculator{

    width:360px;
    padding:28px;
    border-radius:28px;
    background:var(--glass);
    border:1px solid var(--glass-border);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    box-shadow:var(--shadow);
}

/* Heading */

.title{

    color:var(--text);
    text-align:center;
    font-size:1.7rem;
    font-weight:600;
    letter-spacing:.5px;
    margin-bottom:22px;
    text-shadow:
    0 2px 10px rgba(0,0,0,.25);
}
/* Display */

#display{

    width:100%;
    height:75px;
    border:none;
    outline:none;
    border-radius:18px;
    background:rgba(255,255,255,.18);
    color:var(--text);
    text-align:right;
    font-size:2.2rem;
    font-weight:600;
    padding:20px;
    margin-bottom:22px;
    box-shadow:
        inset 0 3px 10px rgba(0,0,0,.25);
    transition:var(--transition);
}

#display::placeholder{
    color:rgba(255,255,255,.8);
}

#display:focus{
    box-shadow:
        inset 0 3px 10px rgba(0,0,0,.25),
        0 0 10px rgba(79,172,254,.35);
}

/* Buttons Grid */

.buttons{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;
}

/* Base Button */

button{
    height:65px;
    border:none;
    outline:none;
    border-radius:16px;
    cursor:pointer;
    font-size:1.2rem;
    font-weight:600;
    color:var(--text);
    background:rgba(255,255,255,.15);
    box-shadow:
        0 8px 18px rgba(0,0,0,.18);
    transition:
        transform .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}

/* Hover Animation */

button:hover{
    transform:
        translateY(-4px)
        scale(1.04);
    box-shadow:
        0 12px 22px rgba(0,0,0,.28);
}

/* Active Animation */

button:active{
    transform:scale(.94);
}

/* Keyboard Accessibility */

button:focus-visible{
    outline:3px solid rgba(255,255,255,.45);
    outline-offset:3px;
}

/* Number Buttons */

button:not(.operator):not(.equal):not(.clear):not(.delete){
    background:rgba(255,255,255,.18);
}
button:not(.operator):not(.equal):not(.clear):not(.delete):hover{
    background:rgba(255,255,255,.25);

}

/* Operator Buttons */

.operator{
    background:var(--operator);
}
.operator:hover{
    background:var(--operator-hover);
}

/* Clear Button */

.clear{
    background:var(--clear);
}

.clear:hover{
    background:var(--clear-hover);
}

/* Delete Button */

.delete{
    background:var(--delete);
}
.delete:hover{
    background:var(--delete-hover);
}

/* Equal Button */

.equal{
    background:var(--equal);
}

.equal:hover{
    background:var(--equal-hover);
}

/* Zero Button */

.zero{
    grid-column:span 2;
}
/* Footer */

.footer{
    margin-top:22px;
    text-align:center;
    color:rgba(255,255,255,.9);
    font-size:.88rem;
    font-weight:400;
    letter-spacing:.3px;
    user-select:none;
}

.footer strong{
    font-weight:600;
    color:#ffffff;
}

/* Smooth Fade Animation */

.calculator{
    animation:fadeUp .7s ease;
}

@keyframes fadeUp{

    from{
        opacity:0;
        transform:
            translateY(30px)
            scale(.96);
    }

    to{
        opacity:1;
        transform:
            translateY(0)
            scale(1);
    }

}

/* Responsive */

@media (max-width:480px){
    .container{
        padding:15px;
    }

    .calculator{
        width:100%;
        padding:22px;
        border-radius:22px;

    }

    .title{
        font-size:1.5rem;
    }

    #display{
        height:70px;
        font-size:2rem;
        padding:18px;
    }

    button{
        height:60px;
        font-size:1.1rem;
    }

}

@media (max-width:360px){
    .calculator{
        padding:18px;
    }

    .buttons{
        gap:12px;
    }

    button{
        height:55px;
        font-size:1rem;
    }

    #display{
        font-size:1.7rem;
        height:65px;
    }

}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
    *{
        animation:none !important;
        transition:none !important;
        scroll-behavior:auto !important;
    }

}

/* Selection Color */

::selection{
    background:rgba(79,172,254,.35);
    color:#ffffff;
}

/* Scrollbar */

::-webkit-scrollbar{
    width:8px;
}

::-webkit-scrollbar-track{
    background:#203a43;
}

::-webkit-scrollbar-thumb{
    background:#4facfe;
    border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
    background:#00c6ff;
}