.container{
    display: flex;
    justify-content: center;
}
.fixed{
    width: 800px;
    border-right-style:double;
    padding-right:20px;
}

.fixed2nd{
    width:2000px;
    border-left-style:double;
    padding-right:20px;
    padding-left: 20px;
}

.fixedPercent{
    width: 50%;
    border-right-style:double;
    padding-right:20px;
    min-height:20px;
}

.fixedPercent2nd{
    width: 50%;
    padding-right:20px;
    padding-left:20px;
}

.fixedNarrow{
    width:255px;
    min-width:265px;
    padding-right:20px;
    padding-left:20px;
    border-right-style:double;
}

.lowerRight{
    width: 50%;
    padding-right:20px;
    padding-left:20px;
    height:20px;
}

.flex-item{
    flex-grow: 1;
    padding-left: 20px;
    max-width:75%;
}


.center{
    width:100%;
    text-align: center;
}

.left{
    text-align:left;
}

.equation{
    display:inline-block;
    min-width: 85px;
}

h1{
    width:100%;
    text-align: center;
}

h2{
    width:100%;
    text-align: center;
}

img{
    max-width:100%;
    height:auto;
}

.fullWidth{
    display:flex;
    justify-content: center;
}

.moveOn{
    background-color: rgb(111, 163, 236);
    border-style:ridge;
    /* width:50%; */
    padding:15px;
    margin-top:15px;
    margin-right:15px;
    text-align: center;
}

.moveOn.right{
    float:right;
    width:110px;
    margin-top:0px;
    padding-bottom:5px;
}

input[type=number] {
    -moz-appearance: textfield;
}

input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

input{
    text-align: center;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: large;
    border-style: thin;
    width : 100px;
    height:30px;
    border-radius:8px;
    margin-right:0px;
    margin-left: 0px;
    margin-bottom:0px;
}

button{
    position:relative;
    text-align: center;
    background-color: lightblue;
    height:30px;
    width : 80px;
    font-size: medium;
    margin-top : 5px;
    margin-right : 5px;
    margin-left: 5px;
    margin-bottom:5px;
    padding : 5px;
    border-radius : 8px;
}

button:hover{
    background-color: lightgreen;
}

.tallButton{
    width : 100px;
    height:100px;
    margin-top:0px;
    margin-right : 5px;
    margin-left: 5px;
    margin-bottom:0px;
    padding : 5px;
    vertical-align:top;
}

.wideButton{
    width : 250px;
}

.modal{
    position:fixed;
    top:0;
    left:0;
    display:none;
    background-color: rgba(0,0,0,.6);
    width:100%;
    height:100%;
    z-index:1;
    padding-top:50px;
}

.modal-content{
    position:relative;
    background-color: rgb(240, 195, 228);
    width:350px;
    margin: auto;
    padding: 40px;
    border: 1px solid rgb(110,110,110); 
    text-align: center;  
}

.modal-content.wide{
    width:450px;
}

.closeModal{
    position:absolute;
    top:5px;
    right: 10px;
    font-size:25px;
}

.closeModal:hover, .closeModal:focus{
    color: cadetblue;
    font-size:30px; 
    cursor: pointer;
}


body{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: large;
    text-align: left;
}

.fixedHeight{
    padding-top: 0px;
    min-height:30px;
    max-height: 180px;
    overflow-y:auto;
}

.fixedHeightTall{
    padding-top: 0px;
    max-height: 450px;
    overflow-y:auto;
    display:none;
}

canvas{
    border-style:solid;
    display:none;
}

.graph{
    height:0px;
    position:relative;
}

.emphasize{
    font-weight:bolder;
    color:deeppink
}

.digits{
    min-height:25px;
    font-weight:bold;
    color:blue;
    word-wrap: break-word;
}

.buttonShake {
    animation-name: buttonShakeAnimation;
    animation-duration: .75s;
  }
  
  @keyframes buttonShakeAnimation{
    0% {right:0px}
    12% {right:5px}
    25% {right:0px}
    37% {right:-5px}
    50% {right:0px}
    62% {right:5px}
    75% {right:0px}
    87% {right:-5px}
    100% {right:0px}
  }