body{
  background-color: antiquewhite;
}
.site{
    display:flex;
    
    align-items: center;
 
   
}
.words{
    font-size: 50px;
    width:50%;
    color:rgb(88, 88, 88);
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    margin-left:12px;
}


/* .calculator{
    background-image: url(https://th.bing.com/th/id/OIP.F6dOWcTbf8DysWUnxEqoOAAAAA?rs=1&pid=ImgDetMain);
    background-size: cover;
} */

.container{
    margin-left:160px;
    margin-top:40px;
    display: flex;
    flex-direction: column;
    gap:15px;
    padding:13px;
    height:560px;
    width:255px;
    border: 1px solid transparent;
    opacity:0.9;
   ;
    border-radius:24px;
    background-color: rgb(57, 57, 57);
    background-image: url(https://th.bing.com/th/id/OIP.F6dOWcTbf8DysWUnxEqoOAAAAA?rs=1&pid=ImgDetMain);
}
.info{
    display: flex;
    gap:1px;
}
.menu{
    color:white;
    padding:10px;
}
 p{
    font-size: 30px;
    margin:0;
    color:white;

 }
 #display{
 color:white;
 padding-top:40px;
 text-align:right;
 padding-right:10px;
 }

#screen{
    text-align:right;
    background-color: transparent;
    border-color:transparent;
    width:250px;
    height:60px;
    font-size: 40px;
    color:white;
    padding-right:10px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border-radius: 6px;

}
#buttons{
   margin:0px;
    display:flex;
    flex-direction: column;
    flex-wrap:wrap;
    justify-content: cent;
    align-items: center;
    
}
.btn{
    
    width:55px;
    height:55px;
    border-radius: 20px;
    border:1px solid transparent;
    background-color: rgb(173, 172, 172);
    margin-top:8px;
    font-size:16px;
    margin-right: 5px;
     font-family:Verdana, Geneva, Tahoma, sans-serif;
     overflow-y: hidden;
   
    
}

numbutton{
    margin-top:1px;
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

@keyframes shake {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(-5px); }
  50%  { transform: translateX(5px); }
  75%  { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

.shake {
  animation: shake 0.4s ease;
}
.btn:hover{
    background-color: rgb(148, 196, 209);
}
.num{
    background-color: rgb(124, 124, 124);
    color:rgb(0, 200, 255);
    font-size: 20px;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
}
.num:hover{
   background-color: rgb(146, 147, 147);
}

.sym{
    background-color: royalblue;
    color:rgb(0, 200, 255);
    font-size:25px;

}
.sym:hover{
    background-color: rgb(70, 112, 237);
}
.sci{
    height:35px;
    background-color: rgb(81, 81, 81);
     width:55px;
     color:rgb(112, 228, 248);
       border-radius: 20px;
    border:1px solid transparent;
   display:none;
    margin-top:5px;
    font-size:16px;
    margin-right: 5px;
     font-family:Verdana, Geneva, Tahoma, sans-serif;
      opacity: 0; 
  /* transition: all 0.9s ease;
  opacity:0;
  transform:translateY(-10px); */
   /* /* transition: transform 0.9s ease;
    transform:translateY(-100px);
     opacity: 0;  */
}
/* .btn{
    background-color: rgb(0, 200, 255);
} */
/* .btn {
  transition: transform 0.6s ease, max-height 0.6s ease;
  transform: translateY(-118px);
  max-height: 55px;
} */

/* Shrink standard buttons in scientific mode */
.scientific-mode .btn:not(.sci) {
   /* transform: translateY(0px); */
   max-height:35px;

} 
.scientific-mode .buttons{
    overflow:hidden;
}
.scientific-mode .sci{
    display:inline-block;
    opacity:1;
    /* transition: transform 0.9s ease;
    transform:translateY(-10px); */
    transform:translateY(3px);
    
}