body {
    background-color: slategray;
}

.container {
    width: 30vw;
    font-family: sans-serif;
    color: white;
    background-color: grey;
    position: absolute;
    left: 10%;
    top: 10%;
    font-weight: 700;
    display: grid;
    grid-template-areas:
    "results results results results" 
    "C C X div"
    "seven eight nine mult"
    "four five six min"
    "one two three plus"
    "z z dot eq"
}


.buttons {
    padding: 2.5rem;
    font-size: 26px;
    background-color: #444;
    border: 3px solid #666;
}

.buttons:hover {
    opacity: 0.8;;
}

.results {
    grid-area: results;
    border-top: 6px solid #666;
    border-left: 6px solid #666;
    border-right: 6px solid #666;
    overflow: auto;
}

.results:hover {
    opacity: 1;
}

.button-c {
    grid-area: C;
    border-left: 6px solid #666;
}

.button-z {
    grid-area: z;
    border-left: 6px solid #666;
    border-bottom: 6px solid #666;
}

.button-X {
    grid-area: X;
    color: lightcoral;
}

.sp {
    background-color: orange;
    border-right: 6px solid #666;
}

.button-div {
    grid-area: div;
}

.button-mult {
    grid-area: mult;
}

.button-min {
    grid-area: min;
}

.button-plus {
    grid-area: plus;
}

.button-eq {
    grid-area: eq;
    border-bottom: 6px solid #666;
}

.button-dot {
    grid-area: dot;
    border-bottom: 6px solid #666;
}

.button-one {
    grid-area: one;
    border-left: 6px solid #666;
}

.button-two {
    grid-area: two;
}

.button-three {
    grid-area: three;
}

.button-four {
    grid-area: four;
    border-left: 6px solid #666;
}

.button-five {
    grid-area: five;
}

.button-six {
    grid-area: six;
}

.button-seven {
    grid-area: seven;
    border-left: 6px solid #666;
}

.button-eight {
    grid-area: eight;
}

.button-nine {
    grid-area: nine;
}

@media screen and (max-width: 375px){
    .container {
        width: 80vw;
        top: 5%;
    }

    .results {
        min-width: 230px;
        min-height: 40px;
    }

    .buttons {
        padding: 0.5rem;
        font-size: 28px;
    }
}

@media screen and (min-width: 375px){
    .container {
        width: 80vw;
        top: 5%;
    }

    .results {
        min-width: 256px;
        min-height: 40px;
    }

    .buttons {
        padding: 1rem;
        font-size: 30px;
    }
}

@media screen and (min-width: 425px){
    .container {
        width: 80vw;
    }

    .buttons {
        padding: 1rem;
        font-size: 30px;
    }
}

@media screen and (min-width: 768px){
    .container {
        width: 45vw;
        left: 30%;
    }

    .buttons {
        padding: 1.5rem;
        font-size: 30px;
    }
}

@media screen and (min-width: 1024px){
    .container {
        width: 40vw;
        left: 30%;
    }

    .buttons {
        padding: 1.5rem;
        font-size: 30px;
    }
}

@media screen and (min-width: 1440px){
    .container {
        width: 30vw;
        left: 35%;
    }

    .buttons {
        padding: 1.5rem;
        font-size: 30px;
    }
}