/* floating toggle switch */
p#togglemode {
	float: left;
}

/* toggle button formatting and layout */
label.toggle {
	position : relative ;
	display : inline-block;
	width : 2.4em;
	height : 4.4em;
	background-color: hsl(0, 0%, 0%);
	border-radius: 2em;
	border: 0.1em solid hsl(0, 0%, 40%);
}

/* After slide changes */
label.toggle:after {
	content: '';
	position: absolute;
	width: 2em;
	height: 2em;
	border-radius: 2em;
	background-color: hsl(0, 0%, 95%);
	margin: 0.1em;
	padding: 0.1em;
	transition:  all 0.5s;
}

/* Checkbox checked effect */
input.mode:checked + label.toggle::after {
	top: 2em;
	background-color: hsl(0, 0%, 5%);
}

/* Checkbox checked toggle label bg color */
input.mode:checked + label.toggle {
	background-color: hsl(0, 0%, 65%);
}

/* Checkbox vanished */
input.mode {
	display : none;
}

li { padding-left: 0.5rem; }

body:has(input.mode:checked) h1,
body:has(input.mode:checked) h2,
body:has(input.mode:checked) h3,
body:has(input.mode:checked) h4,
body:has(input.mode:checked) h5 {
	color: hsl(0, 0%, 85%);
	background-color: hsl(0, 0%, 25%);
	border: thin solid hsl(0, 0%, 45%);
}

h1, h2, h3, h4, h5 {
	padding: 0.2em;
	text-align: center;
	font-family: sans-serif;
	border: thin solid hsl(0, 0%, 45%);
	border-top-left-radius:     0.2em 0.2em;
	border-bottom-left-radius:  0.2em 0.2em;
	border-bottom-right-radius: 0.2em 0.2em;
	border-top-right-radius:    0.2em 0.2em;
	background-color: hsl(0, 0%, 85%);
}

body {
	/* light mode */
        background-color: hsl(0, 0%, 100%);
}

body:has(input.mode:checked) {
	/* dark mode */
        color: hsl(0, 0%, 0%);
	background-color: hsl(0, 0%, 10%);
}

body details {
	border: thin solid hsl(0, 0%, 45%);
	border-radius: 0.3rem;
	margin-bottom: 0.5rem;
	background-color: hsl(0, 0%, 75%);
}

body details[open] {
	border: thin solid hsl(0, 0%, 45%);
	background-color: hsl(0, 0%, 75%);
}

body:has(input.mode:checked) details {
	color: hsl(0, 0%, 50%);
	background-color: hsl(0, 0%, 20%); }

body details > summary {
	font-weight: bold;
	list-style: none;
	border-radius: 0.3rem;
	background-color: hsl(0, 0%, 80%);
}

body details[open] > summary {
	background-color: hsl(0, 0%, 75%);
}

body:has(input.mode:checked) details > summary {
	background-color: hsl(0, 0%, 20%); }
body:has(input.mode:checked) details > summary::before {
	font-weight: bold;
	list-style: none;
	border-radius: 0.3rem;
	background-color: hsl(0, 0%, 35%);
}

body details[open]:not(:has(details)) {
	background-color: hsl(0, 0%, 75%);
}

body:has(input.mode:checked) details:not(:has(details)) > summary,
body:has(input.mode:checked) details:not(:has(details)),
body:has(input.mode:checked) details[open]:not(:has(details)) {
	background-color: hsl(0, 0%, 20%);
}

dt > details > summary::before {
	content: "▶";
	border-radius: 3rem 0 0 3rem;
	padding-left: 0.5em;
	padding-right: 0.5em;
	font-size: 150%;
	font-weight: bold;
}

dt > details[open] > summary::before {
	padding-left: 0.5em;
	padding-right: 0.5em;
}

body details[open] > summary {
	border-bottom: none; }

body:has(input.mode:checked) details[open] > summary {
	color: hsl(0, 0%, 50%); }

body dt > details > summary::before,
body dt.ok > details > summary::before {
        background-color: hsl(0, 0%, 80%); }

