body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ede9c8; }

.calculadora-container {
  height: 500px;
  width: 360px;
  padding: 0;
  perspective: 1000px;
  position: absolute;
  vertical-align: middle; }
  .calculadora-container button {
    position: absolute;
    height: 48px;
    width: 50px;
    border-radius: 10px;
    z-index: 400;
    opacity: 0;
    cursor: pointer; }
  .calculadora-container button:nth-child(1) {
    top: 183px;
    left: 32px; }
    .calculadora-container button:nth-child(1):active ~ .calculadora .buttons span.span1 {
      box-shadow: 0 0 rgba(0, 0, 0, 0.3);
      transition: all 0.1s ease-in-out; }
    .calculadora-container button:nth-child(1):active ~ .calculadora {
      transform: rotateX(10deg) rotateY(-10deg); }
  .calculadora-container button:nth-child(2) {
    top: 183px;
    left: 92px; }
    .calculadora-container button:nth-child(2):active ~ .calculadora .buttons span.span2 {
      box-shadow: 0 0 rgba(0, 0, 0, 0.3);
      transition: all 0.1s ease-in-out; }
    .calculadora-container button:nth-child(2):active ~ .calculadora {
      transform: rotateX(10deg) rotateY(-5deg); }
  .calculadora-container button:nth-child(3) {
    top: 183px;
    left: 152px; }
    .calculadora-container button:nth-child(3):active ~ .calculadora .buttons span.span3 {
      box-shadow: 0 0 rgba(0, 0, 0, 0.3);
      transition: all 0.1s ease-in-out; }
    .calculadora-container button:nth-child(3):active ~ .calculadora {
      transform: rotateX(10deg) rotateY(0deg); }
  .calculadora-container button:nth-child(4) {
    top: 183px;
    left: 214px; }
    .calculadora-container button:nth-child(4):active ~ .calculadora .buttons span.span4 {
      box-shadow: 0 0 rgba(0, 0, 0, 0.3);
      transition: all 0.1s ease-in-out; }
    .calculadora-container button:nth-child(4):active ~ .calculadora {
      transform: rotateX(10deg) rotateY(5deg); }
  .calculadora-container button:nth-child(5) {
    top: 183px;
    left: 276px; }
    .calculadora-container button:nth-child(5):active ~ .calculadora .buttons span.span5 {
      box-shadow: 0 0 rgba(0, 0, 0, 0.3);
      transition: all 0.1s ease-in-out; }
    .calculadora-container button:nth-child(5):active ~ .calculadora {
      transform: rotateX(10deg) rotateY(10deg); }
  .calculadora-container button:nth-child(6) {
    top: 260px;
    left: 32px; }
    .calculadora-container button:nth-child(6):active ~ .calculadora .buttons span.span6 {
      box-shadow: 0 0 rgba(0, 0, 0, 0.3);
      transition: all 0.1s ease-in-out; }
    .calculadora-container button:nth-child(6):active ~ .calculadora {
      transform: rotateX(5deg) rotateY(-10deg); }
  .calculadora-container button:nth-child(7) {
    top: 260px;
    left: 92px; }
    .calculadora-container button:nth-child(7):active ~ .calculadora .buttons span.span7 {
      box-shadow: 0 0 rgba(0, 0, 0, 0.3);
      transition: all 0.1s ease-in-out; }
    .calculadora-container button:nth-child(7):active ~ .calculadora {
      transform: rotateX(5deg) rotateY(-5deg); }
  .calculadora-container button:nth-child(8) {
    top: 260px;
    left: 152px; }
    .calculadora-container button:nth-child(8):active ~ .calculadora .buttons span.span8 {
      box-shadow: 0 0 rgba(0, 0, 0, 0.3);
      transition: all 0.1s ease-in-out; }
    .calculadora-container button:nth-child(8):active ~ .calculadora {
      transform: rotateX(5deg) rotateY(0deg); }
  .calculadora-container button:nth-child(9) {
    top: 260px;
    left: 214px; }
    .calculadora-container button:nth-child(9):active ~ .calculadora .buttons span.span9 {
      box-shadow: 0 0 rgba(0, 0, 0, 0.3);
      transition: all 0.1s ease-in-out; }
    .calculadora-container button:nth-child(9):active ~ .calculadora {
      transform: rotateX(5deg) rotateY(5deg); }
  .calculadora-container button:nth-child(10) {
    top: 260px;
    left: 276px; }
    .calculadora-container button:nth-child(10):active ~ .calculadora .buttons span.span10 {
      box-shadow: 0 0 rgba(0, 0, 0, 0.3);
      transition: all 0.1s ease-in-out; }
    .calculadora-container button:nth-child(10):active ~ .calculadora {
      transform: rotateX(5deg) rotateY(10deg); }
  .calculadora-container button:nth-child(11) {
    top: 337px;
    left: 32px; }
    .calculadora-container button:nth-child(11):active ~ .calculadora .buttons span.span11 {
      box-shadow: 0 0 rgba(0, 0, 0, 0.3);
      transition: all 0.1s ease-in-out; }
    .calculadora-container button:nth-child(11):active ~ .calculadora {
      transform: rotateX(-10deg) rotateY(-10deg); }
  .calculadora-container button:nth-child(12) {
    top: 337px;
    left: 92px; }
    .calculadora-container button:nth-child(12):active ~ .calculadora .buttons span.span12 {
      box-shadow: 0 0 rgba(0, 0, 0, 0.3);
      transition: all 0.1s ease-in-out; }
    .calculadora-container button:nth-child(12):active ~ .calculadora {
      transform: rotateX(-10deg) rotateY(-5deg); }
  .calculadora-container button:nth-child(13) {
    top: 337px;
    left: 152px; }
    .calculadora-container button:nth-child(13):active ~ .calculadora .buttons span.span13 {
      box-shadow: 0 0 rgba(0, 0, 0, 0.3);
      transition: all 0.1s ease-in-out; }
    .calculadora-container button:nth-child(13):active ~ .calculadora {
      transform: rotateX(-10deg) rotateY(0deg); }
  .calculadora-container button:nth-child(14) {
    top: 337px;
    left: 214px; }
    .calculadora-container button:nth-child(14):active ~ .calculadora .buttons span.span14 {
      box-shadow: 0 0 rgba(0, 0, 0, 0.3);
      transition: all 0.1s ease-in-out; }
    .calculadora-container button:nth-child(14):active ~ .calculadora {
      transform: rotateX(-10deg) rotateY(5deg); }
  .calculadora-container button:nth-child(15) {
    top: 337px;
    left: 276px; }
    .calculadora-container button:nth-child(15):active ~ .calculadora .buttons span.span15 {
      box-shadow: 0 0 rgba(0, 0, 0, 0.3);
      transition: all 0.1s ease-in-out; }
    .calculadora-container button:nth-child(15):active ~ .calculadora {
      transform: rotateX(-10deg) rotateY(10deg); }
  .calculadora-container button:nth-child(16) {
    top: 415px;
    left: 32px; }
    .calculadora-container button:nth-child(16):active ~ .calculadora .buttons span.span16 {
      box-shadow: 0 0 rgba(0, 0, 0, 0.3);
      transition: all 0.1s ease-in-out; }
    .calculadora-container button:nth-child(16):active ~ .calculadora {
      transform: rotateX(-15deg) rotateY(-10deg); }
  .calculadora-container button:nth-child(17) {
    top: 415px;
    left: 92px; }
    .calculadora-container button:nth-child(17):active ~ .calculadora .buttons span.span17 {
      box-shadow: 0 0 rgba(0, 0, 0, 0.3);
      transition: all 0.1s ease-in-out; }
    .calculadora-container button:nth-child(17):active ~ .calculadora {
      transform: rotateX(-15deg) rotateY(-5deg); }
  .calculadora-container button:nth-child(18) {
    top: 415px;
    left: 152px; }
    .calculadora-container button:nth-child(18):active ~ .calculadora .buttons span.span18 {
      box-shadow: 0 0 rgba(0, 0, 0, 0.3);
      transition: all 0.1s ease-in-out; }
    .calculadora-container button:nth-child(18):active ~ .calculadora {
      transform: rotateX(-15deg) rotateY(0deg); }
  .calculadora-container button:nth-child(19) {
    top: 415px;
    left: 214px; }
    .calculadora-container button:nth-child(19):active ~ .calculadora .buttons span.span19 {
      box-shadow: 0 0 rgba(0, 0, 0, 0.3);
      transition: all 0.1s ease-in-out; }
    .calculadora-container button:nth-child(19):active ~ .calculadora {
      transform: rotateX(-15deg) rotateY(5deg); }
  .calculadora-container button:nth-child(20) {
    top: 415px;
    left: 276px; }
    .calculadora-container button:nth-child(20):active ~ .calculadora .buttons span.span20 {
      box-shadow: 0 0 rgba(0, 0, 0, 0.3);
      transition: all 0.1s ease-in-out; }
    .calculadora-container button:nth-child(20):active ~ .calculadora {
      transform: rotateX(-15deg) rotateY(10deg); }
  .calculadora-container .calculadora {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
    z-index: 300;
    border-radius: 15px;
    background-color: #adadad;
    transition: all 0.1s ease-in-out;
    transform-style: preserve-3d; }
    .calculadora-container .calculadora::before {
      content: '';
      position: absolute;
      height: 93%;
      width: 93%;
      border-radius: 10px;
      border: solid 2px #5e5e5e; }
    .calculadora-container .calculadora .pantalla {
      height: 20%;
      width: 85%;
      background-color: #5f875f;
      border: solid 3px #4b4b4b;
      display: flex;
      flex-direction: column; }
      .calculadora-container .calculadora .pantalla > div {
        width: 100%;
        height: 100%;
        padding-top: 5px;
        overflow-x: hidden; }
        .calculadora-container .calculadora .pantalla > div span {
          font-size: 30px;
          display: flex;
          justify-content: flex-end;
          align-content: center;
          padding-right: 20px; }
        .calculadora-container .calculadora .pantalla > div span.result {
          opacity: 0.5; }
    .calculadora-container .calculadora .buttons {
      height: 60%;
      width: 85%;
      display: flex;
      justify-content: center;
      align-items: center; }
      .calculadora-container .calculadora .buttons > div {
        height: 100%;
        width: 100%; }
        .calculadora-container .calculadora .buttons > div span {
          border: solid 1px #373737;
          background-color: #c8c8c8;
          height: 40px;
          width: 40px;
          padding: 5px;
          margin: 0;
          font-size: 20px;
          border-radius: 10px;
          margin-top: 20px;
          box-shadow: -3px 3px rgba(0, 0, 0, 0.3);
          text-align: center;
          display: inline-block;
          transition: all 0.1s ease-in-out; }
        .calculadora-container .calculadora .buttons > div span[class*="operator"],
        .calculadora-container .calculadora .buttons > div span[class*="number"] {
          font-size: 30px; }
        .calculadora-container .calculadora .buttons > div .module,
        .calculadora-container .calculadora .buttons > div .squareRoot,
        .calculadora-container .calculadora .buttons > div .pow {
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 30px; }
      .calculadora-container .calculadora .buttons .number-buttons,
      .calculadora-container .calculadora .buttons .operands-buttons {
        display: flex; }
      .calculadora-container .calculadora .buttons .operands-buttons {
        width: 70%; }
      .calculadora-container .calculadora .buttons div[class*="side"] {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        gap: 10px; }