/* === theme #1  ==  dark-green contrast  === */

body,h1{margin:0}

h1{ padding:1ex;
font-size: 250%; text-align:center; font-family:Arial, sans-serif;
background-color:rgba(244,244,244,.8); }

h1,h2,h3{color:rgb(42,111, 92);}

/* =========== top menu → */
/* == when we are at the top of the page == */
div.menu{padding:0;margin:0;top:0}

div.menu>div>div{position:fixed;background-color:rgba(58,58,58,.4);padding:5px;}
div.menu>div>div.left{left:0;border-radius:0 0 10px 0}
div.menu>div>div.right{right:0;border-radius:0 0 0 10px}
div.menu>div>div{transition:all 1s;}

div.menu,div.menu a{color:white}
div.menu i.symbol{font-size:200%}

div.menu.NT{box-shadow: 0 0 1em rgba(255,255,255,.5);}
div.menu.NT{font-size:90%}
div.menu.NT i.symbol{font-size:140%}

/* === */
div.menu>ul{padding:0;margin:0;}
div.menu>a,div.menu>p{display:inline-block;}
div.menu>ul>li{transition: all .3s;}
div.menu>ul>li,div.menu>a,div.menu>p{padding:1ex;margin: 0;}

div.menu.left{left:0;border-radius:0 0 10px 0;}
div.menu.right{right:0;border-radius:0 0 0 10px;}

div.menu.left>ul>li:last-child,div.menu.left>a,div.menu.left>p{ border-radius:0 0 10px 0; }
div.menu.right>ul>li:first-child,div.menu.right>a,div.menu.right>p{ border-radius:0 0 0 10px; }

/* =========== ← top menu */


/* =========== edist+panel (partially configured in common.css) → */
div.edist>ul>li{line-height:5ex; margin:1ex 3ex;}
div.edist>ul,div.panel>ul{padding:0}

div.panel>ul>li{color:white;padding:1ex 1em;margin:0}
div.panel>ul>li:hover{background-color:rgb(42,111, 92)}
div.panel>ul>li>a{color:white}
div.panel{
    font-weight:bold;
    font-size: 110%; text-align:center; font-family:Arial, sans-serif;
    margin:1ex 0;background-color:rgba(42,111, 92, .8);}
/* =========== ← edist+panel */

@media(max-width:340px){
    div.header.top img.logo{height:25px}
    div.header.scrolled img.logo{height:18px}}

@media(min-width:341px) and (max-width:400px){
    div.header.top img.logo{height:35px}
    div.header.scrolled img.logo{height:25px}}

@media(min-width:401px){
    div.header.top img.logo{height:45px}
    div.header.scrolled img.logo{height:30px}}

img{transition:all .5s}

h2{
    margin-bottom:0;
    text-align: center;
    line-height: 140%;
    }

div.fon{
    margin: 0 auto;
    text-align:center;
    padding-bottom:1em;}

article{
    text-align:left;
    background-color:rgba(252, 252, 252,.95);
    padding: 0 1em 1em 1em;
    max-width: 80ex;
    margin: 1ex auto;
}

/* === for slogans → === */
article.single{display:block;margin-left:auto;margin-right:auto}

article.image:before {
  position: absolute; z-index: -1;
  top: -1.5em; right: -1.5em; bottom: -1.5em; left: -1.5em;
  border: inherit;
  border-color: transparent; background: inherit; background-clip: border-box;
  filter: blur(9px); clip-path: inset(0);
  content: "";
}

article.image>h2{
    font-family:Arial, sans-serif;
    font-size:320%;
    margin:0;
}
/* == */

p{margin:0;line-height:140%;}

p.items>span,p.items>a{
    text-decoration: none;
    display: inline-block;
    border:solid 1px #C7C7C7;
    border-radius:5px;
    padding:1ex;margin:1ex;}

p.items>span:hover,p.items>a:hover{
    cursor:pointer;
    border-color:#5C261B;
    background:#8AB933;}

    
p.items>span,a{
    transition: all .3s;
    text-decoration: none;
    text-align: left;}

a.symbol{
    color:white;
    border-radius:10px;
    padding:10px;
    box-shadow: 0 0 1em rgba(255,255,255,.5);
}
div.header>a.symbol{margin:0}


p:not(:first-of-type){margin-top:1ex}

ul{margin-top:0}
ul.text>li{margin-top:1ex}

/* =========== images */
img.left{float:left;margin-right:1em}
img.single{display:block;margin-left:auto;margin-right:auto}
img.right{float:right;margin-left:1em}

img.b1{border-radius:10px 0 0 0}
img.b2{border-radius:0 10px 0 0}
img.b3{border-radius:0 0 10px 0}
img.b4{border-radius:0 0 0 10px}

img.b12{border-radius:10px 10px 0 0}
img.b13{border-radius:10px 0 10px 0}
img.b14{border-radius:10px 0 0 10px}
img.b23{border-radius:0 10px 10px 0}
img.b24{border-radius:0 10px 0 10px}
img.b34{border-radius:0 0 10px 10px}

img.b1234{border-radius:10px}

/* =========== */

/* tables th,td{border:1px solid white}  */
table{margin:1ex auto}
td{text-align:center}
table th,table tr>td{border:1px solid rgba(42,111,92,.8)}
td{text-align:left}
table{border-collapse:collapse}
table th,table td{padding:1ex}

/* footer */
footer{padding-top:3px;
    background-color:rgba(42,111,92,.8);}
footer>div>span{
    z-index:4;
    border: dotted 1px #06474e}

/* =========== source code */
div.src{
    margin-top:1ex;
    position:relative;
    background-color:white;
    border: 1px solid rgba(42,111,92,.8);
}
div.src>i{
    padding:0 5px;
    border-radius: 15px;
    font-size:80%;
    position:absolute;
    top:-1.2ex;
    left:3ex;
    background-color:white;
}

div.src>pre{margin: 1ex;}
code{
    background-color:white;
    display: inline-block;
    margin: 2px 0;
    border: 1px solid rgba(42,111,92,.8);}