<head>
<title>calculator</title>
<link rel="stylesheet" href="calcul.css">
</head>
<div class="calc-body">
<!-- Calculator Display Screen -->
<div class="calc-screen">
<div id="calc-operation">1234 + 567 + </div>
<div id="calc-typed">890</div>
</div>
<!-- Calculator Buttons -->
<div class="calc-button-row">
<button class="ac">AC</button>
<button class="opt">+/−</button>
<button class="opt">%</button>
<button class="opt">÷</button>
<button>7</button>
<button>8</button>
<button>9</button>
<button class="opt">×</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button class="opt">−</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button class="opt">+</button>
<button>0</button>
<button>.</button>
<button>⌫</button>
<button class="opt">=</button>
</div>
</div>
.calc-body {
width: 275px;
margin: auto;
min-height: 400px;
box-shadow: 0 8px 50px -7px black;
background: #3A4655;
}
/*Calculator Display Screen*/
.calc-screen {
padding: 1rem;
}
#calc-operation {
font-size: 1.3rem;
text-align: right;
color: #727B86;
padding-bottom: .5rem;
}
#calc-typed {
font-size: 2rem;
text-align: right;
color: #fff;
}
/*Calculator Buttons*/
.calc-button-row{
display: table;
}
.calc-button-row button {
display: table-cell;
width: 25%;
background: #425062;
color: #fff;
height: 65px;
font-size: 1.3rem;
border: none;
border-color:#3C4857;
border-width: 1px 1px 0px 0;
border-style: solid;
}
.calc-button-row button.ac {
color: #ff7665;
}
.calc-button-row button.opt {
color: #ffbc56;
}
/*The border has been managed in every fourth button so that the design will not
distract.*/
.calc-button-row button:nth-child(4n){
border-right: none;
}
.calc-button-row button:active {
position: relative;
top: 1px;
}
.calc-button-row button:hover {
background: #3e4b5c;
}
