body{
    background-color: rgb(233, 231, 231);
}
.box{
 border: 1px solid rgb(19, 18, 18);
 width: 20rem;
 height: 30rem;
 margin: auto;
 margin-top: 5%;
 background-color: rgb(22, 15, 15);
 border-radius: 20px;
}
input{
    border: 1px solid white;
    width: 18rem;
    height: 4rem;
    background-color: rgb(46, 9, 9);
    color: white;
    font-size: 30px;
    border-radius: 10px;
    margin-top: 5%;
    margin-left: 5%;
    text-align: right;
}
.btn{
    color: white;
    border: brown;
    opacity: 0.7;
    width: 4rem;
    height: 4rem;
    background-color: rgba(73, 72, 72, 0.671);
    font-size: 1.5rem;
    border-radius: 40%;
    margin-left: 30%;
    margin-top: 15%;
    cursor: pointer;
}
.num{
    color: white;
    border: brown;
    opacity: 0.7;
    width: 4rem;
    height: 4rem;
    background-color: rgba(73, 72, 72, 0.671);
    font-size: 1.9rem;
    border-radius: 40%;
    margin-left: 30%;
    
    cursor: pointer;
}
.btn:hover{
    background-color: orangered;
}
.num:hover{
    background-color: orangered;
}
 .dark-mode {
    background: black;
    color: white;
}

#toggleBtn {
    
   margin-top: 1%;
    font-size: 30px;
    color: orangered;
    background: none;
    border: none;
    cursor: pointer;
}