body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;  
    width: 100vw;                   
    background: 
      radial-gradient(
        circle at 0% 0%, 
        rgba(255, 255, 255, 0.84) 40%, 
        transparent 90%
      ),
  
      radial-gradient(
        circle at 100% 100%, 
        rgba(0, 62, 103, 0.844) 30%, 
        transparent 80%
      ),
      linear-gradient(
        to bottom, 
        rgba(255, 103, 192, 0.932),     
        rgba(255, 12, 12, 0.795)
      ),
    
      linear-gradient(
        to right, 
        rgba(123, 255, 0, 0.797),     
        rgba(0, 255, 229, 0.888)
      );
    background-color: #ffdd00;   
    margin: 0;                           
  }
  
  
  .calculator {

    display: flex; 
    flex-direction: column;
    align-items: flex-start;
    align-items: center;

    background:
      radial-gradient(
        circle at 0% 0%, 
        rgb(110, 255, 209) 40%, 
        transparent 90%
      ),
  
      radial-gradient(
        circle at 100% 100%, 
        rgba(52, 174, 255, 0.844) 30%, 
        transparent 80%
      );
    
    
    padding: 2rem;   
    margin: 1rem;                           
    border-radius: 70px;                      
    box-shadow: 20px 20px 60px rgb(255, 255, 255); 
    
    height: 80vh;
    width: 80vw;   
    
    max-height: 1000px;
    max-width: 500px ;

  }
  
  
  
  #display {
    display: flex;
    background-color: #ffd289;
    align-items: center;
    justify-content: center;
    
    width: 75vw;                  
    height: 10vh;                                     
    max-height: 100px;
    max-width: 500px ;


    border-radius: 20px;          
    border: 1px solid #6c07ab;      
    box-sizing: border-box;     
  }
  
  #out{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    text-align: right; 

    height: 7vh;
    width: 69vw;
    max-height: 150px;
    max-width: 470px ;
    
    border-radius: 10px;
    background-color: #f783ac;
    border: 2px solid #000000 ;

    font-size: xx-large;
    font-weight: bolder;

    box-shadow: 0px 0px 10px  #560101;


  }



  #buttons{
    display: flex;
    flex-direction: column;


  } 
  
  .row{
    display: flex;
    flex-direction: row;
  }
  

  button{
    background: linear-gradient(
      45deg,
      #ff0000a5 0%,
      #ffffff 50%,
      rgb(255, 213, 0) 100%
    );

    display: flex;
    justify-content: center;
    align-items: center;

    height: 15vh;
    width: 15vw;
    max-height: 160px;
    max-width: 100px ;


    padding: 1rem;
    margin: .4rem;

    border-radius: 100px;

    font-size: xx-large;
    font-weight: bolder;


  }




  button:hover {
    background: linear-gradient(
      45deg,
      #bfbfbf,
      #f783ac
    );
    transform: translateY(-2px);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
  }
  

  button.operator {
    background-color: #000000;    
    color: #000000;                  
  }
  

  button.operator:hover {
    background-color: #eaddd2;   
  }