/*******************************************************
 *  calculator.css
 *  purpose: to style a simple calculator
 *  author: Anthony McGrath (akm@anthonykyle.co.nz)
 ******************************************************/

/****************************************************
 * Global Variables
 ***************************************************/

 :root{
  --calculator: beige;
  --calc-shape: rgb(175, 175, 147);
  --key-color: rgb(206, 206, 197);
  --key-clear: rgb(150,40,40);
  --shadow: rgb(45,45,45);
} /* :root */

@font-face {
  font-family: Calc;
  src: url(/fonts/DS-DIGI.TTF);
}

html, body {
  width: 100%;
  height: 100%;
  background: #232323 url(wood.jpg) center center no-repeat;
  background-size: cover;
  background-blend-mode: color-dodge;
}

a {
  text-decoration: none;
  color: #232323;
}

a:hover {
  color: #472860;
}


/****************************************************
 * Calculator Body
 ***************************************************/

 #calculator {
  margin: 0px auto;
  width: 265px;
  background-color: var(--calculator);
  padding: 20px;
  border-top-left-radius: 80% 20px;
  border-top-right-radius: 80% 20px;
  border-bottom-left-radius: 80% 20px;
  border-bottom-right-radius: 80% 20px; 
  box-shadow: inset 5px 0 10px -5px var(--calc-shape),
              inset -5px 0 10px -5px var(--calc-shape),
              inset 0px -5px 10px -2px var(--calc-shape),
                    0 10px 20px 0 var(--shadow);     
} /* #calculator */

#branding {
 display: block;
 font-family: 'Great Vibes', cursive;;
 font-size: 1.2em;
 text-align: center;
} /* #branding */

#branding img {
  height: 20px;
  width: auto;
} /* #branding img */

/****************************************************
 * Screen Formatting
 ***************************************************/

#screen {
  display: block;
  position: relative;
  width: 215px;
  height: 50px;
  background-color: rgb(196, 196, 184);
  margin: 5px 5px 10px 5px;
  box-shadow: inset 0px 0px 4px var(--shadow);
  border-radius: 5px;
  text-align: right;
  padding: 10px;
  font-family: Calc, monospace;
  font-size: 40px;
  line-height: 35px;
  vertical-align: top;
} /* #screen */

#numbers {
  overflow-wrap: anywhere;
}
#numbers.splitLine {
  font-size: 19px;
  line-height: 20px;
}

.operand {
  position: absolute;
  font-size: 20px;
  left: 5px;
  top: 0px;
  display: none;
} /* .operand */

#plus {
  top: -5px;
} /* #sPlus */

#minus {
  top: 4px;
} /* #sMinus */

#multiply {
  top: 13px;
} /* #sMultiply */

#divide {
  top: 23px;
} /* #sDivide */

#percent {
  top: -5px;
  left: 15px;
} /* #sPercent */

/****************************************************
 * Calculator Keys
 ***************************************************/

.calc-row {
  height: 55px;
  white-space: nowrap;
} /* .calc-row */

.key {
  background-color: var(--key-color);
  position: relative;
  display: inline-block;
  width: 50px;
  height: 50px;
  margin: 0px -4px 0px 5px;
  vertical-align: top;
  border-radius: 5px;
  font-weight: bold;
} /* .key */

.clear {
  background-color: var(--key-clear);
  color: white;
} /* .clear */

.tall {
  height: 105px;
} /* .tall */

.key:hover{
  left: -1px;
  top: -1px;
  box-shadow: 1px 1px 2px var(--shadow);
} /* .key:hover */

.key:active{
  left: 0px;
  top: 0px;
  box-shadow: inset 1px 1px 2px var(--shadow);
} /* .key:active */