/* RESET */
*, *::before, *::after { margin: 0;	padding: 0;	font: inherit;	box-sizing: border-box; }

:root {
--accent: steelblue;

--grau: grey; /* muted */
--blau: steelblue; /* success */
--gruen: limegreen; /* success */
--orange: khaki; /* danger */
--rot: tomato; /* warning */

--box0: #000; 
--box1: #0D0F11; /* darkest header footer */
--box2: #111417; /* darker box */
--box3: #15181C; /* darker 2 table */
--box4: #191C20; /* body */
--box5: #24272B; /* hover */

--text0: #000; /* hover tags */
--text1: #222;
--text2: #444; /* time data */
--text3: #666;
--text4: #999; /* text */
--text5: #fff; /* hover */
}
/* coming soon */
:root:has(#switch:checked) {
--accent: limegreen;
}

html { scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--accent) var(--box1); }
body {	
display: flex;	gap: 1rem; flex-wrap: wrap;	max-width: 55rem;	margin-inline: auto; padding: 0 1rem;
font-family: monospace; font-size: .9rem; font-weight: 100; background: var(--box4); color: var(--text4);
}

/* EXTRAS */
a { text-decoration: none; color: var(--text4); }
a:hover { color: var(--text5); }
strong { font-weight: 900; }
em { font-style: italic; }
i { color: var(--orange); }
b { font-size: 1rem; }
small { font-size: .7rem; }
abbr { text-decoration: underline dotted; text-decoration-color: var(--accent); }
code { font-family: monospace; color: var(--accent); }
mark { background: var(--box5); color: var(--text4); padding: 0 .2rem; }
kbd { background: var(--box5); color: var(--text4); padding: 0 .2rem; }
[for="switch"] { color: var(--accent); }
ol, ul { list-style-position: inside; }
h2, p, li, td { overflow-wrap: anywhere; }
[data-dot]::before { content: '●'; color: var(--accent); }

/* COLORS */
[data-grau] { color: var(--grau); } /* grau */
[data-blau] { color: var(--blau); } /* blau */
[data-gruen] { color: var(--gruen); } /* grün */
[data-orange] { color: var(--orange); } /* orange/gelb */
[data-rot] { color: var(--rot); } /* rot */

[data-user] { text-shadow: 0 0 .2rem var(--accent), 0 0 .3rem var(--accent); } /* ... */

