/* Box Model Hack */
*, *::before, *::after {
     box-sizing: border-box;
     font-family: 'Jura', sans-serif;
     font-weight: normal;
}

/* Clear fix hack */
.clearfix:after {
     content: ".";
     display: block;
     clear: both;
     visibility: hidden;
     line-height: 0;
     height: 0;
}

.clear {
	clear: both;
}

/******************************************
/* BASE STYLES
/*******************************************/
html{
  font-size: 62.5%;
}


body{
   padding: 0;
   margin: 0;
   background: linear-gradient(to right, #F9B9F2, #2B3D41);
}

.calculatorGrid{
  min-height: 100vh;
  display: grid;
  justify-content: center;
  align-content: center;
  grid-template-columns: repeat(4, 100px);
  grid-auto-flow: minmax(120px, auto) repeat(5, 100px);
}



.calculatorGrid button{
  cursor: pointer;
  font-size: 2rem;
  border: .5px solid black;
  outline: none;
  background-color: #4C5F6B;
  color: #F9B9F2;
}



.calculatorGrid button:hover{
  background-color: #BCA0BC;
}

.twoWide1{
  grid-column: span 2;
}

.twoWide2{
  grid-column: span 2;
}

.output{
  height: 60px;
  grid-column: 1 / -1;
  background: #2B3D41;
  border: .5px solid black;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-direction: column;
  padding: 10px;
  word-wrap: break-word;
  word-break: break-all;
}

.output .previousInput{
  color: #F9B9F2;
  font-size: 1.5rem;
}

.output .currentInput{
  color: white;
  font-size: 2.5rem;
}


/******************************************
/* LAYOUT
/*******************************************/


/******************************************
/* ADDITIONAL STYLES
/*******************************************/