﻿/*html {width:100%; height:101%;}*/
html * {margin:0; padding:0; box-sizing:border-box;}
body {overflow-x:hidden; overflow-y:auto;}
.fullpage {position:absolute; top:0; bottom:0; width:100%;}

header.developped {width:100%; padding:0.1em 1em;}
.headerContent {display:flex;}
.headerContentPictures {
	height:100%;
	flex:1; margin:auto;
}
.headerContentPanel {
    flex:8; margin:auto; display:flex; flex-flow:column nowrap;
}
.headerContentPanelTitle {text-align:center; margin-bottom:0.5em; font-size:2ch;}
.headerContentPictures img  {width:100%;}
.headerRJPicture img {border-radius:50%; width:80%;}


.navigator {margin:0 auto;}
.navigator .navigatorList {
    padding: 0.1em 0.6em;
    display:flex; flex-flow: row wrap; justify-content:center;
}
.navigator .Translate {
    height:2.4em; padding: 0 0.6em;
    background:linear-gradient(90deg,rgba(250,255,249,0.2),rgba(250,255,229,1));
    display:flex; justify-content:flex-end;
}
.navigatorList li {list-style:none; height:1.8em; padding: 0.1em; font-size:1.4em;
    border-radius:20%; border: 2px solid rgb(240,255,255);
    background-color: rgb(180,140,80); color: rgb(240,255,255);
    box-shadow: -4px -4px 28px rgba(250,255,229,1), 4px 4px 28px rgba(255,255,229,1);
}
.navigatorList:hover li {
    background-color: rgb(230,215,165);
}
.navigatorList li:hover {
    background-color: rgb(180,140,80);
    box-shadow: -4px -4px 28px rgba(250,225,149,1), 4px 4px 28px rgba(180,140,80,1);
}
.navigator .Translate>img {
    border: 1px solid transparent; background-color: rgba(250,255,229,0.8);
    box-shadow: -4px -4px 38px rgba(250,255,229,1), 4px 4px 38px rgba(255,255,229,1);
}
.navigator .Translate>img:hover {
    border:1px solid rgb(230,215,165); background-color: rgba(255,255,255,1);
    box-shadow: -4px -4px 28px rgba(250,225,149,1), 4px 4px 28px rgba(180,140,80,1);
}


.displaynone {display:none;}
main {}
.initialSection {width:100%; margin:10em auto; background-color: rgb(100,80,22); color: rgb(180,200,232); text-align:center;}
.initialSectionList {min-width:300px;}
.allSections {width:100%;}
.allSections section {width:100%; height:600px;}
section > div {display:flex; flex-flow:row wrap; justify-content:flex-start;}
.articleCount::before{content: " ♥ ";}

article {
    width:35em; height:auto; padding: 5px;
    background-color: rgba(80,40,8,0.8); border-radius:1em  / 5%; border: 1px solid rgb(240,255,255);
    color: rgb(240,255,255);
}
article *:not(cite) >a {text-decoration: wavy lime; color:rgb(240,255,255);}

article summary, .articleLens { margin:0.2em; padding: 0.4em;
	background-color: rgb(80,40,8); color: rgb(240,255,255);
	border-radius:1em / 5%; border: 1px solid rgb(120,100,60);
}
article .lens-head {display:flex; flex-flow:row nowrap; background-color:white; color:black; border-radius:1em / 5%;}
article .lens-head-left {}
article .lens-head-right {}   /****flex:1;****/

article .lens-head-left {max-height:100px;} /*max-width:144px;*/

footer {
    position:fixed; bottom:0; left:0; z-index:9; width:80%; margin:auto;
    display:flex; justify-content:space-around;
}
footer div {display:flex; align-items:baseline;}
footer a img {height:1.5em; }
footer span {height:1.5em;}

/* Responsive design: device's breakpoints .............. */
/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575px) {
  .headerRJPicture {display:none;}
  .headerContentPanel {
    flex:3; align-self:flex-end; margin:0 auto 2em auto;
    display:flex; flex-flow:column wrap;
}
  .navigator .navigatorList {padding: 0.1em; justify-content:center;}
  .navigator .navigatorList { flex-flow: column nowrap; justify-content:center; }
 }
/* Small devices (landscape phones, 576px and up) */
@media only screen and (min-width: 576px) and (max-width: 767px) {
 }
/* Medium devices (tablets, 768px and up) */
@media only screen and (min-width: 768px) and (max-width: 991px) {
 }
/* Large devices (desktops, 992px to 1200) */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
 }
/* Extra large devices (large desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
 }
