calculator {
  display: block;
  position: relative;
  width: 100%;
  max-width: 25rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
  text-align: center;
  z-index: 1; }
  calculator::before, calculator::after {
    display: block;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -1;
    border-radius: 1rem; }
  calculator::before {
    background: #eee;
    box-sizing: content-box;
    border: 1rem #eee solid;
    border-left-width: 0.4rem;
    border-right-width: 0.4rem;
    left: -0.4rem;
    top: -1rem;
    box-shadow: 15px 15px 25px darkgrey; }
    @media (prefers-color-scheme: dark) {
      calculator::before {
        box-shadow: 15px 15px 25px black;
        border-color: #ccc;
        background: #ccc; } }
  calculator::after {
    background: #202020 url("texture.jpg");
    background-size: cover;
    filter: brightness(50%);
    border: 0.5rem solid aqua;
    border-left-width: 0.2rem;
    border-right-width: 0.2rem; }
  calculator .btn {
    width: 100%; }
  calculator .btn-calc-white, calculator .btn-calc-blue {
    height: 3rem;
    border: none;
    border-bottom: #eeeedd 0.3rem solid;
    font-weight: bolder; }
  calculator .btn-calc-white {
    background: #ffffee;
    border-bottom-color: #eeeedd; }
    @media (prefers-color-scheme: dark) {
      calculator .btn-calc-white {
        background: #ccc;
        border-bottom-color: #bfbfbf; } }
  calculator .btn-calc-blue {
    background: #1f28a9;
    border-bottom-color: #1a2291;
    color: white; }
  calculator .calc-screen {
    display: block;
    position: relative;
    width: calc(100% - 1rem);
    margin: 0 auto;
    border: 1rem #222222 solid;
    height: 17rem;
    filter: pixelate(2px);
    font-size: 2rem;
    padding: 1rem 2rem; }
    @media (prefers-color-scheme: dark) {
      calculator .calc-screen {
        border-color: #ccc; } }
    calculator .calc-screen, calculator .calc-screen > textarea {
      background: #e2eaef;
      color: black; }
      @media (prefers-color-scheme: dark) {
        calculator .calc-screen, calculator .calc-screen > textarea {
          background: #1f1f1f;
          color: #e2eaef; } }
    calculator .calc-screen > textarea {
      width: 100%;
      height: 100%;
      border: none;
      outline: none;
      resize: none; }
    calculator .calc-screen > .calc-screen-answer {
      position: absolute;
      bottom: 0;
      right: 0;
      z-index: 10;
      padding: 1rem 2rem;
      max-width: 100%;
      text-align: right; }
      calculator .calc-screen > .calc-screen-answer.answered::before {
        content: "= "; }
  calculator .calc-f-buttons .btn {
    width: auto;
    border-radius: 50%;
    background: #bbb;
    color: #ccc;
    text-shadow: 0 0 5px black;
    box-shadow: 5px 5px 5px #999 inset; }
    @media (prefers-color-scheme: dark) {
      calculator .calc-f-buttons .btn {
        background: #999;
        box-shadow: 5px 5px 5px #777 inset; } }
    calculator .calc-f-buttons .btn:hover, calculator .calc-f-buttons .btn:focus {
      background: #999; }
  calculator .calc-main {
    padding-top: 1rem; }
    calculator .calc-main > .R.R-compact {
      padding: 0 0.2rem 1rem; }

/*# sourceMappingURL=calculator.css.map */