* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

body {
  font-family: inter, -apple-system, BlinkMacSystemFont, Helvetica, system-ui,
    "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
    sans-serif;
  font-weight: 600;
  background-image: url(Images/wallpaper.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

  #calc {
    background-image: linear-gradient(
      rgb(248, 248, 248),
      rgba(248, 248, 248, 0.6)
    );
    backdrop-filter: blur(8px);
    padding: 30px 20px;
    border-radius: 30px;
    box-shadow: inset 1px -2px 10px rgba(248, 248, 248, 0.6),
      inset 1px -2px 15px rgb(255, 255, 255);
    display: grid;
    gap: 10px;
    grid-template-areas:
      "show show show show"
      "show2 show2 show2 show2"
      "num num1 num2 num3"
      "num4 num5 num6 num7"
      "num8 num9 num10 num11"
      "num12 num13 num14 num15"
      "num16 num17 num18 num19";

    #show {
      /* background: transparent; */
      font-size: 18px;
      font-weight: 700;
      text-align: right;
      letter-spacing: 1px;
      border: none;
      border-radius: 10px;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      padding: 10px 2px;
      margin-bottom: -20px;
      grid-area: show;

      &:focus {
        outline: none;
      }

      &::-webkit-inner-spin-button,
      &::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }
    }

    #show2 {
      /* background: transparent; */
      font-size: 27px;
      font-weight: 700;
      text-align: right;
      letter-spacing: 1px;
      border: none;
      border-radius: 10px;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      padding: 20px 2px;
      margin-bottom: 20px;
      grid-area: show2;

      &:focus {
        outline: none;
      }

      &::-webkit-inner-spin-button,
      &::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }
    }

    #num:focus,
    #num1:focus,
    #num2:focus,
    #num3:focus,
    #num4:focus,
    #num5:focus,
    #num6:focus,
    #num7:focus,
    #num8:focus,
    #num9:focus,
    #num10:focus,
    #num11:focus,
    #num12:focus,
    #num13:focus,
    #num14:focus,
    #num15:focus,
    #num16:focus,
    #num17:focus,
    #num18:focus,
    #num19:focus {
      outline: none;
    }

    #num,
    #num1 {
      color: rgb(0, 140, 255);
      font-size: 30px;
      font-weight: 600;
      text-align: center;
      background-color: rgba(221, 221, 221, 0.5);
      padding: 15px 0px;
      border-radius: 7px;
      box-shadow: -2px 2px 5px rgba(187, 187, 187, 0.6),
        -2px 2px 10px rgba(187, 187, 187, 0.6),
        inset 1px -2px 3px rgb(255, 255, 255),
        inset 1px -2px 3px rgb(255, 255, 255);
      border: none;
      cursor: pointer;
    }

    #num4,
    #num5,
    #num6,
    #num8,
    #num9,
    #num10,
    #num12,
    #num13,
    #num14,
    #num16,
    #num17,
    #num18 {
      color: white;
      text-shadow: 0 0 1px rgb(0, 0, 0), 0 0 1px rgb(0, 0, 0),
        0 0 1px rgb(0, 0, 0);
      font-size: 30px;
      font-weight: 600;
      background-color: rgba(224, 224, 224, 0.6);
      text-align: center;
      padding: 15px 5px;
      border-radius: 10px;
      box-shadow: -2px 2px 5px rgba(190, 190, 190, 0.6),
        -2px 2px 10px rgba(190, 190, 190, 0.6),
        inset 0 2px 4px rgb(255, 255, 255);
      border: none;
      cursor: pointer;
    }

    #num2,
    #num3,
    #num7,
    #num11,
    #num15 {
      color: white;
      font-size: 30px;
      font-weight: 600;
      background-color: rgba(75, 174, 255, 0.6);
      text-align: center;
      padding: 15px 0px;
      border-radius: 10px;
      border: none;
      cursor: pointer;
    }

    #num2,
    #num3 {
      box-shadow: -2px 2px 5px rgba(75, 174, 255, 0.6),
        -2px 2px 10px rgba(75, 174, 255, 0.6),
        inset 1px -2px 1px rgba(255, 255, 255, 0.7),
        inset 1px -2px 3px rgb(255, 255, 255);
    }

    #num7,
    #num11,
    #num15 {
      box-shadow: -2px 2px 5px rgba(75, 174, 255, 0.6),
        -2px 2px 10px rgba(75, 174, 255, 0.6),
        inset 1px 2px 4px rgb(255, 255, 255),
        inset -0.5px -2px 4px rgb(255, 255, 255);
    }

    #num19 {
      color: white;
      font-size: 30px;
      font-weight: 600;
      background-color: rgba(0, 140, 255, 0.5);
      text-align: center;
      padding: 15px 0px;
      border-radius: 10px;
      box-shadow: -5px 5px 10px rgba(0, 140, 255, 0.6),
        -5px 5px 20px rgba(0, 140, 255, 0.6),
        inset -3px 2px 8px rgb(255, 255, 255);
      border: none;
      cursor: pointer;
    }
  }
}

@media screen and (max-width: 425px) {
  body {
    #calc {
      #show {
        background: transparent;
      }

      #show2 {
        background: transparent;
      }
    }
  }
}

@media screen and (max-width: 375px) {
  body {
    #calc {
      border-radius: 15px;
      padding: 20px 15px;
      gap: 7px;

      #show {
        background: transparent;
        font-size: 15px;
      }

      #show2 {
        background: transparent;
        font-size: 24px;
      }
    }
  }
}