body dt.ok > details[open] > summary::before {
        background-color: hsl(0, 0%, 75%); }

body dt.recent details > summary::before,
body dt.unmodified details > summary::before,
body dt.unmodified2 details > summary::before,
body dt.missing details > summary::before,
body dt.inactive details > summary::before,
body dt.network details > summary::before,
body dt.ttl details > summary::before,
body dt.oversize details > summary::before,
body dt.access details > summary::before,
body dt.redirection details > summary::before,
body dt.tlserror details > summary::before,
body dt.wonky details > summary::before,
body dt.broken details > summary::before,
body dt.malformed details > summary::before {
        background-color: hsl(0, 0%, 65%); }
body dt.recent2 details > summary::before {
	color: hsl(0, 85%, 35%);
	background-color: hsl(0, 0%, 65%); }
body dt.recent2 > details[open] > summary::before {
        color: hsl(0, 85%, 35%); }

body dt.toomany details > summary::before,
body dt.toomany details[open] > summary::before,
body dt.unmodified2 details > summary::before,
body dt.unmodified2 details[open] > summary::before {
	color: hsl(0, 100%, 30%);
	background-color: hsl(0, 0%, 65%); }

body dt.recent details > summary,
body dt.recent2 details > summary,
body dt.unmodified details > summary,
body dt.unmodified2 details > summary,
body dt.toomany details > summary,
body dt.missing details > summary,
body dt.inactive details > summary,
body dt.network details > summary,
body dt.ttl details > summary,
body dt.oversize details > summary,
body dt.access details > summary,
body dt.redirection details > summary,
body dt.tlserror details > summary,
body dt.wonky details > summary,
body dt.broken details > summary,
body dt.malformed details > summary {
        background-color: hsl(0, 0%, 65%); }

body dt.recent details,
body dt.recent2 details,
body dt.unmodified details,
body dt.unmodified2 details,
body dt.toomany details,
body dt.missing details,
body dt.inactive details,
body dt.network details,
body dt.ttl details,
body dt.oversize details,
body dt.access details,
body dt.redirection details,
body dt.tlserror details,
body dt.wonky details,
body dt.broken details,
body dt.malformed details {
        background-color: hsl(0, 0%, 65%); }

body dt.recent details li,
body dt.recent2 details li,
body dt.unmodified details li,
body dt.unmodified2 details li,
body dt.missing details li,
body dt.inactive details li,
body dt.toomany details li,
body dt.missing details li,
body dt.network details li,
body dt.ttl details li,
body dt.oversize details li,
body dt.access details li,
body dt.redirection details li,
body dt.tlserror details li,
body dt.broken details li,
body dt.malformed details li {
        background-color: hsl(0, 0%, 60%);
	color: hsl(0, 0%, 15%);
}

body:has(input.mode:checked) dt > details > summary::before {
	color: hsl(0, 0%, 70%);
        background-color: hsl(0, 0%, 20%); }

body:has(input.mode:checked) dt.ok > details > summary::before {
	color: hsl(0, 0%, 70%);
	background-color: hsl(0, 0%, 20%); }

body:has(input.mode:checked) dt.ok > details[open] > summary::before {
	color: hsl(0, 0%, 70%);
	background-color: hsl(0, 0%, 20%); }

body:has(input.mode:checked) dt.recent details > summary {
	color: hsl(0, 0%, 65%);
	background-color: hsl(0, 0%, 35%); }

body:has(input.mode:checked) dt.ok details > summary {
	border-bottom: none;
	color: hsl(0, 0%, 70%);
        background-color: hsl(0deg 0% 20%); }

body:has(input.mode:checked) dt.ok details[open] > summary {
	border-bottom: none;
	color: hsl(0, 0%, 70%);
        background-color: hsl(0, 0%, 20%); }

