.bg {
    animation:slide 3s ease-in-out infinite alternate;
    background-image: linear-gradient(-60deg, rgb(45, 47, 44) 50%, rgb(247, 250, 252) 50%);
    bottom:0;
    left:-50%;
    opacity:.5;
    position:fixed;
    right:-50%;
    top:0;
    z-index:-1;
  }
  
  .bg2 {
    animation-direction:alternate-reverse;
    animation-duration:4s;
  }
 .bg3 {
    animation-duration:5s;
  }
  @keyframes slide {
    0% {
      transform:translateX(-25%);
    }
    100% {
      transform:translateX(25%);
    }
  }



  body {
    display: inline;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 10%;
  }
  
  .calculator {
    align-items: center;
    background-color: rgb(61, 64, 66);
    margin-top: 2%;
    width: 20%;
    border: 2px solid #000;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  }
  
  .display {
    width: 90%;
    padding: 10px;
    font-size: 20px;
  }
  
  .buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 5px;
  }
  
  button {
    padding: 10px;
    font-size: 20px;
    border: none;
    outline: none;
    cursor: pointer;
  }
  
  button:hover {
    background-color: #f0f0f0;
  }
  h1 {
    margin-top: 10%;
    text-align: center;
    color: #333;
    font-family:  monospace;
}

@media (max-width: 800px) {
  body{
    margin-left: 50px;
  }
  .calculator {
    width: 80%;
    max-width: 80% ;
    margin:40px;
    padding: 15px;
  }

  button {
    padding:15px;
    font-size: 20px;
  }

  .display {
    font-size: 18px;
  }
}