@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

body {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab,green, yellow);
  background-size: 400% 400%;
    animation: gradient 15s ease-in-out infinite;
    font-family: 'Bebas Neue', cursive;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

#calculator{
    width: 900px;
    height: 80vh;
    margin: auto;
    cursor: pointer;
}
#calbutton{
    display: grid;
    grid-template-columns: auto auto auto auto;
    background-color: #ffffff;
    padding: 10px;
    border: 5px solid black;
    cursor: pointer;
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab,green, yellow);
  background-size: 400% 400%;
    animation: gradient 15s ease-in-out infinite;
}
#dispaly-container{
    width: 782px;
    height: 7vh;
    padding: 6%;
    background-color: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
    border: 5px solid rgb(0, 0, 0);
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    font-size: 2.5rem;
    text-align: right;
}
#display{
    position: relative; 
     bottom: 55px;
}
.button{
    border: 2px solid black;
    padding: 22px;
    margin: 2px;
    text-align: center;
    font-size: 2rem;
    font-weight: 800;
    border-radius: 15px;
}
.button:last-child:nth-child(4n - 1) {
  grid-column: span 2;
}
.button:hover{
    background-color: silver;
}