*{
    margin: 0;
    padding: 0;
}
body{
    background-image: linear-gradient( 135deg, #FFDB01 10%, #0E197D 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    height:100vh;
}
.box{
    background-color:black;
    height:50vh;
    width:60vw;
    border-radius: 10px;
    padding:20px;
}
.display{
    background-color: rgb(2, 36, 36);
    height:8vh;
    padding:3px;
    color: rgb(69, 157, 234);
    text-align-last: right;
}
body .buttons{
    display: flex;
    justify-content: space-between;
} 
body .buttons .part{
    height: 35vh;
    width: calc((60vw - 20px) / 2);
    padding: 2.2px;
    /* border:0.1px solid aqua; */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
body .buttons .part .p1{
    width: 5vw;
    height: 8vh;
    margin: 0.2vw 0.1vw;
    /* background-color: rgb(101, 54, 255); */
    background-color: #5457f1;
    font-family: 'Slabo 27px', serif;
    font-weight: bolder;
    animation-name: rgb;
    animation-duration:10s;
    /* animation-direction:reverse; */
    animation-iteration-count: infinite;
}
@keyframes rgb{
    25%{
        background-color:silver;
    }
    50%{
        background-color: rgb(172, 181, 46);
        /* color: azure; */
    }
    75%{
        background-color: silver;
    }
}
body .buttons .part .bigb{
    width: 7vw;
    font-family: 'Slabo 27px', serif;
}