.CalculatorRim {
display: flex;
justify-content: center;
align-content: center;
border: 5px solid whitesmoke;
min-width: 8vw;
max-width: 20vw;
width: 10vw;
margin: 5vh auto;
}
/*Results and inputs*/
.DisplayText {
display: flex;
flex-direction: row;
justify-content: left;
align-content: center
width: 100%;
height: 6vh;
margin: auto;
color: yellow;
background-color: blue;
background-clip: content-box;
border-color: gray;
border: solid gray .35vw;
}
/* Calculator Buttons*/
/*Row One*/
.RowOne {
}
.Clear {
width: 21%;
min-width: 10%;
max-width: 30%;
height: auto;
padding: 1.1vh;
margin: 0.2vh;
box-sizing: border-box;
background-color: gray;
color: white;
}
.Sign {
width: 21%;
min-width: 10%;
max-width: 30%;
height: auto;
padding: 1.1vh;
margin: 0.2vh;
box-sizing: border-box;
background-color: gray;
color: white;
}
.Percent {
width: 21%;
min-width: 10%;
max-width: 30%;
height: auto;
padding: 1.1vh;
margin: 0.2vh;
box-sizing: border-box;
background-color: gray;
color: white;
}
.Divison {
width: 21%;
min-width: 10%;
max-width: 30%;
height: auto;
padding: 1.1vh;
margin: 0.2vh;
box-sizing: border-box;
background-color: gray;
color: white;
}
/*Row Two*/
.Seven {
width: 21%;
min-width: 10%;
max-width: 30%;
height: auto;
padding: 1.1vh;
margin: 0.2vh;
box-sizing: border-box;
background-color: gray;
color: white;
}
.Eight {
width: 21%;
min-width: 10%;
max-width: 30%;
height: auto;
padding: 1.1vh;
margin: 0.2vh;
box-sizing: border-box;
background-color: gray;
color: white;
}
.Nine {
width: 21%;
min-width: 10%;
max-width: 30%;
height: auto;
padding: 1.1vh;
margin: 0.2vh;
box-sizing: border-box;
background-color: gray;
color: white;
}
.Multiplication {
width: 21%;
min-width: 10%;
max-width: 30%;
height: auto;
padding: 1.1vh;
margin: 0.2vh;
box-sizing: border-box;
background-color: gray;
color: white;
}
/*Row Three*/
.Four {
width: 21%;
min-width: 10%;
max-width: 30%;
height: auto;
padding: 1.1vh;
margin: 0.2vh;
box-sizing: border-box;
background-color: gray;
color: white;
}
.Five {
width: 21%;
min-width: 10%;
max-width: 30%;
height: auto;
padding: 1.1vh;
margin: 0.2vh;
box-sizing: border-box;
background-color: gray;
color: white;
}
.Six {
width: 21%;
min-width: 10%;
max-width: 30%;
height: auto;
padding: 1.1vh;
margin: 0.2vh;
box-sizing: border-box;
background-color: gray;
color: white;
}
.Minus {
width: 21%;
min-width: 10%;
max-width: 30%;
height: auto;
padding: 1.1vh;
margin: 0.2vh;
box-sizing: border-box;
background-color: gray;
color: white;
}
/*Row Four*/
.One {
width: 21%;
min-width: 10%;
max-width: 30%;
height: auto;
padding: 1.1vh;
margin: 0.2vh;
box-sizing: border-box;
background-color: gray;
color: white;
}
.Two {
width: 21%;
min-width: 10%;
max-width: 30%;
height: auto;
padding: 1.1vh;
margin: 0.2vh;
box-sizing: border-box;
background-color: gray;
color: white;
}
.Three {
width: 21%;
min-width: 10%;
max-width: 30%;
height: auto;
padding: 1.1vh;
margin: 0.2vh;
box-sizing: border-box;
background-color: gray;
color: white;
}
.Plus {
width: 21%;
min-width: 10%;
max-width: 30%;
height: auto;
padding: 1.1vh;
margin: 0.2vh;
box-sizing: border-box;
background-color: gray;
color: white;
}
/*Row Five*/
.Zero {
width: 48%;
min-width: 37%;
max-width: 68%;
height: auto;
padding: 1.1vh;
margin: 0.2px;
box-sizing: border-box;
background-color: gray;
color: white;
}
.Decimal {
width: 21%;
min-width: 10%;
max-width: 30%;
height: auto;
padding: 1.1vh;
margin: 0.2vh;
box-sizing: border-box;
background-color: gray;
color: white;
}
.Equals {
width: 21%;
min-width: 10%;
max-width: 30%;
height: auto;
padding: 1.1vh;
margin: 0.2vh;
box-sizing: border-box;
background-color: green;
color: white;
}