.clock-border-outer
{
    width: 550px;
    margin: 12px auto;
    border: 1px solid gray;
    border-radius: 14px;
    height: 240px;
    box-shadow: 0px 0px 0px 1px  black;
    /* box-shadow: inset 0 4px 8px  rgba(0, 0, 0, 0.2); */
    /* box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 -2px 4px rgba(0, 0, 0, 0.0); */
}

.clock-border-inner
{
    width: 96%;
    margin: 16px auto;
    border: 1px solid gray;
    border-radius: 14px;
    text-align: center;
    height: 85%;
    /* box-shadow: inset 0 4px 8px 5px rgba(0, 0, 0, 0.2); */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 -2px 4px rgba(0, 0, 0, 0.0);
}

.time
{
    font-size: 100px;
    color: rgb(69, 69, 69);
    font-weight: bold;
}

.date
{
    font-size: 40px;
    color: #777;
}

.btn
{
    padding: 12px 28px;
    background-color: rgb(48, 48, 48);
    color: bisque;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 18px;
    border: none;
    border-radius: 4px;
}

.theme
{
    text-align: center;
}

/* Code for Dark Mode Theme  */

body.darkmode
{
    background-color: #242424;
    transition: 1s;
}

.darkmode .clock-border-outer 
{
    /* box-shadow: 0px 0px 0px 2px white; */
    box-shadow: none ;
    border: 1px solid rgb(173, 173, 173);
    transition: 1.5s;
}

.darkmode .clock-border-inner
{
    border: none;
    /* border: 1px solid rgb(0, 0, 0); */
    box-shadow: inset 0 2px 12px rgb(218, 204, 204), inset 0 -2px 4px rgba(205, 205, 205, 0.831);
    transition: 2s;
}

.darkmode .time
{
    color:rgb(255, 232, 204);
    transition: 2.5s;
}

.darkmode .date
{
    color:bisque;
    transition: 3s;
}