<div class="container">
  <form class="calculator" name="calc">
    <!--     <input type="text" readonly class="value" name="txt"> -->
    <textarea name="txt" readonly class="value" rows="3"></textarea>
    <span class="num clear" onclick="calc.txt.value = ''">c</span>
    <span class="num" onclick="document.calc.txt.value +='/'">/</span>
    <span class="num" onclick="document.calc.txt.value +='*'">*</span>
    <span class="num" onclick="document.calc.txt.value +='7'">7</span>
    <span class="num" onclick="document.calc.txt.value +='8'">8</span>
    <span class="num" onclick="document.calc.txt.value +='9'">9</span>
    <span class="num" onclick="document.calc.txt.value +='-'">-</span>
    <span class="num" onclick="document.calc.txt.value +='4'">4</span>
    <span class="num" onclick="document.calc.txt.value +='5'">5</span>
    <span class="num" onclick="document.calc.txt.value +='6'">6</span>
    <span class="num plus" onclick="document.calc.txt.value +='+'">+</span>
    <span class="num" onclick="document.calc.txt.value +='1'">1</span>
    <span class="num" onclick="document.calc.txt.value +='2'">2</span>
    <span class="num" onclick="document.calc.txt.value +='3'">3</span>
    <span class="num" onclick="document.calc.txt.value +='0'">0</span>
    <span class="num" onclick="document.calc.txt.value +='00'">00</span>
    <span class="num" onclick="document.calc.txt.value +='.'">.</span>
    <span class="num equal" onclick="document.calc.txt.value =eval(calc.txt.value)">=</span>
  </form>
</div>

@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Quicksand", sans-serif;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #091921;
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(#e91e63, #ffc107);
    clip-path: circle(22% at 30% 20%);
  }
  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(#ffffff, #da00ff);
    clip-path: circle(20% at 70% 90%);
  }
  .container {
    position: relative;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    overflow: hidden;
    z-index: 10;
    // backdrop-filter: blur(15px);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.2);
    .calculator {
      position: relative;
      display: grid;
      .value {
        grid-column: span 4;
        height: 140px;
        width: 300px;
        text-align: right;
        border: none;
        outline: none;
        padding: 10px;
        font-size: 30px;
        background: transparent;
        color: #fff;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        border-right: 1px solid rgba(255, 255, 255, 0.05);
        resize: none;
      }
      span {
        display: grid;
        place-items: center;
        width: 75px;
        height: 75px;
        color: #fff;
        font-weight: 400;
        cursor: pointer;
        font-size: 20px;
        user-select: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        border-right: 1px solid rgba(255, 255, 255, 0.05);
        &.clear {
          grid-column: span 2;
          width: 150px;
          background: rgba(255, 255, 255, 0.05);
        }
        &.plus {
          grid-row: span 2;
          height: 150px;
        }
        &.equal {
          background: rgba(255, 255, 255, 0.05);
        }
        &:hover {
          transition: 0;
          background: rgba(255, 255, 255, 0.05);
        }
        &:active {
          background: #14ff47;
          color: #192f00;
          font-size: 24px;
          font-weight: 500;
        }
      }
    }
  }
}

VanillaTilt.init(document.querySelector(".container"), {
  max: 15,
  speed: 400,
  glare: true,
  "max-glare": 0.2
});

// Built this calculator following this guide: https://www.youtube.com/watch?v=NhcZh8Bwr30&t=5s