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

body{
    background: linear-gradient(to right, #00ffff, #6663ff)
}

.up{
    padding-top: 100px;
    padding-bottom: 100px;
}

.down{
    padding-top: 100px;
    padding-bottom: 100px;
}

.overlay{
    display: grid;
    place-items: center;
}

.one, .two, .three, .four, .five, .six, .seven, .eight, .nine, .times, .plus, .minus, .zero, .dot, .devide, .backspace{
    font-family: 'Bungee', cursive;
    width: 100px;
    height: 100px;
    border: none;
    background-color: black;
    color: white;
    border: 1px solid white;
    font-size: 25px;
}

.one:hover, .two:hover, .three:hover, .four:hover, .five:hover, .six:hover, .seven:hover, .eight:hover, .nine:hover, .times:hover, .plus:hover, .minus:hover, .zero:hover, .dot:hover, .devide:hover, .backspace:hover{
    background-color: rgba(255, 255, 255, 0.8);
}

.delete-all, .equal{
    font-family: 'Bungee', cursive;
    width: 200px;
    height: 100px;
    border: none;
    background-color: rgb(210, 18, 46);
    color: white;
    border: 1px solid white;
    font-size: 25px;
}

.delete-all:hover, .equal:hover{
    background-color: rgba(210, 18, 46, 0.8);
}

.display{
    font-family: 'Bungee', cursive;
    background-color: rgb(210, 18, 46);
    width: 400px;
    height: 150px;
    border: 1px solid white;
    padding: 10px;
}

.preview{
    text-align: right;
    color: white;
    font-size: 20px;
    word-break: break-all;

}

.result{
    text-align: right;
    color: white;
    font-size: 35px;
    word-break: break-all;
}

@media (max-width: 450px) {
    .one, .two, .three, .four, .five, .six, .seven, .eight, .nine, .times, .plus, .minus, .zero, .dot, .devide, .backspace{
        width: 80px;
        height: 70px;
        font-size: 15px;
    } 

    .delete-all, .equal{
        width: 160px;
        height: 70px;
        color: white;
        font-size: 15px;
    }

    .display{
        width: 320px;
        height: 100px;
        padding: 10px;
    }

    .preview{
        font-size: 10px;
    }

    .result{
        font-size: 20px;
    }
}