:root
{
	--segment-active-fill:   hsl(0, 100%, 34%);
	--segment-inactive-fill: hsl(0, 0%, 3%);
	--circle-active-fill:    hsl(0, 100%, 34%);
	--circle-inactive-fill:  hsl(0, 0%, 3%);
	--hour-circle-fill:      hsl(0, 0%, 40%);
}

body
{
	height:           100vh;
	width:            100vw;
	margin:           0;
	overflow:         clip;
	background-color: black;
}

#ClockFace
{
	height: 100vh;
	width:  100vw;
}

svg#Clock
{
	height: 100vh;
	width:  100vw;
}

svg circle.active
{
	fill: var(--circle-active-fill);
}

svg circle.inactive
{
	fill: var(--circle-inactive-fill);
}

svg #Hour_Circle circle
{
	fill: var(--hour-circle-fill);
}

svg circle
{
	fill: var(--circle-inactive-fill);
}

polygon.Segment
{
	fill: var(--segment-inactive-fill);
}

polygon.Separator
{
	fill: var(--segment-active-fill);
}

#LED_Time_Colon polygon
{
	fill: var(--segment-active-fill);
}

.One .Segment_B, .One .Segment_C
{
	fill: var(--segment-active-fill);
}

.Two .Segment_A, .Two .Segment_B, .Two .Segment_G, .Two .Segment_E, .Two .Segment_D
{
	fill: var(--segment-active-fill);
}

.Three .Segment_A, .Three .Segment_B, .Three .Segment_G, .Three .Segment_C, .Three .Segment_D
{
	fill: var(--segment-active-fill);
}

.Four .Segment_F, .Four .Segment_B, .Four .Segment_G, .Four .Segment_C
{
	fill: var(--segment-active-fill);
}

.Five .Segment_A, .Five .Segment_F, .Five .Segment_G, .Five .Segment_C, .Five .Segment_D
{
	fill: var(--segment-active-fill);
}

.Six .Segment_A, .Six .Segment_F, .Six .Segment_G, .Six .Segment_E, .Six .Segment_C, .Six .Segment_D
{
	fill: var(--segment-active-fill);
}

.Seven .Segment_A, .Seven .Segment_B, .Seven .Segment_C
{
	fill: var(--segment-active-fill);
}

.Eight .Segment_A, .Eight .Segment_F, .Eight .Segment_B, .Eight .Segment_G, .Eight .Segment_E, .Eight .Segment_C, .Eight .Segment_D
{
	fill: var(--segment-active-fill);
}

.Nine .Segment_A, .Nine .Segment_F, .Nine .Segment_B, .Nine .Segment_G, .Nine .Segment_C, .Nine .Segment_D
{
	fill: var(--segment-active-fill);
}

.Zero .Segment_A, .Zero .Segment_F, .Zero .Segment_B, .Zero .Segment_E, .Zero .Segment_C, .Zero .Segment_D
{
	fill: var(--segment-active-fill);
}
