@font-face {
    font-family: 'CMU';
    src: url('cmunbi-webfont.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: 'CMU';
    src: url('cmunbx-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'CMU';
    src: url('cmunrm-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'CMU';
    src: url('cmunti-webfont.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

html {
    display: flex;
    justify-content: space-evenly;
}

body {
    font-family: "CMU Serif", "CMU", serif;
    width: min( 30em, 100% );
    margin: 0;
    position: relative;
}

h1{
    text-align: center;
    
}

img.rondel{
    width: min( 25em, 90% );
}

h2 {
    background-size: cover;
    background-position-y: center;
    background-color:black;
    margin-top: 0;
    padding-left: 1em;
    padding-top: 1.5em;
    padding-right: .5em;
    padding-bottom: 1.5em;
    max-width: 100%;
    text-shadow: black -1px 1px 2px,
                 1px -1px 2px black,
                 1px 1px 2px black,
                 -1px -1px 2px black;
    color: white;
    clip-path: polygon( 0 1em, 100% 1em, 100% 100%, 0 calc( 100% - 1.5em ) );
    filter: drop-shadow( 0 2px 2px black );
    font-weight:900;
}

a {
    text-decoration: none;
}

body > *:first-child h2 {
    clip-path: polygon( 0 0, 100% 0, 100% 100%, 0 calc( 100% - 1.5em ) );
}

body > *:nth-child( even ) h2 {
    clip-path: polygon( 0 0, 100% 1.5em, 100% 100%, 0 calc( 100% - .5em ) );
    /* background-color: dimgrey; */
}

body > section > a:nth-child( 2 ) > h2{
    padding-bottom: 2.5em;
}

a.for-print {
    display: none;
}

section {
    /* width:100% */
    margin-bottom: -60px;
}

p, dl {
    margin: 0 1em;
}

p{
    hyphens: auto;
    text-align: justify;
}

h1 p {
    text-align: center;
}

section:not( *:target ) > *:not( :first-child ),
section:target > a:first-child {
    display: none;
}

section:target > *:not( a, h2 ):last-child {
    margin-bottom: 70px;
}

dt {
    font-weight: 900;
    float: left;
    margin-bottom: -2px;
    margin-right: .5em;
}

dd {
    margin-bottom: 2px;
}

.brodtekst p{
    margin-bottom: .5em;
    text-indent: 1.5em;
}

p.signatur {
    padding-left: 40%;
    text-indent: 0;
}

div.lyrics > div{
    margin-bottom: 1em;
}

div.lyrics p{
    padding-left: 2em;
    text-indent: -2em;
}

.melody{
    font-size: 75%;
    margin-top: -1em;
    margin-bottom: 2em;
}

.kor{
    font-style: italic;
}

ul{
    list-style-type: none
}

section li {
    text-indent: -3em;
    margin-left: 3em;
}

.ansvar {
    font-style: italic;
}
.tex sub, .latex sub, .latex sup {
    text-transform: uppercase;
}

.tex sub, .latex sub {
    vertical-align: -0.5ex;
    margin-left: -0.1667em;
    margin-right: -0.125em;
}

.tex, .latex, .tex sub, .latex sub {
    font-size: 1em;
}

.latex sup {
    font-size: 0.85em;
    vertical-align: 0.15em;
    margin-left: -0.36em;
    margin-right: -0.15em;
}

nav{
    display: flex;
    justify-content: space-between;
    color: white;
    background-color: black;
    padding: 4px;
    height: 1.2em;
    overflow: visible;
}

nav > ul {
    margin: 0;
    position: relative;
    background-color: black;
    padding-bottom: .4em;
    text-align: right;
}

nav > ul:focus, nav > ul:focus-within {
    height: 10em;
    width: 8em;
    overflow-y: scroll;
    margin-right: -4px;
    padding-bottom: .6em;
    clip-path: polygon( 0% 0%,
                        100% 0%,
                        100% 100%,
                        1em calc( 100% - .6em )
);
}

nav:after {
    display: block;
    width: 100%;
    height: .6em;
    background: black;
    clip-path: polygon( 0% 0%,
                        100% 0%,
                        100% 100%,
                        0% 1px
);
    position: absolute;
    top: calc( 1.2em + 7px );
    left: 0;
    z-index: -1;
    content: "";
}

nav > ul > li {
    display: none;
    margin-right: 1em;
    max-height: 1.2em;
    position: relative;
}

nav > ul:focus > li, nav > ul:focus-within > li {
    display: block;
    margin-right: 3px;
}

nav > ul > li:target {
    display: block;
}

nav > ul::after {
    content: "â–¼";
    position: absolute;
    top: .4em;
    right: 0;
    font-size: 70%;
    cursor: pointer;
}

nav > ul:focus:after, nav > ul:focus-within:after {
    content: "";
}

nav > ul a {
    color: inherit;
    pointer-events: none;
    cursor: pointer;
}

nav > ul:focus a, nav > ul:focus-within a {
    pointer-events: auto;
}

nav > ul a:visited {
    color: gray;
}

body > iframe:first-child{
    width: 100%;
    height: 12em;
    margin-bottom: -8.8em;
    position: relative;
    z-index: 1;
    border: none;
}

@media print {
    h1{ page-break-after: always;}
    section:not( *:target ) > *:not( a, :first-child ){
        display: revert;
    }
    body{ font-size: 11pt; width: 100%; }
    section{
        page-break-after: always;
        margin-bottom: 0;
    }
    section > a:nth-child(1) { display: none; }
    h2{
        /* margin-left: -120px; */
        padding-left: calc( 120px + 1em );
        padding-right: calc( 90px + .5em );
        /* margin-top: -50px; */
        padding-top: 1.5em;
        clip-path: polygon( 0 0, 100% 0, 100% 100%, 0 calc( 100% - 1.5em ) );
    }
    
    section{
        page-break-inside: avoid
    }
    div.lyrics {
        columns: 2;
        /* width: calc( 100% + 100px ); */
        /* margin-left: -50px; */
        page-break-before: avoid;
    }

    .nowrap {
        white-space: nowrap;
    }

    div.lyrics > div {
        page-break-inside: avoid;
    }
    
    p.melody{
        page-break-before: avoid;
        page-break-after: avoid;
        page-break-inside: avoid;
        margin-top: -2em;
        display:block;
    }
    /* section > a:nth-child(2), */
    /* section:not( *:target ) > a:nth-child(2) { */
    section:not( *:target ) > a.for-print {
        display: block;
    }

    a.for-print {
        width: 100%; /*calc( 100% + 90px );*/
        margin-top: 0;
    }

    section > *:not( a, a:first-child, a:nth-child(2), .lyrics ) {
        margin-left: 10em;
        margin-right: 10em;
    }

    section > .lyrics {
        margin-left: 5em;
        margin-right: 5em;
        column-gap: 2em;
    }
    iframe {
        display: none;
    }
}


@page{
    margin: 1cm 0cm;
}