/*

https://code-crowd.de/blog/liste-aller-html5-tags/

<a>	        Bezeichnet einen Hyperlink, der auf eine andere Ressource verweist (angegeben durch das href-Attribut).
<em>	    Steht für hervorgehobenenText.
<strong>	Markiert besonders wichtigen (stark hervorgehobenen) Text.
<small>	    Steht für das „Kleingedruckte“ eines Dokuments, wie Ausschlussklauseln, Copyright-Hinweise oder andere Dinge, die für das Verständnis des Dokuments nicht unbedingt nötig sind.
<s>	        Wird für Inhalte verwendet, die nicht länger relevant oder akkurat sind. Wird meist durchgestrichen dargestellt.
<cite>	    Steht für den Titel eines Werks.
<q>	        Bezeichnet ein Kurzzitat. Für längere Zitate sollte <blockquote> verwendet werden.
<dfn>	    Steht für einen Begriff, dessen Definition im nächstgelegenen Nachkommen-Element enthalten ist.
<abbr>	    Bezeichnet eine Abkürzung oder ein Akronym.
<data>	    Verbindet seinen Inhalt mit einem maschinenlesbaren Equivalent, angegeben im value-Attribut. (Dieses Element wird nur in der WHATWG-Version des HTML-Standards definiert, nicht aber in der W3C-Version von HTML5).
<time>	    Steht für einen Wert, der Datum und Uhrzeit angibt.
<code>	    Wird verwendet, um Programmiercode zu markieren.
<var>	    Steht für eine Variable. Dies kann ein tatsächlicher mathematischer Ausdruck oder Programmierungskontext sein, ein Identifier für eine Konstante, ein Symbol für eine physikalische Größe, ein Funktionsparameter oder einfach ein Platzhalter.
<samp>	    Markiert die Ausgabe eines Programms oder eines Computers.
<kbd>	    Steht für eine Benutzereingabe, oftmals, aber nicht unbedingt, auf der Tastatur. Kann auch für andere Eingaben, beispielsweise transkribierte Sprachbefehle stehen.
<sub><sup>	Markiert tiefgestellten, bzw. hochgestellten Text.
<i>	        Steht für einen Textabschnitt, der vom übrigen Inhalt abgesetzt und üblicherweise kursiv dargestellt wird, ohne für eine spezielle Betonung oder Wichtigkeit zu stehen. Dies kann beispielsweise eine taxonomische Bezeichnung, ein technischer Begriff, ein idiomatischer Ausdruck, ein Gedanke oder der Name eines Schiffes sein.
<b>	        Steht für einen Textabschnitt, der vom übrigen Inhalt abgesetzt und üblicherweise fettgedruckt dargestellt wird, ohne für eine spezielle Betonung oder Wichtigkeit zu stehen. Dies kann beispielsweise ein Schlüsselwort oder ein Produktname in einer Produktbewertung sein.
<u>	        Steht für einen Textabschnitt, der vom übrigen Inhalt abgesetzt und üblicherweise unterstrichen dargestellt wird, ohne für eine spezielle Betonung oder Wichtigkeit zu stehen. Dies könnte beispielsweise ein Eigenname auf in chinesischer Sprache sein oder ein Textabschnitt, der häufig falsch buchstabiert wird.
<mark>	    Steht für Text, der aus Referenzgründen hervorgehoben wird, d.h. der in anderem Kontext von Bedeutung ist.
<ruby>	    Bezeichnet einen Textteil mit Ruby-Annotationen. Dies sind kurze Aussprachetipps und andere Hinweise, die hauptsächlich für ostasiatische Tyopgrafie verwendet werden.
<rt>	    Bezeichnet den Text einer Ruby-Annotation.
<rp>	    Wird zusammen mit dem Element verwendet, um Ruby-Text mit Klammern zu umgeben, die angezeigt werden, wenn das Benutzerprogramm (Browser) keine Ruby-Annotationen unterstützt.
<bdi>	    Markiert Text, der vom umgebenden Inhalt zum Zweck der bidirektionalen Formatierung (z.B. arabischer Text innerhalb von deutschsprachigen Inhalten) isoliert werden soll. Hiermit kann ein Textabschnitt mit einer unterschiedlichen oder unbekannten Textrichtung gekennzeichnet werden.
<bdo>	    Kann verwendet werden, um die Textrichtung der enthaltenen Kindelemente zu steuern. Hiermit kann der Unicode BiDi-Algorithmus explizit überschrieben werden.
<span>	    Markiert einen allgemeinen Textabschnitt. Das -Element erhält seine Bedeutung meistens durch ein class– oder ein id-Attribut, wodurch es außerdem für Skripte zugänglich ist und von Stylesheets ausgewählt werden kann.
<br>	    Bezeichnet einen Zeilenumbruch.
<wbr>	    Hiermit kann die Gelegenheit für einen Zeilenumbruch gekennzeichnet werden, mit dem die Lesbarkeit verbessert werden kann, wenn der Text auf mehrere Zeilen verteilt wird.
*/

/* Typography
--------------------------------------------- */

html {
    font-size: 16px;}

body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 1rem;
	line-height: 1.35;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
    margin: 0 0 0.5em 0;
}

p, blockquote {
	margin: 0 0 1em 0;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 0 1em 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}