* {
    margin: 0;
    padding:0;
    box-sizing: border-box;
}

body {
    width: 100%;
    min-height: 100vh;

    background: linear-gradient(45deg, #08001f, #30197d);
    color: white;

    position: relative;
}

.container {
    width: 75%;
    height: 50%;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.clock{
    width: 100%;
    height: 100%;

    background: rgba(235, 0, 255, 0.1);
    border-radius: 10px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.clock span {
    font: 5rem Arial, Helvetica, sans-serif;
    width: 7rem;
    display: inline-block;
    text-align: center;
    position: relative;
}

.clock span::after {
    font-size: 1.25rem;
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translate(-50%);
}

#hours::after {
    content: "Hours";
}
#minutes::after {
    content: "Mins";
}
#seconds::after {
    content: "Sec";
}