/* 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(0deg 0% 0%);
	border-radius: 2em;
	border: 0.1em solid hsl(0deg 0% 40%);
}

/* After slide changes */
label.toggle:after {
	content: '';
	position: absolute;
	width: 2em;
	height: 2em;
	border-radius: 2em;
	background-color: hsl(0deg 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(0deg 0% 5%);
}

/* Checkbox checked toggle label bg color */
input.mode:checked + label.toggle {
	background-color: hsl(0deg 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(0deg 0% 85%);
	background-color: hsl(0deg 0% 25%);
	border: thin solid hsl(0deg 0% 45%);
}

h1, h2, h3, h4, h5 {
	padding: 0.2em;
	text-align: center;
	font-family: sans-serif;
	border: thin solid hsl(0deg 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(0deg 0% 85%);
}

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

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

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

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

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

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

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

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

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(0deg 0% 20%);
}

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

dt > details[open] > summary::before,
dt.ok > details[open] > summary::before {
	content: "▼";
	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(0deg 0% 50%); }

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

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

body dt.recent details > summary::before,
body dt.unmodified 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(0deg 0% 65%); }

body dt.recent details > summary,
body dt.unmodified 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(0deg 0% 65%); }

body dt.recent details,
body dt.unmodified 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(0deg 0% 65%); }

body dt.recent details li,
body dt.unmodified 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(0deg 0% 90%); }

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

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

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

body:has(input.mode:checked) dt.ok details[open] > summary {
	border-bottom: none;
	color: hsl(0deg 0% 70%) ;
        background-color: hsl(0deg 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.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(0deg 0% 65%);
	background-color: hsl(0deg 0% 35%); }

body:has(input.mode:checked) dt.recent details[open] > summary,
body:has(input.mode:checked) dt.recent details > summary,
body:has(input.mode:checked) dt.unmodified 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(0deg 0% 65%);
	background-color: hsl(0deg 0% 35%); }

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.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(0deg 0% 65%);
	background-color: hsl(0deg 0% 35%); }

body:has(input.mode:checked) dt.recent details[open],
body:has(input.mode:checked) dt.unmodified 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(0deg 0% 35%); }

body:has(input.mode:checked) dt.recent details[open] li,
body:has(input.mode:checked) dt.unmodified 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(0deg 0% 85%);
        background-color: hsl(0deg 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(240deg 100% 50%); }
body:has(input.mode:checked) li:nth-child(odd) a:link {
	color: hsl(240deg 100% 69%); }
body:has(input.mode:checked) li:nth-child(even) a:link {
	color: hsl(240deg 85% 67%); }

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

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

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

dt.unmodified > details ul li {
	background-color: hsl(0deg 0% 80%); }

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

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

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

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

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

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

/* 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: "▽"; }

/* 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: "⧗"; }

/* 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: "○"; }

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

/* tls error */
dt.tlserror details > summary::before {
	content: "▸";
	color: hsl(0deg 0% 0%); }
body:has(input.mode:checked) dt.tlserror details > summary::before {
	content: "▸";
	color: hsl(0deg 0% 55%); }
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 0% 55%); }

/* 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%); }