body:has(input.mode:checked) dt.recent details > summary::before,
body:has(input.mode:checked) dt.unmodified details > summary::before,
body:has(input.mode:checked) dt.missing details > summary::before,
body:has(input.mode:checked) dt.inactive details > summary::before,
body:has(input.mode:checked) dt.network details > summary::before,
body:has(input.mode:checked) dt.ttl details > summary::before,
body:has(input.mode:checked) dt.oversize details > summary::before,
body:has(input.mode:checked) dt.access details > summary::before,
body:has(input.mode:checked) dt.redirection details > summary::before,
body:has(input.mode:checked) dt.tlserror details > summary::before,
body:has(input.mode:checked) dt.wonky details > summary::before,
body:has(input.mode:checked) dt.broken details > summary::before,
body:has(input.mode:checked) dt.malformed details > summary::before {
	color: hsl(0, 0%, 75%);
	background-color: hsl(0, 0%, 35%); }
body:has(input.mode:checked) dt.toomany details > summary::before,
body:has(input.mode:checked) dt.unmodified2 details > summary::before,
body:has(input.mode:checked) dt.recent2 details > summary::before {
	color: hsl(0, 100%, 70%);
	background-color: hsl(0, 0%, 40%); }

body:has(input.mode:checked) dt.recent details > summary,
body:has(input.mode:checked) dt.unmodified details > summary,
body:has(input.mode:checked) dt.missing details > summary,
body:has(input.mode:checked) dt.inactive details > summary,
body:has(input.mode:checked) dt.network details > summary,
body:has(input.mode:checked) dt.ttl details > summary,
body:has(input.mode:checked) dt.oversize details > summary,
body:has(input.mode:checked) dt.access details > summary,
body:has(input.mode:checked) dt.redirection details > summary,
body:has(input.mode:checked) dt.tlserror details > summary,
body:has(input.mode:checked) dt.wonky details > summary,
body:has(input.mode:checked) dt.broken details > summary,
body:has(input.mode:checked) dt.malformed details > summary {
	color: hsl(0, 0%, 65%);
	background-color: hsl(0, 0%, 35%); }
body:has(input.mode:checked) dt.toomany details > summary,
body:has(input.mode:checked) dt.unmodified2 details > summary,
body:has(input.mode:checked) dt.recent2 details > summary {
	color: hsl(0, 0%, 65%);
	background-color: hsl(0deg 0% 40%); }

body:has(input.mode:checked) dt.recent details[open] > summary,
body:has(input.mode:checked) dt.unmodified details[open] > summary,
body:has(input.mode:checked) dt.missing details[open] > summary,
body:has(input.mode:checked) dt.inactive details[open] > summary,
body:has(input.mode:checked) dt.network details[open] > summary,
body:has(input.mode:checked) dt.ttl details[open] > summary,
body:has(input.mode:checked) dt.oversize details[open] > summary,
body:has(input.mode:checked) dt.access details[open] > summary,
body:has(input.mode:checked) dt.redirection details[open] > summary,
body:has(input.mode:checked) dt.tlserror details[open] > summary,
body:has(input.mode:checked) dt.wonky details[open] > summary,
body:has(input.mode:checked) dt.broken details[open] > summary,
body:has(input.mode:checked) dt.malformed details[open] > summary {
	color: hsl(0, 0%, 75%);
	background-color: hsl(0, 0%, 35%); }
body:has(input.mode:checked) dt.toomany details[open] > summary,
body:has(input.mode:checked) dt.unmodified2 details[open] > summary,
body:has(input.mode:checked) dt.recent2 details[open] > summary {
	color: hsl(0, 0%, 65%);
	background-color: hsl(0, 0%, 40%); }

body:has(input.mode:checked) dt.recent details[open],
body:has(input.mode:checked) dt.unmodified details[open],
body:has(input.mode:checked) dt.missing details[open],
body:has(input.mode:checked) dt.inactive details[open],
body:has(input.mode:checked) dt.network details[open],
body:has(input.mode:checked) dt.ttl details[open],
body:has(input.mode:checked) dt.oversize details[open],
body:has(input.mode:checked) dt.access details[open],
body:has(input.mode:checked) dt.redirection details[open],
body:has(input.mode:checked) dt.tlserror details[open],
body:has(input.mode:checked) dt.wonky details[open],
body:has(input.mode:checked) dt.broken details[open],
body:has(input.mode:checked) dt.malformed details[open] {
        background-color: hsl(0, 0%, 35%); }
