body{
    background-color: rgb(251, 248, 248);
    display: flex;
    justify-content: center;
    align-items: center;
}
.mainframe{
    display: flex;
    width: 35vw;
    height: 70vh;
    border: 5px solid #fbf9f9;
    background-color: pink;
    border-radius: 5%;
    align-items: center;
    justify-content: center;
    
}
.middleframe{
    width: 30vw;
    height: 60vh;
    background-color: white;
    align-items: center;
    justify-content: center;

}
#displayframe{
    width: 30vw;
    display: flex;
    flex-direction: row;
    padding-left: 1vw;
   
}
#displayframe1{
    width: 30vw;
    display: flex;
    flex-direction: row;
    padding-left: 1vw;
   
}
.maingrid{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: repeat(5,1.5fr);
    gap: 10px 20px;
    margin: 5vw 2vw 5vw 2vw;
    justify-content: center;
    align-items: center;
   
}
.buttonOnCal{
    padding: 0.8vw;
    background-color: white;
}
.item1{
    height: 50px;
    background-color: white;
    display: flex;
     justify-content: center;
    align-items: center;
}
.item2{
    height: 50px;
    background-color: white;
    display: flex;
     justify-content: center;
    align-items: center;
}
.item3{
    height: 50px;
    background-color: white;
    display: flex;
     justify-content: center;
    align-items: center;
}
.itemd{
    height: 50px;
    background-color: white;
    display: flex;
     justify-content: center;
    align-items: center;
}
.item4{
    height: 50px;
    background-color: white;
    display: flex;
     justify-content: center;
    align-items: center;
}
.item5{
    height: 50px;
    background-color: white;
    display: flex;
     justify-content: center;
    align-items: center;
}
.item6{
    height: 50px;
    background-color: white;
    display: flex;
     justify-content: center;
    align-items: center;
}
.itemM{
    height: 50px;
    background-color: white;
    display: flex;
     justify-content: center;
    align-items: center;
}
.item7{
    height: 50px;
    background-color: white;
    display: flex;
     justify-content: center;
    align-items: center;
}
.item8{
    height: 50px;
    background-color: white;
    display: flex;
     justify-content: center;
    align-items: center;
}
.item9{
    height: 50px;
    background-color: white;
    display: flex;
     justify-content: center;
    align-items: center;
}
.itemS{
    height: 50px;
    background-color: white;
    display: flex;
     justify-content: center;
    align-items: center;
}

.itemZero{
    height: 50px;
    background-color: white;
    display: flex;
     justify-content: center;
    align-items: center;
}
.itemDel{
    height: 50px;
    background-color: white;
    display: flex;
     justify-content: center;
    align-items: center;
}
.itemPer{
    height: 50px;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
.itemAdd{
    height: 50px;
    background-color: white;
    display: flex;
     justify-content: center;
    align-items: center;
}