<div class="bg-layer"></div>
    <div class="body">
    <div class="body-calculadora">
        <h2>CALCULADORA</h2>
        <div class="bg">
        
        <div class="numeros"><p class="barra">
        <br>
        <br>|
        </p></div>
        <div class="section">
            <div class="numero-calculadora action">CE</div>
            <div class="numero-calculadora action">C</div>
            <div class="numero-calculadora action"><=</div>
            <div class="numero-calculadora action">/</div>
        </div>
        <div class="section">
            <div class="numero-calculadora">9</div>
            <div class="numero-calculadora">8</div>
            <div class="numero-calculadora">7</div>
            <div class="numero-calculadora action">-</div>
        </div>
        <div class="section">
            <div class="numero-calculadora">6</div>
            <div class="numero-calculadora">5</div>
            <div class="numero-calculadora">4</div>
            <div class="numero-calculadora action">+</div>
        </div>
        <div class="section">
            <div class="numero-calculadora">3</div>
            <div class="numero-calculadora">2</div>
            <div class="numero-calculadora">1</div>
            <div class="numero-calculadora action">=</div>
            <div class="numero-calculadora cero">0</div>
        </div>
        </div>
    </div></div></div>

@keyframes wink {
    to {
        opacity: 0;
    }
}

*{
    transition: .4s;
}

*:hover{
    transition: .4s;
}

h2{
    margin: 5px 0px 5px 0px;
    padding: 0;
    letter-spacing: 2px;
    color: white;
    font-weight: 300;
}

body{
    text-align: center;
    font-family: 'Lato', sans-serif;
    margin: auto;
background-image: url(https://images.unsplash.com/photo-1509483730228-811e47696246?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=1f1280e591d69d9fb49e25ae86f42c09);
  
    background-origin: center;
    background-size: cover;
}

.body{
    max-width: calc(32px * 8);
    margin: auto;
}

.bg-layer{
    background: rgba(0, 0, 0, .8);
    height: 100vh;
    width: 100vw;
    max-width: 100%;
    position: fixed;
    z-index: -1;
    max-width: 100%;
    margin: 0;

}

.numeros{
    height: 80px;
    background: #0000004d;
    width: calc((35.5px + 14px) * 4 );
    margin: auto;
    border-radius: 5px;
}

.barra{
    text-align: right;
    color: wheat;
    animation: wink 1s linear infinite;
    font-size: 1.2em;
    padding-right: 10px;
}

.body-calculadora{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;

}

.bg{
    background: #0000004d;
    padding: 12px;
    border-radius: 4px;
}

.section{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.numero-calculadora{
    width: 20px;
    padding: 12px;
    border: rgb(255, 255, 255) 1px solid;
    margin: 2.5px;
    border-radius: 5px;
    background: rgb(230, 230, 230)
}
.cero{
    flex-basis: calc(32px * 5.4);
}

.numero-calculadora:hover{
    background: #f0f0f0;
    cursor: pointer;
}

.action{
    background: #0000009a;
    color: white;
}

.ripple {
    background-position: center;
    transition: background 0.8s;
  }
  .ripple:hover {
    background: #ffffff radial-gradient(circle, transparent 1%, #f0f0f0 1%) center/15000%;
    color: black;
}
  .ripple:active {
    background-color: #00000062;
    background-size: 100%;
    transition: background 0s;
    font-weight: bold;
  }

$('.numero-calculadora').addClass('ripple');