body:has(input.mode:checked) dt.toomany details[open],
body:has(input.mode:checked) dt.unmodified2 details[open],
body:has(input.mode:checked) dt.recent2 details[open] {
	background-color: hsl(0, 0%, 40%); }

body:has(input.mode:checked) dt.recent details[open] li,
body:has(input.mode:checked) dt.recent2 details[open] li,
body:has(input.mode:checked) dt.unmodified details[open] li,
body:has(input.mode:checked) dt.unmodified2 details[open] li,
body:has(input.mode:checked) dt.toomany details[open] li,
body:has(input.mode:checked) dt.missing details[open] li,
body:has(input.mode:checked) dt.inactive details[open] li,
body:has(input.mode:checked) dt.network details[open] li,
body:has(input.mode:checked) dt.ttl details[open] li,
body:has(input.mode:checked) dt.oversize details[open] li,
body:has(input.mode:checked) dt.access details[open] li,
body:has(input.mode:checked) dt.redirection details[open] li,
body:has(input.mode:checked) dt.tlserror details[open] li,
body:has(input.mode:checked) dt.broken details[open] li,
body:has(input.mode:checked) dt.malformed details[open] li {
	color: hsl(0, 0%, 85%);
        background-color: hsl(0, 0%, 50%); }

/* html body dl dt details dd details ul li */
dl {
	margin-left:    1.5em;
	margin-right:   1.5em;
	padding-bottom: 0.5em;
}

dd > details > ul {
	margin-bottom: 0.3em;
}

/* https://en.wikipedia.org/wiki/HTML_color_names#Basic_colors */

body li a:link { color: hsl(240, 100%, 50%); }
body:has(input.mode:checked) li:nth-child(odd) a:link {
	color: hsl(240, 100%, 69%); }
body:has(input.mode:checked) li:nth-child(even) a:link {
	color: hsl(240, 85%, 67%); }

body li a:visited { color: hsl(300, 100%, 25%); }
body:has(input.mode:checked) li:nth-child(odd) a:visited {
	color: hsl(270, 66%, 55%); }
body:has(input.mode:checked) li:nth-child(even) a:visited {
	color: hsl(270, 68%, 55%); }
body:has(input.mode:checked) li:hover a:link {
	color: hsl(240, 90%, 20%); }

body li span.date {
	font-family: monospace;
	font-weight: bold;
}

body li:nth-child(odd) {
	background-color: hsl(0, 0%, 100%); }
body li:nth-child(even) {
	background-color: hsl(0, 0%, 90%); }

body li:nth-child(odd) span.date {
	color: hsl(0, 0%, 25%); }
body li:nth-child(even) span.date {
	color: hsl(0, 0%, 15%); }
body li:hover span.date {
	color: hsl(0, 0%, 22%); }

body:has(input.mode:checked) li:nth-child(odd) span.date {
	color: hsl(0, 0%, 50%); }
body:has(input.mode:checked) li:nth-child(even) span.date {
	color: hsl(0, 0%, 45%); }
body:has(input.mode:checked) li:hover span.date {
	color: hsl(0, 0%, 25%); }

body details ul li {
	border-radius: 0.2em;
	list-style: none;
	border: thin solid hsl(0, 0%, 50%); }

li:nth-child(odd):hover  { background-color: hsl(120, 25%, 85%); }
li:nth-child(even):hover { background-color: hsl(120, 25%, 85%); }
body:has(input.mode:checked) li:nth-child(odd):hover  {
	background-color: hsl(120, 9%, 50%); }
body:has(input.mode:checked) li:nth-child(even):hover {
	background-color: hsl(120, 9%, 50%); }
