:root{
    font-size: 4vh;


}
body {
    background: black;
    color: white;
}
.numbers:active{
    background: #1f2325;
}
.functions:active{
    background: dimgrey;
}
.operators:active{
    background: darkorange;
}

.memory:active{
    background: #005ce6;
}

input{
    border:none;
    font-size: 2rem;
    color: whitesmoke;
}

.container>input:hover{
    outline: whitesmoke solid 2px;
}
#output:hover{
    outline: 0;
}

.memory{
    font-size: 1.2rem;
    background: #3385ff;
    border-radius: 45%;
}
.operators{

    background: orange;
    border-radius: 45%;
}
.numbers{

    background: #2f3437;
    border-radius: 45%;
}

.functions{
    background: grey;
    border-radius: 45%;
}
.output{
    background: black;
    grid-column: span 4;
    grid-area: output;
    text-align: right;
    font-size: 2.3rem;
    margin-right: 1.2rem;
}
a{
    color: orange;
    text-decoration: none;
}
li:hover{
    transform:scale(110%);
}
.styleSwapper{
    background: black;
    color:orange;
    font-size: 28px;
    margin-top:15px;
}
.utility-bar > ul{
    margin-top:0;
    position: sticky;
    top:0;
    display: flex;
    /*gap: 20px;*/
    font-size: 40px;
    flex-direction: row;
    list-style: none;
    border: none;
    background: black;
    justify-content: space-between;
}

.container{
    height:75vh;
    width: 90vw;
    margin-left: 5vw;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 15px;
    grid-template-areas: "output output output output"
                        "MC MR Mplus M-"
                        "clear negate percent divide"
                        "seven eight nine times"
                        "four five six minus"
                        "one two three plus"
                        "zero decimal . equals";
}

#M\+{grid-area: Mplus;}
#M-{grid-area: M-;}
#MR{grid-area: MR;}
#MC{grid-area: MC;}
#clear{grid-area: clear;}
#percent{grid-area: percent;}
#decimal{grid-area: decimal;}
#divide{grid-area: divide;}
#negate{grid-area: negate;}
#equals{grid-area: equals;}
#minus{grid-area: minus;}
#plus{grid-area: plus;}
#times{grid-area: times;}
#nine{grid-area: nine;}
#eight{grid-area: eight;}
#seven{grid-area: seven;}
#six{grid-area: six;}
#five{grid-area: five;}
#four{grid-area: four;}
#three{grid-area: three;}
#two{grid-area: two;}
#one{grid-area: one;}
#zero{grid-area: zero;}
/*keeps calculator from stretching too much*/

@media (min-aspect-ratio: 12/9) {
    .utility-bar > ul{
        font-size:6vh;
    }
    .styleSwapper{
        font-size: 5vh;
    }
    .output{
        grid-column: span 5;
        grid-area : output;
    }
    .container{
        height:75vh;
        width: 70vw;
        margin-left: 15vw;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-gap: 10px;
        text-align: center;
        grid-template-areas: "output output output output output"
                        "MC MR Mplus M- divide"
                        "seven eight nine clear times"
                        "four five six negate minus"
                        "one two three percent plus"
                        "zero decimal . . equals";
    }

}