*{
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: sans-serif;
     
     
}

body{
     background-image: linear-gradient(to right, rgb(230, 108, 108),rgb(238, 224, 198),rgb(250, 131, 224));
}


.main{
   
     width: 13rem;
     height:fit-content;
     
     margin:10% auto;
     box-shadow: 1px 1px 20px 5px black;
     box-sizing: border-box;
}



.buttons{
   
     display: flex;
     height: fit-content;
     /* width: 12rem; */
     flex-wrap: wrap;
     box-sizing: border-box;
}



.alphs{
    
     display: flex;
     flex-wrap: wrap;
     width: 14rem;
     height: 12rem;
    
}



.buttons2{
     width: 3rem;
     height: 3rem;
     margin: 2px;
     background: rgb(206, 182, 182);
     border-radius: 5px;
     cursor: pointer;

     box-shadow: 0px 1px 10px 0px black;
     text-align: center;
     padding: 3px 5px 0 0;
     font-size: larger;

}
.buttons3{
     width: 6.2rem;
     height: 3rem;
     margin: 2px;
     background: rgb(206, 182, 182);
     border-radius: 5px;
     cursor: pointer;

     box-shadow: 0px 1px 10px 0px black;
     text-align: center;
     padding: 3px 5px 0 0;
     font-size: larger;
}

.screen{
     height: 5rem;
    margin-bottom: 5px;
    display: flex;
    flex-direction: column;
    justify-content: right;
    align-items: flex-end;
    background: rgba(233, 190, 142, 0.912);
   

}
.mainalph{
     font-size: larger;
  
     margin: 30px 20px 0 0;
     display: inline-block;

}

.firstalph{
     align-self: right;
     display: inline-block;
     margin:5px 10px 0 0
}
.buttons2:hover{
     background-color: rgb(197, 134, 134);
}
.buttons3:hover{
     background-color: rgb(216, 7, 7);
     color: white;
}