body:has(input.mode:checked) dt.missing li:hover {
	color: hsl(0, 0%, 15%);
	background-color: hsl(120, 9%, 50%); }
body:has(input.mode:checked) dt.inactive li:hover {
	color: hsl(0, 0%, 15%);
	background-color: hsl(120, 9%, 50%); }
body:has(input.mode:checked) details ul li:nth-child(odd)  {
	border: thin solid hsl(0, 0%, 35%);
	background-color: hsl(0, 0%, 17%);}
body:has(input.mode:checked) details ul li:nth-child(even) {
	border: thin solid hsl(0, 0%, 30%);
	background-color: hsl(0, 0%, 13%); }

/* regular feed */
dt.ok > details > summary::before {
	content: "▶"; }
dt.ok > details[open] > summary::before {
	content: "▼"; }

/* not modified since last check (304) */
body:has(input.mode:checked) dt.unmodified details > summary::before,
dt.unmodified details > summary::before,
body:has(input.mode:checked) dt.unmodified2 details > summary::before,
dt.unmodified2 details > summary::before {
	content: "◷"; }
body:has(input.mode:checked) dt.unmodified details[open] > summary::before,
dt.unmodified details[open] > summary::before,
body:has(input.mode:checked) dt.unmodified2 details[open] > summary::before,
dt.unmodified2 details[open] > summary::before {
	content: "◶"; }

/* not modified since last check (304) */
body:has(input.mode:checked) dt.unmodified details > summary::before {
        color: hsl(0, 0%, 75%); }
body:has(input.mode:checked) dt.unmodified details[open] > summary::before {
        color: hsl(0, 0%, 75%); }

/* not modified since last check (304) a long time ago */
body:has(input.mode:checked) dt.unmodified2 details > summary::before,
	color: hsl(0, 100%, 70%); }
body:has(input.mode:checked) dt.unmodified2 details[open] > summary::before {
	color: hsl(0, 100%, 70%); }

/* no recent entries */
body:has(input.mode:checked) dt.recent details > summary::before,
dt.recent details > summary::before {
	content: "▷"; }
body:has(input.mode:checked) dt.recent details[open] > summary::before,
dt.recent details[open] > summary::before {
	content: "▽"; }

/* no recent entries for a long time */
body:has(input.mode:checked) dt.recent2 details > summary::before,
dt.recent2 details > summary::before {
	content: "▷"; }
body:has(input.mode:checked) dt.recent2 details[open] > summary::before,
dt.recent2 details[open] > summary::before {
	content: "▽"; }

/* site down, network, or other OSError */
body:has(input.mode:checked) dt.network details > summary::before,
dt.network details > summary::before {
        content: "◌"; }
body:has(input.mode:checked) dt.network details[open] > summary::before,
dt.network details[open] > summary::before {
        content: "◌"; }

/* ttl has not expired */
body:has(input.mode:checked) dt.ttl details > summary::before,
dt.ttl details > summary::before {
	content: "⧖"; }
body:has(input.mode:checked) dt.ttl details[open] > summary::before,
dt.ttl details[open] > summary::before {
	content: "⧗"; }

/* too many requests (429) */
body:has(input.mode:checked) dt.toomany details > summary::before,
dt.toomany details > summary::before {
	content: "⧖"; }
body:has(input.mode:checked) dt.toomany details[open] > summary::before,
dt.toomany details[open] > summary::before {
	content: "⧗"; }

/* feed malformed or empty */
body:has(input.mode:checked) dt.malformed details > summary::before,
dt.malformed details > summary::before {
	content: "⦼"; }
body:has(input.mode:checked) dt.malformed details[open] > summary::before,
dt.malformed details[open] > summary::before {
	content: "⨸"; }

/* broken feed */
body:has(input.mode:checked) dt.broken details > summary::before,
dt.broken details > summary::before {
	content: "⊚"; }
body:has(input.mode:checked) dt.broken details[open] > summary::before,
dt.broken details[open] > summary::before {
	content: "⊚"; }