/* BODY | HEADER | FOOTER */
:is(body>header, body>footer) { flex: 0 0 100%;	position: sticky;	z-index: 999; text-transform: uppercase; background: var(--box1); padding: 1rem; }
body>header { top: 0; }
body>footer { bottom: 0; }
:is(body>header>nav, body>footer>nav) { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
body>header>nav>a[aria-current="page"] { color: var(--accent); }
:is(body>header>nav>:first-child, body>footer>nav>:first-child) { margin-right: auto; }
body>footer>nav>:last-child { margin-left: auto; }
body>header>nav>a:nth-of-type(1)::before { content: ''; display: inline-block; width: .5rem; height: .5rem; margin-right: .5rem; background: var(--accent); }

/* MAIN & ASIDE */
:is(main, aside) { display: flex; flex-direction: column; gap: 1rem; flex: 0 0 100%;	}

/* BREADCRUMB */
main>nav>ol { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; list-style: none; }
main>nav[aria-label="Breadcrumb"] li+li:before { content: "/\00a0"; color: var(--accent); }
main>nav[aria-label="Breadcrumb"] { background: var(--box2); padding: 1rem; margin-top: -1rem;	border-bottom-left-radius: .5rem; border-bottom-right-radius: .5rem; }
main>nav[aria-label="Breadcrumb"] { font-size: .9rem; }
main>nav[aria-label="Breadcrumb"] li[aria-current="page"] { color: var(--text3); }

/* ASIDE */
aside>* { background: var(--box2); padding: 1.5rem; border-radius: .5rem; }
aside>*>*+*:not(a[rel="tag"]) { margin-top: .5rem; }
aside>*> :first-child { margin-top: 0; }
aside>*> :last-child { margin-bottom: 0; }
aside :is(ul, ol) li { display: flex; flex-wrap: wrap; justify-content: space-between; }
aside ul li a::before { content: '▷ '; color: var(--text2); }
aside ul li a:hover::before { color: var(--accent); }
aside nav:not(:has(ul)) { display: flex; flex-wrap: wrap; gap: .5rem; }
aside nav:not(:has(ul)) h3 { flex: 0 0 100%; }
aside nav a[rel="tag"] { flex: 1 1 0; font-size: .8rem; text-align: center; text-transform: uppercase; padding: .2rem .5rem; background: var(--box4); color: var(--text4); }
aside nav a[rel="tag"]:hover { background: var(--accent); color: var(--text0); }
aside nav a[rel="tag"][aria-current="page"] { background: var(--accent); color: var(--text0); }
aside h3 { font-size: 1.2rem; text-transform: uppercase; color: var(--text3); display: flex; flex-wrap: wrap; justify-content: space-between; }
aside a { color: var(--text4); }
aside a[aria-current="page"] { color: var(--accent); }
aside data { color: var(--text2); }

/* ARTICLE */
article { background: var(--box2); padding: 1.5rem; border-radius: .5rem; }
article>*:not(header):not(footer) { margin-block: 1rem; }
article>*:not(header):not(footer):first-child { margin-top: 0; }
article>*:not(header):not(footer):last-child { margin-bottom: 0; }
:is(article)> :is(header, footer) { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
:is(article)> :is(header, footer)> :first-child { margin-right: auto; }
article>h2 { font-size: 1.4rem; color: var(--text4); }
article>h3 { font-size: 1.2rem; color: var(--text4); }
article>h2>a { color: var(--text4); }
article>h2>a:hover { color: var(--text5); }
article>p { line-height: 1.4rem; }
article>p>a { text-decoration: underline var(--accent); }
article>p>a:hover { color: var(--accent); }
article>ol>li { margin-bottom: .5rem; }
article>ul>li::marker, article>ol>li::marker { color: var(--accent); }
article>header>time, article>footer>data, article>footer>span { color: var(--text2); }
article>header a[rel="tag"] { font-size: .8rem; text-align: center; text-transform: uppercase; padding: .2rem .5rem; background: var(--box4); color: var(--text4); }
article>header a[rel="tag"]:hover { background: var(--accent); color: var(--text0); }

/* BODY | SECTION */
body>section { display: flex; flex-direction: column; gap: 1rem; flex: 0 0 100%; padding: 0 1rem; }

/* PAGING */
nav[aria-label="Paging"] { background: var(--box2); padding: 1rem; border-radius: .5rem; }
nav[aria-label="Paging"] ul { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem; list-style: none; }
nav[aria-label="Paging"] ul li a { border: .05rem solid transparent; background: var(--box4); color: var(--text4); padding: .2rem .5rem; }
nav[aria-label="Paging"] ul li a:hover { border: .05rem solid var(--accent); }
nav[aria-label="Paging"] ul li span[aria-current] { border: .05rem solid var(--accent); padding: .2rem .5rem; }

/* PRE */
pre { font-family: monospace; tab-size: 2; overflow-wrap: anywhere; white-space: pre-wrap; background: var(--box1); padding: 1rem; border-left: .1rem solid var(--accent); }

/* PROGRESS & METER */
progress { width: 100%; }
meter { width: 100%; }

/* BLOCKQUOTE */
blockquote { background: var(--box4); padding: 1rem; }
blockquote q { display: block; font-style: italic; text-align: center; }
blockquote>cite { display: block; text-align: right; color: var(--text3); margin-top: 1rem; }

/* DEFINITION */
dt { font-weight: 900; margin-bottom: .5rem; }
dd { font-style: italic; margin-left: .5rem; margin-bottom: .5rem; background: var(--box3); padding: .5rem; border-right: .1rem solid var(--accent); }
dd:last-child { margin-bottom: 0; }

/* TABLE */
table { width: 100%; overflow-x: auto; }
tr>th { font-weight: 600; background: var(--box3); padding: .5rem; }
tr>td { background: var(--box4); padding: .5rem; }
tr:not(:has(th)):hover td { background: var(--box5); }

/* DETAILS */
details>summary { color: var(--text4); cursor: pointer; }
details[open]>summary { margin-bottom: 1rem; }
details>summary:hover { color: var(--text4); }
details>summary:hover::marker, details[open]>summary::marker { color: var(--accent); }

/* IMG & MEDIA */
img, video, audio, iframe { max-width: 100%; height: auto; }
img[alt^="Icon"] { width: 16px; height: 16px; object-fit: cover; }
img[alt^="Avatar"] { width: 32px; height: 32px; object-fit: cover; border-radius: 50%; }

/* FIGURE IMG */
figure:has(img) { position: relative; }
figure:has(img) figcaption { position: absolute; bottom: 0; width: 100%; text-align: right; background: var(--box1); color: var(--text4); opacity: .9;  padding: .5rem 1rem; }
figure img { filter: grayscale(70%); object-fit: cover; width: 100%; height: 15rem; }
figure img:hover { filter: grayscale(0%); }
/* FIGURE BOX */
figure:not(:has(img)) { background: var(--box1); padding: 1.5rem; border-radius: .5rem; }
figure:not(:has(img)) figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 1rem; }
figure:not(:has(img)) figcaption>strong { font-size: 1rem; color: var(--accent); }
figure:not(:has(img)) figcaption>time { color: var(--text3); }

/* LINE */
hr { height: .1rem; background: var(--box4); margin-left: -1.5rem; margin-right: -1.5rem; border: 0; }

/* FORM */
form { display: flex; flex-direction: column; gap: 1rem; }
form :is(input, select, textarea) { width: 100%; padding: .5rem; background: var(--box4); color: var(--text4); border: .1rem solid transparent; border-radius: .5rem; outline: 0; }
form :is(input, select, textarea):hover { background: var(--box5); }
form :is(input, select, textarea):focus { border-color: var(--accent); }
form fieldset { display: flex; gap: 1rem; border: none; }
form fieldset p { flex: 1; }
form button { width: auto; padding: .5rem; background: var(--box3); color: var(--text4); border: none; border-radius: .5rem; cursor: pointer; }
form button:hover { background: var(--accent); color: var(--text0); }

/* DESKTOP */
@media (min-width: 45rem) {
body>section { padding: 0; }
main  { flex: 2; }
aside { flex: 1; }
}