<div class="calculator">
    <div class="calculator-bar">
        <div class="close"></div>
        <div class="minimize"></div>
        <div class="maximize"></div>
    </div>

    <div class="calculator-display">0</div>

    <div class="calculator-keys">
        <button type="button" class="operator" value="+">+</button>
        <button type="button" class="operator" value="-">-</button>
        <button type="button" class="operator" value="*">&times;</button>
        <button type="button" class="operator" value="/">&divide;</button>

        <button type="button" value="7">7</button>
        <button type="button" value="8">8</button>
        <button type="button" value="9">9</button>

        <button type="button" value="4">4</button>
        <button type="button" value="5">5</button>
        <button type="button" value="6">6</button>

        <button type="button" value="1">1</button>
        <button type="button" value="2">2</button>
        <button type="button" value="3">3</button>

        <button type="button" value="0">0</button>
        <button type="button" class="decimal" value=".">.</button>
        <button type="button" class="all-clear" value="all-clear">AC</button>

        <button type="button" class="equal-sign" value="=">=</button>
    </div>
</div>

html {
    font-size: 62.5%;
    box-sizing: border-box;
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: inherit
}

body {
  width: 100vw;
  min-height: 100vh;
  background:
    radial-gradient(50% 100%, rgba(255,255,255,.2), rgba(255,255,255,0)),
    linear-gradient(90deg, rgba(50,100,170,.7) 1px, transparent 0),
    linear-gradient(180deg, rgba(50,100,170,.7) 1px, transparent 0),
    linear-gradient(90deg, rgba(50,100,170,.4) 1px, transparent 0),
    linear-gradient(180deg, rgba(50,100,170,.4) 1px, transparent 0),
    linear-gradient(90deg, rgba(50,100,170,1) 2px, transparent 0),
    linear-gradient(180deg, rgba(50,100,170,1) 2px, transparent 0),
    url('//images.pexels.com/photos/1540258/pexels-photo-1540258.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260') no-repeat;
    
  background-color: #074b97;
  background-size:100% 100%, 50px 50px,50px 50px,25px 25px,25px 25px,100px 100px, 100px 100px, cover;
  background-attachment: local;
  background-blend-mode: lighten;
  
  display: flex;
  justify-content: center;
  align-items: center;
}

.calculator {
  background: #1d1e22;
  padding:2.8rem .64rem .64rem;
  color: white;
  border-radius: .5rem;
  box-shadow: 0 .3rem 3rem .1rem rgba(0,0,0,0.6);
  position: relative;
  min-width: 40rem;
}
.calculator-bar {
  display: grid;
  grid-template-columns: repeat(3, 1.4rem);
  grid-column-gap: .6rem;
  position: absolute;
  top: .64rem;
  left: .64rem;
  
  > div {
    cursor: pointer;
    height: 1.4rem;
    width: 1.4rem;
    border-radius: 100%;
    position: relative;
    
    &::before,
    &::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      color: #1d1e22;
      opacity: 0;
      transition: opacity .2s linear;
    }
    
  }
  
  &:hover div::before,
  &:hover div::after {
    transition: opacity .2s linear;
    opacity: 1;
  }
  
  .close {
    background: rgb(255,90,90);
    
    &::before {
      transform: translate(-50%, -50%) rotate(-45deg);
      width: 1rem;
      height: 1px;
      background: currentColor;
    }
    
    &::after {
      transform: translate(-50%, -50%) rotate(45deg);
      width: 1rem;
      height: 1px;
      background: currentColor;
    }
  }
  .minimize {
    background: rgb(90,220,90);
    
    &::before {
      transform: translate(-50%, -50%);
      width: 1rem;
      height: 1px;
      background: currentColor;
    }
  }
  .maximize {
    background: rgb(255,200,90);
    
    &::before {
      border: 5px solid transparent;
      border-color: transparent transparent transparent currentColor;
      transform: translate(0%, -90%) rotate(-45deg);
    }
    &::after {
      border: 5px solid transparent;
      border-color: transparent currentColor transparent transparent;
      transform: translate(-90%, 0%) rotate(-45deg);
    }
  }
}

.calculator-display {
  font-size: 5rem;
  height: 80px;
  padding: 0 20px;
  background-color: #1d1e22;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

button {
  height: 60px;
  border-radius: 3px;
  border: 1px solid #c4c4c4;
  font-size: 2rem;
  color: #333;
  background-color: #fff;
  background-image: linear-gradient(to bottom,transparent,transparent 50%,rgba(0,0,0,.04));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), inset 0 1px 0 0 rgba(255,255,255,.45), inset 0 -1px 0 0 rgba(255,255,255,.15), 0 1px 0 0 rgba(255,255,255,.15);
  text-shadow: 0 1px rgba(255,255,255,.4);
  
  &:hover {
    background-color: #eaeaea;
  }
  
  &.operator {
    background-color: #eee;
    color: #337cac;
  }
  &.all-clear {
    background-color: #f0595f;
    border-color: #b0353a;
    color: #fff;
    
    &:hover {
      background-color: #f17377;
    }
  }

  &.equal-sign {
    background-color: #2e86c0;
    border-color: #337cac;
    color: #fff;

    &:hover {
      background-color: #4e9ed4;
    }
  }
}

.calculator-keys {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 2rem;
  padding: 2rem 1.36rem;
  background-color: #fff;
  border-radius: 0 0 .5rem .5rem;
}

.equal-sign {
  grid-row: 2 / span 4;
  grid-column: 4 / 5;
  height: 100%;
}