*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to right, rgba(0, 0, 255, 0.7), rgba(76, 0, 130, 0.7), rgba(128, 128, 128, 0.7)), url('/img/bgd.jpg')center/cover no-repeat;
}
.calculator{
    flex: 0 0 70%;

}
.screen{
    background-color: rgb(56, 55, 55);
    width: 100%;
    font-size: 6rem;
    padding: 0.2rem 1rem ;
    border: none;
    color: white;
    outline: none;
}
.buttons{
    display: flex;
    flex-wrap: wrap;
    transition: all 0.5s linear;
}
button{
    flex: 0 25%;
    border: 1px solid black;
    padding: 0.25rem 0;
    transition: all 2s ease;
    font-size: 4rem;
}
button:hover{
    background: blue;
    color: aliceblue;
}
.btn-yellow{
    background-color: rgba(234, 154, 5);
}
.btn-red{
    background: red;
}
.btn-green{
    background-color: green;
}
.btn-grey{
    background: grey;
}

@media (max-width: 426px) {
    * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
    
        body {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
           background: linear-gradient(to right, rgba(0, 0, 255, 0.7), rgba(76, 0, 130, 0.7), rgba(128, 128, 128, 0.7)), url('/img/bgd.jpg')center/cover no-repeat;
        }
    
        .calculator {
            flex: 0 0 100%;
            height: 100%;
            
    
        }
    
        .screen {
            background-color: rgb(56, 55, 55);
            width: 100%;
            font-size: 4rem;
            padding: 0.2rem 1rem ;
            border: none;
            color: white;
            outline: none;
        }
    
        .buttons {
            display: flex;
            flex-wrap: wrap;
            transition: all 0.5s linear;
        }
    
        button {
            flex: 0 25%;
            border: 1px solid black;
            padding: 0.25rem ;
            transition: all 2s ease;
            font-size: 3.1rem;
        }
    
        button:hover {
            background: blue;
            color: aliceblue;
        }
    
        .btn-yellow {
            background-color: rgba(234, 154, 5);
        }
    
        .btn-red {
            background: red;
        }
    
        .btn-green {
            background-color: green;
        }
    
        .btn-grey {
            background: grey;
        }
}