* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
  background: 
    radial-gradient(
      circle at 20% 80%,
      rgba(142, 7, 235, 0.7) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 20%,
      rgba(235, 7, 131, 0.7) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 40% 40%,
      rgba(217, 7, 235, 0.6) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 60% 60%,
      rgba(223, 85, 235, 0.6) 0%,
      transparent 50%
    );
  
  width: 100%;
  height: 100vh;
  backdrop-filter: blur(40px);
  
  /* Animação suave */
  animation: float 6s ease-in-out infinite;
}

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

div{
    background: 
        radial-gradient(
            rgba(115, 0, 150, 0.1) 0%,       /* Muito mais escuro */
            rgba(150, 5, 85, 0.3) 40%,       /* Muito mais escuro */
            rgba(115, 0, 150, 0.7) 100%       /* Muito mais escuro */
        );
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(40px);

    width: 375px;
    height: 568px;
    border-radius: 30px;
    padding: 20px;
    z-index: 99;
    align-items: center;
    border: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(7, 1fr);
}

input {
    font-size: 48px;
    background-color: #ede9edde;
    border: none;
    outline: none;
    text-align: right;
    padding-top: 50px;
    color: rgb(93, 68, 100);
    grid-row: 1/3;
    grid-column: 1/5;
    border-radius: 15px;
}

button {
    font-size: 24px;
    border: none;
    margin: 7px;
    padding: 20px;
    border-radius: 10px;
    cursor: pointer;
    transform: translateY(0);
    transition: transform 0.3s ease;
}

.gray-button {
    background-color: rgba(247, 188, 250, 0.5);
    color: #EDE9ED;
}

.light-purple {
    background-color: rgba(113, 43, 226, 0.527);
    color: #EDE9ED;
}

.black-button{
    background-color: rgba(253, 113, 218, 0.747);
    color: #EDE9ED;
}

button:hover {
    transform: translateY(-3px);
}

.equal {
    grid-row: 6/8;
    grid-column: 4/5;
    padding-bottom: 61px;
    padding-top: 61px;
}

.zero {
    grid-column: 1/3;
}