style_clock.css

.bodycontainer
{
    background-color: black;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: -5;

}
body
{
    background-color: black;
}
.container
{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 700px;
    height: 200px;
    border-radius: 20px;
    position: relative;
    background:radial-gradient(white,rgb(1, 0, 1,0.4),rgb(78, 78, 67,0.4), rgb(213, 209, 203,0.4));
    z-index: 2;
}
.clock
{
    position: relative;
    width: 95%;
    height: 90%;
    background-color: black;
    color: white;
    border-radius: 20px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.text
{
    display: inline-block;
    font-size: 50px;
    font-family:'Trebuchet MS', sans-serif;
}
#hrs::after
{
    content: "HOURS";
    font-size: 16px;
    position: absolute;
    bottom: 25%;
    left: 85px;
}
#mins::after
{
    content: "MINS";
    font-size: 16px;
    position: absolute;
    bottom: 25%;
    left: 315px;
}
#secs::after
{
    content: "SECS";
    font-size: 16px;
    position: absolute;
    bottom: 25%;
    left: 545px;
}
#date
{
    position: absolute;
    left: 10px;
    top: 10px;
    font-size: 20px;
}
@keyframes neon {
    0%
    {
        background-color: white;
    }
    25%
    {
        background-color: green;
    }
    50%
    {
        background-color: blue;
    }
    75%
    {
        background-color: yellow;
    }
    100%
    {
        background-color: red;
    }
}