#clock {
	position: relative;
    box-sizing: border-box;
	height: 140px;
	width: 100%;
	padding: 8px;
	grid-gap: 8px;
	display: grid;
	grid:
		'hours hrsep minutes'
		'evday evday evday'
		'date date date';
	grid-template-columns: 1fr 16px 1fr;
	color: var(--textcol);
	text-align: center;
	place-items: stretch;
	font-size: xx-large;
    font-family: var(--font-mono);
    margin-top: 16px;
}

#clock_day {
	grid-area: date;
	font-size: medium;
}
#clock_day::before {
    content: '[' var(--timer-day) ']';
}
#clock_hrs {
	grid-area: hours;
    text-align: right;
    font-weight: bold;
}
#clock_hrs::before {
	content: var(--timer-hours);
}
#clock_hrsep {
	grid-area: hrsep;
}
#clock_min {
	grid-area: minutes;
    text-align: left;
    font-weight: bold;
}
#clock_min::before {
    content: var(--timer-minutes);
}
#clock_evday {
	font-size: large;
	grid-area: evday;
    font-weight: bold;
    margin-top: 16px;
}
#clock_evday::before {
    content: var(--timer-evday);
}