.digital-clock {
    border-radius: 5%;
}


.digital-date-day {
    font-size: 2rem;
}
.digital-date {
    top: 10%;
}
.digital-day {
    bottom: 10%;
}


.digital-time {
    font-size: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.time-digital {
    position: relative;
    margin: 0 0.5vw;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.1vw;
    display: inline-block;
}
.digital-hour {
    color: black;
}
.digital-minute {
    color: blue;
}
.digital-second {
    color: red;
}

.digital-session {
    position: initial;
    font-size: 1.5rem;
    margin-top: 0.8vw;
    padding: 0.3vw;
}
.digital-colons {
    animation: fadeInOut 1s infinite;
    color: #e1e1e1;
}
@keyframes fadeInOut {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 1;
    }
}


@media (max-width: 760px) {
    .digital-date-day {
        font-size: 1.8rem;
    }

    .time-digital {
        font-size: 4.8rem;
    }
    .digital-session {
        margin-top: 5vw;
        font-size: 1.3rem;
    }
}

@media (max-width: 480px) {
    .digital-date-day {
        font-size: 1.2rem;
    }

    .time-digital {
        font-size: 2.5rem;
    }
    .digital-session {
        margin-top: 2vw;
        font-size: 1rem;
    }
}