#calculator {
    position: relative;
    background-color: gray;
    left: 36vw;
    top: 5vw;
    border: 0.2vw solid black;
    border-radius: 2vw;
    width: 25vw
}

#display {
    width: 22vw;
    height: 3vw;
    margin: 1vw;
    background-color: rgba(156, 156, 232, 0.539);
    font-size: 2em;
}

.buttonContainer {
    border: 0.2vw solid gray;
    border-radius: 2vw;
    margin: 1vw;
    display: grid;
    grid-template-columns: auto auto auto;
    justify-content: center;
}

.button {
    height: 3vw;
    width: 4vw;
    margin: 1vw;
}

.result {
    background-color: orange;
    border: transparent;
}

.font {
    font-size: 1vw;
}

@media screen and (max-width:1200px) {
    #calculator {
        left: 0;
        top: 0;
        border-radius: 2%;
        width: 100%;
        height: 70vh;
        padding: 20px 0px;
    }

    #display {
        width: 80%;
        height: 5%;
        margin: 5% 6%;
        font-size: 1.5rem;
    }

    .buttonContainer {
        border: 0.2px solid gray;
        border-radius: 2%;
        margin: 1vw;
        display: grid;
        grid-template-columns: auto auto auto;
        grid-gap: 20px;
        justify-content: center;
        flex-wrap: wrap;
    }

    .button {
        height: 4vh;
        width: 15vw;
        margin: 1vw;
        font-size: 1rem;
    }
}