HTML5 - Rendering of Headings

<!doctype html>
<html lang=en>
    <head>
        <meta charset=utf-8>
        <title>HTML5 - Rendering of Headings</title>
        <style>
            /* Move away from viewport rims */
            body {
                padding: 10px;
                margin: 0;
            }

            /* Show some hierachy */
            article, section, detail, aside {
                padding: .2em 2em;
                margin: 1em 0;
                border-radius: 5px;
                box-shadow: 0px 0px 5px rgba(0,0,0,.5);
            }

            /* And now make it even more visible */
            article { background-color: #58aed6;}
            section { background-color: #ba4194;}
            section section { background-color: pink;}
            detail { display: block; background-color: #e4a85a;}
            aside { background-color: grey;}
        </style>
    </head>
    <body>
        <h1>Some text in a H1 as a direct decendant of BODY</h1>
        <h2>H2 put to the test</h2>
        <section>
            <h1>Some text in a H1 in a SECTION</h1>
        </section>
        <article>
            <h1>H1 in an ARTICLE</h1>
            <h2>H2 put to the test</h2>
            <section>
                <h1>Some text in a H1 in a SECTION</h1>
                <h2>H2 put to the test</h2>
            </section>
            <section>
                <h1>Another H1 in a SECTION</h1>
                <h2>H2 put to the test</h2>
                <section>
                    <h1>A H1 in a nested SECTION inside of a SECTION</h1>
                    <h2>H2 put to the test</h2>
                    <p>You see the outline algorythm does very well displaying the contextual hierachy of the contents, but...</p>
                </section>
            </section>
        </article>


        <article>
            <h1>Ohh, something kinky about sections, headings and typo!</h1>
            <h2>Lets see if the browser is counting in H2s as well...</h2>
            <p>Here we show some obscurity with the automated font-sizes of different headings in an HGROUP:</p>
            <section>
                <hgroup>
                  <h1>H1: As we learned, a H1 is the most important heading</h1>
                  <h2>H2: But why is this H2 even bigger then?</h2>
                  <h3>H3: Can you think of an explanation why this H3 is just as big as the H1?</h3>
                </hgroup>
                <p>Text: This is the size of regular text in a paragraph following above HGROUP in a SECTION. Isnt it funny that the text in the following DETAIL is just as big? Wasnt it supposed to be smaller?</p>
                <detail>
                    <p>DETAIL: Donst ask for support on this!</p>
                </detail>
                <aside>
                    <p>All this is now packed into an ASIDE-element:</p>
                    <hgroup>
                        <h1>H1: Headings in an HGROUP-ELement in an ASIDE-element</h1>
                        <h2>H2: Again H2 is bigger than the H1</h2>
                        <h3>H3: Getting worse - Even the H3 is bigger than the H1 now!</h3>
                    </hgroup>
                    <p>Text: Again this is regular text in a paragraph.</p>
                </aside>
            </section>
        </article>
    </body>
</html>