body{
    padding:0;
    margin:0;
}
#container{
    height:100vh;
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#17181a;
}
#cal{
      height:350px;
      width:300px;;
      background:#222427;
      padding:5px;
      border-radius:10px;
      box-shadow:2px 2px 5px black; 
           
  }
#num{
    display:flex;
    justify-content:center;
}
#number{
    width:95%;
    height:50px;
    background:white;
    text-align:right;
    font-size:30px;
}
#number:focus{
    outline:none;
}
#key{
    width:95%;
    height:250px;
    text-align:right;
    font-size:30px;
    margin-top:30px;
    display:flex;
    flex-wrap:wrap;
    margin-left:5px;
    justify-content:space-around;

}
#key button{
    width:23%;
    height:40px;
    border-radius:5px;
    background:#5c5e62;
    color:#ffffff;
    border:none;
    margin:1px;
}
#key button:focus{
    outline:none;
}
.op{
    background-color:#ff9f0a;
}
#key button:nth-child(19){
    background:lightblue;
    border:none;
    font-weight:bold;
}
p{
   color:white;
   text-align:center;
   margin-top:25px;
   animation: ani 3s ease-in-out infinite;
}

@keyframes ani{
    0%{
        color:white
  }
    50%{
        color:red;
    }
    100%{
        color:white;
    }
}