/* ======== STYLE =========*/

body {
    font-family: var(--calibri-font);
    font-size: var(--large-font-size);
    font-weight: bold;
    background-color: var(--bgcolor);
}

.clock {
    padding: 40px;
    border-radius: 10px;
    border: 4px solid var(--contrast-color);
    background: rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 10px 6px rgba(255, 255, 255, 0.2);
}

.date,
.time {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--ligther-color);
    line-height: 1.1;
}

#week-day {
    color: var(--contrast-color);
}

#seconds {
    color: var(--darker-color);
}

#current-date {
    font-size: var(--small-font-size);
    font-weight: normal;
    font-family: var(--poppins-font);
}

#separator-1,
#separator-2 {
    display: none;
}

@media(min-width: 820px) {

    #separator-1,
    #separator-2 {
        display: inline;
    }

    .date {
        padding: 15px;
        border-right: 2px dotted var(--ligther-color);
    }

    .time {
        margin-left: 20px;
        display: flex;
        flex-direction: row;
    }

    .clock {
        padding: 20px;
    }

}