body {
    display: flex;     
    justify-content: center;    
    align-items: center;
    height: 100vh;  
       
}


.calculator {
    background-color: aqua;
    height: 80vh;
    max-width: 50vh;
    min-width: 45vh;
    border-radius: 20px;
}
.mainTable {
    border: 1px solid black;
    width: 100%;
    background-color: rgb(0, 0, 0);
    height: 100%;
    border-radius: 20px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.6); /* X, Y, blur, color */
}

.mainTable, tr, td {
    /* border: 1px solid black; */
    
}

.mainTable .mainScreen {
    height: 30%;
}
.keyboardScreen {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    background-color: rgb(41, 41, 41);
    margin: 0;

}
td {
  justify-content: center;  /* horizontal */
  align-items: center;      /* vertical */
}
button {
  border: none;
  display: block;       /* makes button behave like a block */
  /* margin: 0 auto;  */
  width: 90%;   
  height: 90%;   /* auto left/right centers it inside parent */
  font-size: 24px;
  border-radius: 10px;
}
button:hover {
  background-color: gray;
  color: white;
}
.operator {
    background-color: aqua;
}
.clear {
    background-color: rgb(233, 9, 9);
}
.mainScreen {
    padding: 10px;
    font-size: 40px;
    font-weight: bold;
    /* background-color: white; */
    
          /* vertical center */           /* optional spacing */        /* keeps a minimum size but grows if needed */
}

.mainScreen textarea {
   
    color: white;            /* text color */
    border: none;            /* remove border */
    outline: none;           /* remove focus outline */
    background: transparent; /* keep background clear */
    resize: none;            /* disable resize handle */
    box-shadow: none;        /* remove any shadows */
    font-size: xx-large;
    border-radius: 0;
}