/* feed missing */
body:has(input.mode:checked) dt.missing details > summary::before,
dt.missing details > summary::before {
	content: "○"; }
body:has(input.mode:checked) dt.missing details[open] > summary::before,
dt.missing details[open] > summary::before {
	content: "○"; }

/* feed marked inactive internally */
dt.inactive > details > summary::before {
	content: "●";
	color: hsl(0deg 0% 40%); }
body:has(input.mode:checked) dt.inactive > details > summary::before {
	content: "●";
	color: hsl(0deg 0% 65%); }
dt.inactive > details[open] > summary::before {
	content: "●";
	color: hsl(0deg 0% 40%); }
body:has(input.mode:checked) dt.inactive > details[open] > summary::before {
	content: "●";
	color: hsl(0deg 0% 65%); }

/* redirecton */
dt.redirect details > summary::before {
	content: "▸";
	color: hsl(0, 100%, 30%); }
body:has(input.mode:checked) dt.redirect details > summary::before {
	content: "▸";
	color: hsl(0, 75%, 60%); }
dt.redirect details[open] > summary::before {
	content: "▾";
	color: hsl(0, 100%, 30%);
	background-color: hsl(0, 0%, 75%); }
body:has(input.mode:checked) dt.redirect details[open] > summary::before {
	content: "▾";
	color: hsl(0, 75%, 60%); }

/* tls error */
dt.tlserror details > summary::before {
	content: "▶";
	color: hsl(0deg 46% 32%); }
body:has(input.mode:checked) dt.tlserror details > summary::before {
	content: "▶";
	color: hsl(0deg 46% 28%); }
dt.tlserror details[open] > summary::before {
	content: "▼";
	color: hsl(0deg 0% 0%); }
body:has(input.mode:checked) dt.tlserror details[open] > summary::before {
	content: "▼";
	color: hsl(0deg 46% 28%); }

/* access forbidden */
dt.access details > summary::before {
	content: "◍"; }
body:has(input.mode:checked) dt.access details > summary::before {
	content: "◍"; }
dt.access details[open] > summary::before {
	content: "◍"; }
body:has(input.mode:checked) dt.access details[open] > summary::before {
	content: "◍"; }

/* wonky feed */
dt.wonky > details > summary::before {
	content: "⨻";
	color: hsl(0deg 0% 40%); }
body:has(input.mode:checked) dt.wonky > details > summary::before {
	content: "⨻";
	color: hsl(0deg 0% 65%); }
dt.wonky > details[open] > summary::before {
	content: "⨻";
	color: hsl(0deg 0% 40%); }
body:has(input.mode:checked) dt.wonky > details[open] > summary::before {
	content: "⨻";
	color: hsl(0deg 0% 65%); }

details > dl > dd {
	padding: 1em;
	margin-right: 2em;
}

li a { text-decoration: underline; }

a.site:hover,
a.feed:hover,
body:has(input.mode:checked) a.site:hover,
body:has(input.mode:checked) a.feed:hover {
	text-decoration: none;
	color: hsl(120deg 25% 85%); }

dt > details > summary > span > a.site,
dt > details > summary > span > a.feed {
	text-decoration: none;
	color: hsl(0deg 0% 50%);
}
dt > details > summary > span > a.redirection {
	text-decoration: none;
	color: hsl(240deg 100% 50%); }
body:has(input.mode:checked) dt > details > summary > span > a.redirection {
	text-decoration: none;
	color: hsl(240deg 100% 65%); }
body:has(input.mode:checked) dt > details > summary > span > a.redirection:hover {
	text-decoration: none;
	color: hsl(240deg 95% 55%); }
dt > details > summary > span > a.oversize {
	text-decoration: none;
	color: hsl(0deg 0% 40%);
}

body:has(input.mode:checked) dt > details > summary > span > a.site {
	color: hsl(0deg 0% 50%); }
body:has(input.mode:checked) dt > details > summary > span > a.feed {
	color: hsl(0deg 0% 50%); }