body {
   background: linear-gradient(to right, white, rgb(201, 236, 226));
 }
 h1 {
    font-size: 5rem;
    color:rgb(85, 226, 184);
    font-weight: 600;
    padding: 50px;
    text-align: center;
    padding-top: 40px;
    margin-top: 40px;
 }

 .u {
   font-size: 2rem;
 } 

    .logo {
    width: 10%;
    margin: 50px;
   }
   img {
    width: 100%;
   }
   h1 {
    text-align: center;
   }
   #calculator {
      display: flex;
      flex-direction: column;
      width: 20rem;
      margin:auto;
    background-color: rgb(181, 230, 215);
    border: solid 5px rgb(118, 168, 153);
    justify-content: center;
   }
   #screen {
      background-color: rgb(255, 255, 255);
      height: 50px;
      width: 90%;
      margin: 10px auto;
      color: rgb(110, 128, 148);
      font-size: 2rem;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      border: solid 2px whitesmoke;
   }
   #numbers {
    display: flex;
    flex-wrap: wrap;
   }
   .number {
    background: linear-gradient(to right, rgb(150, 221, 200), rgb(115, 204, 177));
    margin: 4px;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    box-shadow: 3px 3px #6d6c6c;
    color: white;
   }

   #equal {
      margin: 4px;
    width: 60px;
    height: 60px;
    background: linear-gradient(to right, rgb(105, 209, 178), rgb(70, 189, 153));
   }
   
   .operator {
    background: linear-gradient(to right, rgb(105, 209, 178), rgb(70, 189, 153));
    margin: 4px;
    width: 50px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    box-shadow: 3px 3px #888888;
    color: #ffffff;
   }
   .number:active {
    box-shadow: 0px 0px;
   }

   .clear {
    background: linear-gradient(to right, rgb(62, 185, 148), rgb(41, 170, 131));
    width: 50px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    box-shadow: 3px 3px #888888;
    color: #ffffff;
   }

   #operators {
    display: flex;
    flex-wrap: wrap;
   }

   .operator:active {
    box-shadow: 0px 0px;
   }

   .clear:active {
    box-shadow: 0px 0px;
   }

   #buttons {
      display: flex;
      cursor: pointer;
   }

   .button {
      display: flex;
      justify-content: center;
      font-size: 2rem;
      font-weight: bold;
      margin: 4px;
   }

   p {
      text-align: center;
      color: rgb(130, 187, 170);

   }