html, body {
            margin: 0;
            padding:0;
            font-family: "Radley", serif;
            font-weight: 400;
            font-style: normal;
            font-size: 14pt;
            color: #0c0a1e;
            overflow-x: hidden;
        }

        body {
            background: pink url(./img/lantern2e2.png) center center fixed;
        }

        /* layout elements */

        #wrapper {
            margin: 0 auto;
            padding: 0;
            background: white;
            height: calc(100% + 10em);
            border-bottom: 10px solid rgb(97, 9, 31);
        }

        @media screen and (min-width: 1080px) {
            #wrapper {  
                width: 80%; max-width: 1024px;   
                border-right: 10px solid rgb(97, 9, 31);
                border-left: 10px solid rgb(97, 9, 31);
            }
            nav {
                width: 20%;
                margin: 0 0 0 2em;
            }
            nav li {
                vertical-align: middle;
                margin-left: 10px;
            }
            main {
                border-left: 1px solid grey;
                width: 70%;
            }
            #lenkun {
                position: fixed; 
                bottom: -400px; 
                right:5px; 
                opacity: 0.1;
                z-index:-0;
            }
            #lena { margin-right: -7em; }
            #lena img {
                /* width: calc-size(43px, size * 8); */
                height: calc-size(59px, size * 8 );
                width: calc-size(43px, size * 8);
                overflow:hidden;
            }
        }

        @media screen and (min-width: 1px) and (max-width: 1079px) {
            #wrapper { width: 100%; }
            main { width: 100%; margin: 0.5em; }
            nav { 
                width: 100%; margin: 0 auto; text-align:center; 
            }
            nav li, nav span, nav a, nav.nest li, nav.nest a {
                display: inline; margin: 0;
            }
            #lenkun { display:none !important; }
            #lena { margin-right: 0; }
            #lena img {
                /* width: calc-size(43px, size * 8); */
                height: 177px;
                width: 129px;
                overflow:hidden;
            }
        }


        header, footer .layout {
            width: 100%;
            background:white;
        }

        #masthead {
            position: relative;
            height: 250px;
            width: 100%;
            background: url("http://fan.eternal-anime.org/thumb.php?w=1000&img=./files/img/fm_032.png") center center;
            background-size: cover;
        }

        #masthead h1 {
            position: absolute;
            bottom: 0;
            padding: 15px;
            color: white;
            font-size: 48pt;
            vertical-align: bottom;
        }

        #content {
            display: block;
            width: 100%;
            background: url(./img/lacy2-1.gif) repeat-x;
            padding-top: 2em;
        }


        footer.fate {
            position:relative;
            float: none;
            clear: both;
            display: block;
            padding: 25px 0;
            background: url(./img/lacy2-1.gif) repeat-x;
        }

        #dock {
            padding: 1em;
            height: 100%;
        }

        /* navigation */

        nav, main {
            display: block;
            padding-left: 0.5em;
            float: left;
        }

        nav {
            color: rgb(97, 9, 31);
            font-family: "Pirata One", system-ui;
            font-weight: 400;
            font-size: 20pt;
        }

        nav ol {
            margin: 0;
            padding: 3px;
        }

                /* nav list links */

        nav a {
            display: block;
            padding: 4px 8px;
            margin: 2px 0;
            border-radius: 4px;
            color: rgb(97, 9, 31) !important;
            background: transparent;
            transition: background 0.2s, color 0.2s;
        }

        nav a:visited {
            color: rgb(97, 9, 31);
        }

        nav a:hover, nav a:focus {
            background: #f3db8b;
            color: rgb(97, 9, 31);
            text-decoration: none;
        }

        /* nav a:active {
            color: rgb(97, 9, 31);
        } */


        .nest, .nest a {
            color: #363449 !important;
            padding: 0;
            margin: 0;
            list-style: none;
            text-transform: lowercase;
            font-size: 16pt;
            font-family: "Germania One", system-ui;
        }

        .nest a {
            display: inline-block;
            padding: 2px 6px;
            margin: 1px 0;
            border-radius: 3px;
            background: #f9f6f2;
            text-decoration: none;
            transition: background 0.2s, color 0.2s;
        }

        .nest a:hover, .nest a:focus {
            background: #f3db8b;
            color: #7d0707 !important;
        }

        .nest a::before {
            content: "♦ ";
        }

         /* for pullout menus */
        /* Style the button that is used to open and close the collapsible content */
        .collapsible {
            cursor: pointer;
            width: 100%;
            text-align: left;
            outline: none;
        }

        .collapsible.inline {
            padding: 3px;
            background: none;
            color: var(--neneEye); 
            font-family: Chaloops;
            font-size: 18pt;
            border-left: none;
            border-right:none;
            border-top: none;
            border-bottom: 3px double var(--neneRibbon);    
        }

        /* Style the collapsible content. Note: hidden by default */
        .slideMenu {
            /* text-align: left;
            padding: 0 18px; */
            /* background-color: white; */
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.2s ease-out;
        }

        .slideMenu li {
            margin: 0;
        }

        /* .collapsible:after {
            content: '\00BB';
            font-size: 18pt;
            color: black;
            float: right;

        }
        
        .collapsible.active:after {
            content: "\00AB";
        } */


        /* headers */

        h1, h2, h3, h4, h5, h6 {
            color: rgb(97, 9, 31);
        }        

        h1, h2, h3 {
            padding: 0; margin: 0;
            margin-bottom: 5px;
            font-family: "Pirata One", system-ui;
            font-weight: 400;
            font-style: normal;
        }

        h4, h5, h6 {
            text-transform: uppercase;
            padding: 0;
            margin: 0;
            display: inline;
        }

        main h1 {
            font-size: 32pt;
            border-bottom: 3px double grey;
            padding-left: 5px;
        }

        main h1::after {
            content: url(./img/fly.gif);
            padding-left: 10px;
        }

        h6 {
            font-size: 10pt;
        }

        h6::before {
            content: "𝄆 ";
        }
        h6::after {
            content: " 𝄇";
        }

        /* forms */

        button,
        input,
        select,
        textarea {
            font-family: "Germania One", system-ui;
            border: 5px solid  rgb(97, 9, 31);
            color: #7d0707;
            background-color: #e4cfc6;
            text-transform: uppercase;
            font-size: 14pt;
            padding: 0.5em;
            border-radius: 4px;
            box-sizing: border-box;
        }

        /* content */

        section {  
            padding: 0.3em;
            margin-bottom: 1em;
        }

        article {
            display: block;
            margin-bottom: 0.5em;
        }

        /*=====================================
            CUTENEWS
        =====================================*/

        article.cutenews {
            padding: 15px !important;
            width: 100%; 
            margin-bottom:15px;
        }

        article.cutenews:after {
            padding-bottom: 25px;
        }

        article.cutenews h1,
        article.cutenews h2,
        article.cutenews h3 {
            margin-left: 1em;
        }

        article.cutenews img {
            max-width: 60%;
            background: white;
            padding: 5px;
            border: solid 1px #ccc;
        }

        article.cutenews img.avi {
            background:#fff;
            max-width: 250px;
            border: 1px solid #ccc;
            border-radius: 3px 15px;
            padding: 5px; 
            float:right;
            text-align: center;
            margin: 1em;
        }

        article.cutenews section {
            text-align:justify; 
            padding:3px; 
            margin-bottom:5px; 
            border-top:1px solid #e4cfc6;
        }

        article.cutenews header {
            margin-bottom:3px; 
        }

        article.cutenews header h1,
        article.cutenews header h2 {
            margin-left: 1em;
        }


        article.cutenews footer {
            border-top: double 3px #e4cfc6;
            font-style: italic;
            text-align: right;
        }

        article hr {
            border-bottom: 1px solid lightgrey;
            width: 50%;
            text-align: center;
        }


        /* images */

        /* .gallery {}
        figure {}
        figcaption {} */

        .screenc {
            width: 150px;
            max-height: 100px;
        }

        /* .screenb {
        } */

        .breadcrumb li { display: inline; }
        .breadcrumb li::after { content: " » "; }

        /* embelishment */

        p {
            margin-left: 0.5em;
        }

        b, strong, i, em {
            font-family: "Germania One", system-ui;
            font-weight: 400;
            padding: 0 5px;
        }

        b, strong {
            color: #7d0707;
            background-color: #e4cfc6;
            text-transform: uppercase;
            font-size: 14pt;
        }

        i, em {
            color: #452a55;
            background-color: #f3db8b;;
        }

        /* u {} */

        strike {
            color: grey;
        }

        .center {
            text-align: center !important;
            width: 100%;
            margin: 0 auto;
            display: block;
        }

        /* mark {} */

        /* links */

        a {
            color: #7d0707;
            text-decoration: none;
            transition: color 0.2s;
        }

        a:visited {
            color: #452a55;
        }

        a:hover, a:focus {
            color: #e44c65;
            text-decoration: none;
            background-color: #f3db8b;
        }

        a:active {
            color: #363449;
        }

        /* divider */

        hr {
            background: url(./svg/lantern.svg) repeat-x center center;
            height: 50px;
            width: 80%;
            border: none;
        }

        hr.spacer {
            height: 50px;
            border: none;
            display: block;
        }

        /*  webdoll */
        
        #lena {
            /* 43 x 59 */
            float: right;
            padding: 1em;
            overflow: hidden;
        }

        #lena::after {
            float: none;
            clear: both;
        }

        #lenapro {
            width: 148px;
            border: 5px solid rgb(97, 9, 31);
            margin: 1em 0;
        }

        #lenapro img {
            display: block;
            width: 128px;
            background: #363449;
            border: 10px solid white;
        }