styles1.css

.calculator {
    padding: 2%;
    border-radius: 1em;
    max-width: 400px;
    margin: auto;
    background-color: #191b28;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

.display-box {
    font-family: 'Orbitron', sans-serif;
    background-color: #dcdbe1;
    border: solid black 0.5px;
    color: black;
    border-radius: 5px;
    width: 100%;
    height: 65%;
   
}

input[type=button] {
    font-family: 'Orbitron', sans-serif;
    background-color: #64278f;
    color: white;
    border: solid black 0.5px;
    width: 100%;
    border-radius: 5px;
    height: 10%;
    outline: none;
}

@media (max-width: 600px) {
    .calculator {
        width: 80%;
    }

    .display-box {
        height: 50%;
    }

    input[type=button] {
        height: 15%;
    }
}