/* Please respect naming variables and conventions here. 
In case of doubt, ask! */

:root{
  --p:10px;             /* uniform spacing unit */
  --c1:black;           /* black-like */
  --c2:white;           /* white-like */
  --mid:#ddd;           /* buttons background */
  --bg:#efefef;         /* background color */
  --vivid:#6c2868;      /* vivid color (banner) */
  --vividPale:#d0bbcf;  /* pale color (specimen…) */
  --small:.8em;         /* small font size (captions…) */
  --headerH:1.41em;     /* header height */
}

body{
  font:23px/1.4em "vtf-centerline", sans-serif;
  background-color:var(--bg);
  padding-top:var(--headerH);
}

/* Header, Navigation */
header{
  display: flex;
  justify-content: space-around;
  background-color:var(--bg);
  width: 100%;
  flex-wrap: wrap;
}
/* Screensaver */
.idle .logo:after,.idle .logo:before{
  opacity: .5;
  transition: 5s opacity ease-in;
}
.logo::after,.logo::before{
  display: flex;
  height: 100%;
  width: 100%;
  background-color: var(--c1);
  opacity: 0;
  top: 0;
  left: 0;
  position: fixed;
  z-index: 7;
  pointer-events: none;
  justify-content: center;
  content: "☣";
  color: var(--c2);
  font-size: min(80vh,80vw);
  padding-top: min(10vh,10vw);
  padding-right: .05em;
  font-weight: 200;
  align-items: center;
}
.idle .logo:before{
  content:"";
  transition-delay: 1s;
  top: 50%;
  left: 50%;
  top: 50%;
  left: 50%;
  margin-top: calc(min(100vh, 100vw) / -2);
  margin-left: calc(min(100vh, 100vw) / -2);
  width: min(100vh, 100vw);
  height: min(100vh, 100vw);
  z-index: 8;
  opacity: 1;
  background: url(../img/idle-circle.svg) no-repeat;
  background-size: 100%;
  animation: rotate 200s linear 0s infinite forwards running;
}
@keyframes rotate{100% {transform:rotate(360deg);}}

main{
  position: relative;
}
.main-header{
  position:fixed;
  background-color:var(--bg);
  top: 0;
  left:0;
  width:100%;
  z-index: 1;
}
.main-header h1, .main-header h2,
footer h1, footer h2{
  border:0;
  text-align: center;
}
.main-header .titles,
footer .titles{
  width: 100%;
  justify-content: space-around;
}
.menu{text-align: center;}
.m-menu-btn{display: none;}
.sitemap-header, .sitemap-header ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  overflow-x: hidden;
}
.main-header li, .sitemap-header li{
  padding:0 .5em;
}
li.current{
  background: black;
}
li.current a{
  color: var(--bg);
}
li.current a:hover,.black-box a:hover{
  background: none;  
}
.sitemap-header h2{
  width:100%;
  letter-spacing: 2vw;
  font-size: var(--small);
  left: 1vw; /* balance letter spacing */
  position: relative;
  text-transform: uppercase;
  text-align: center;
}
.sitemap-header h2:before{
  content: "";
  position: absolute;
  background: var(--c1);
  width: 100%;
  height: 1px;
  top:0;
  left: -1vw;
}

/* Home page / Font list */
.list-order{
  text-align: center;
  display: flex;
  justify-content: space-evenly;
}
.list-order{
  width:clamp(300px, 70%, 800px);
}
.list-order li{
  cursor:pointer;
}
.list-order [data-active='true']:before{
  content:"";
  position: relative;
  display:inline-block;
  width:.5em;
  height:.5em;
  margin-right:.5em;
  background:var(--bg);
}
.font-list{
  display: flex;
  flex-wrap: wrap;
}
.font-box{
  width: 100%;
  /* padding:var(--p); */
  margin-bottom: var(--p);
  position: relative;
}
.font-box svg, .font-box img  {
  display: block;
  height: auto;
  width:100%;
}
.font-box svg{
  padding:2px 0;
}
.font-box svg g{
  /* Patches an anoying issue of default strokeWith with generated SVGs  */
  stroke-width:0!important;
}

.font-box a.image-link{
  display: block;
}
.font-box a.image-link:hover{
  background: var(--c2);
}
.font-box .meta{
  display: flex;
  justify-content: space-evenly;
  text-align: center;
}
.font-box .meta ul, .menu li{
  display: inline;
}
.font-box.update:after, .font-box.new:after,
.font-box.custom:after, .announcement a:after{
  position: absolute;
  top: 0;
  right: 0;
  font-size: 1em;
  padding: 2px 10px;
  background: var(--c1);
  text-transform: uppercase;
  overflow-wrap: break-word;
  line-height: 1em;
  color: var(--bg);
  text-align: center;
  letter-spacing: 3px;
  border-left: var(--p) solid var(--bg);
  border-bottom: var(--p) solid var(--bg);
}
.font-box.new:after{content:"New!"; background: var(--vivid);}
.font-box.update:after{content:"Updated";}
.font-box.custom:after{content:"Custom"; }
.announcement{
  width: 100%;
}
.announcement a{
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: calc(var(--p) * 10);
  margin-bottom: var(--p);
  background: var(--c1);
  color: var(--bg);
  transition: all .1s ease;
}
.announcement a:hover{
  letter-spacing: .1em;
  background: var(--c1);
}
.announcement a:after{
  border: 0;
  content:"Announcement"; 
}
.announcement a:hover:after{
  letter-spacing: 3px;
}

/* Font page */
.font-info, .font-description, .font-in-use{
  padding: var(--p);
}
.style-box{
  text-align: center;
  border-top:1px solid black;
  overflow: hidden;
}
.style-box:last-child{
  border-bottom:1px solid black;
}
.style-test-line{
  width:100%;
  font-size:7em;
  line-height: initial;
  transition: background .1s ease-out;
}
.style-test-line:hover,
.style-test-line:focus{
  background: var(--c2);
  outline: none;
}
.style-box-meta{
  background:var(--c1);
  padding:0 var(--p);
  display: inline-block;
  text-align: center;
  color: var(--bg);
}
.info-line{
  margin-bottom: var(--p);
  display: flex;
}
.info-line h3{
  min-width: 11em;
}

.info-line .button, .big-button{
  width:calc(50% - var(--p) );
  height: calc(var(--p) * 8);
}
.buttons-line{
  display: flex;
  justify-content: space-between;
}
.info-line a, .text a{
  border-bottom: 1px solid var(--c1);
}
#graph{
  height:400px;
}
.font-description, .news-content{
  border: 1px solid var(--c1);
  border-width: 0 0 0px 1px;
}
.news-article{
  margin-top: calc(var(--p)*2);
  margin-left:calc(-1 * var(--p));
  padding-left: var(--p);
  border-left:var(--p) solid var(--c1);
}
.news-article span{
  margin:var(--p) var(--p) 0 0;
}
.news-article-link{
  margin-right: var(--p);
  padding: calc(var(--p)/2) var(--p);
  text-decoration: none;
  border: 1px solid;
}
.font-in-use{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  height:max(70vh, 490px);
  border-left: 1px solid var(--c1);
  position: relative;
  overflow: scroll;
  padding-top: 2em;
}
.font-in-use h3{
  position: absolute;
  left:0;
  top: 0;
  width: 100%;
  margin-top: 0;
}
.in-use-box{
  position: relative;
  width: min(120px, calc(50% - var(--p)));
  box-shadow: 1px 1px 2px black;
  margin: var(--p);
}
.in-use-caption, .in-use-font{
  position: absolute;
  bottom: 0;
  right: 0;
  background: var(--bg);
  padding: 0 .1em;
  font-size: var(--small);
  line-height: 1em;
  border-top:1px solid gray;
  border-left:1px solid gray;
}
.in-use-font{
  left: 0;
  right: auto;
  padding: .2em .1em;
  line-height: 0.8em;
  border-right: 1px solid gray;
}

.specimen-box{
  border-top:1px solid var(--c1);
}
.button-box{
  display: flex;
  justify-content: center;
}
.button-box.black{
  background-color: var(--c1);
  padding: calc(var(--p) * 4) var(--p);
}

/* Scroll top button */
.scroll-top {
  position: absolute; 
  top: 120vh;
  bottom: -7rem; 
  right: 2rem; 
  z-index: 4;
}

a.scroll-top-btn {
  position: -webkit-sticky;
  position: sticky;
  color: var(--bg);
  background-color: var(--c1);
  border-radius: var(--p);
  box-shadow:0 0 2px var(--bg);
  top: 90vh;
  width: 2em;
  height: 2em;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all .1s ease;
  transform-origin: bottom;
  font-weight: bold;
}
a.scroll-top-btn:hover{
  height:3em;
  top: calc(90vh - 1em);
  background-color: var(--c1);
}

/* Item lists */

.link-list{
  width:100%;
}
.link-list .link-item a{
  display: flex;
  padding: var(--p);
  border: 1px solid var(--c1);
  border-bottom:0;
  justify-content: space-between;
}
.link-item span{
  margin-right:10%;
  display: block;
}
.link-list .link-item:last-child a{
  border-bottom:1px solid var(--c1);
}

/* Author page */
[data-template="author"] .bio-box{
  border:1px solid var(--c1);
  padding: var(--p);
  justify-content: center;
  margin:0 auto;
  text-align: center;
}
.author-font-list{
  width: 100%;
}

/* Download page */
.font-credit-box{
  border:1px dotted var(--c1);
  padding: var(--p);
  text-align: center;
  align-items: center;
  margin-bottom: var(--p);
}
.font-credit-box input{
  width: 100%;
  border:0;
  margin-bottom: var(--p);
}
.copy-credits-btn{
  margin: 0 auto var(--p) auto;
}

/* [data-template="download-font"] .center-container .text{
  flex-wrap: wrap;
  display: flex;
}
[data-template="download-font"] .center-container .text>p{
  width: 100%;
} */

[data-template="download-font"] .editor-box{
  margin-right: var(--p);
  border:1px solid var(--c1);
  border-radius: calc(var(--p)*2);
  padding: var(--p);
  margin-bottom: var(--p);
  width:calc((100% / 3) - (var(--p) *1 - 2px));
}
[data-template="download-font"] .editor-box:last-child{
  margin-right:0;
}
/* In Use page */
.in-use-list{
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--p);
}
[data-template="inuses"] main .text{
  padding: var(--p);
}
[data-template="inuses"] .in-use-box{
  width: clamp(150px,calc(20% - var(--p)), 300px);  
}
.in-use-form-box{
  border: 1px solid var(--c1);
  margin-top: var(--p);
  width:clamp(400px,30%,800px);
}
/* Form styles in dedicated stylesheet */

/* About page */
[data-page='about'] .editor-box{
  font-size: 13vw;
  line-height: 1.2em;
  text-align: center;
}

/* Donate page */
[data-page='donate'] .editor-box{
  display: flex;
  justify-content: space-between;
}

[data-page='donate'] .editor-box p{
  width:calc(100% / 2 - var(--p) / 2);
}

/* Basic page */

.center-container{
  background: var(--c1);
  width: 100%;
}
.center-container section{
  width:min(100%, 1000px);
  background:var(--bg);
  margin: 0 auto;
}

/* News */
.news-meta, .news-content{
  padding:var(--p);
}

/* Common */
/* box mini-framework */
.b-container{
  display: flex;
  flex-wrap: wrap;
}
.b-1-1{width:100%;}
.b-1-2{width:calc(100% / 2);}
.b-1-3{width:calc(100% / 3);}
.b-2-3{width:calc(100% / 3 * 2);}
.b-1-4{width:calc(100% / 4);}
.b-1-5{width:calc(100% / 5);}
.b-2-5{width:calc(100% / 5 * 2);}
.b-3-5{width:calc(100% / 5 * 3);}
.b-4-5{width:calc(100% / 5 * 4);}

/* CKEditor custom styles */
.text .full-image{
  width:100%;
}
.text figcaption{
  font-size: var(--small);
  line-height: 1.2em;
  text-align: center;
  margin: var(--p) 0;
}
.text blockquote{
  padding-left: calc(var(--p)*2);
  border-left: var(--p) solid var(--c1);
  margin-left: calc(var(--p) * -1);
}
.shadowed{
  box-shadow: 0 0 10px black;
}
/* Text blocks */
.text{
  padding:var(--p); 
}
.text p, .text ul, .text ol{
  margin-bottom: calc(var(--p)*2);
}
.text h2{
  text-align: center;
  background: var(--c1);
  color: var(--bg);
  padding: 5px var(--p);
  border-radius: calc(var(--p) *2);
  margin-bottom: var(--p);
}
.text h3{
  font-size: 1.5em;
  text-transform: uppercase;
  border-bottom:1px solid;
  margin-left: calc(var(--p) * -1);
  margin-bottom: var(--p);
  padding: 0 var(--p);
  width: calc(100% + var(--p) * 2);
  /* border-left: calc(var(--p) * 3) solid black; */
}
.text h3:not(:first-child) {
  margin-top: calc(var(--p)* 8);
}
.text h4{
  border-left: calc(var(--p) * 3) solid black;
  padding-left: var(--p);
  margin: var(--p) 0  var(--p) calc(var(--p) *-1);
}

.text li{
	line-height:1.2em;
	position:relative;
  padding-left: calc(var(--p)*3);
  margin-bottom: var(--p);
}
.text li:before{
	content:"◼";
	position: absolute;
	top:0;
	left:0;
}
.text ol li {
  counter-increment: nb;
}
.text ol li:before {
  content: counter(nb) ". ";
}
.text ol {
  list-style: none;
  counter-reset: nb;
}
.text img{
  margin: 0 auto;
}
.text a{
  border-bottom: 1px solid var(--c1);
}
.small-text{
  font-size: var(--small);
  line-height: 1.2em;
}
.ribon{
  text-align: center;
  margin: var(--p) 0 0 0;
  width: 100%;
  background: var(--c1);
  color: var(--bg);
  position: relative;
  top: 0;
  left: 0;
}
.sticky-ribon{
  text-align: center;
  position: sticky;
  top:var(--headerH);
  z-index: 3;
}
.gapd{
  margin:0 calc(var(--p)*2);
}
.ribon.breadcrumb{
  display: block;
}
.ribon a{
  color: var(--bg);
  text-decoration: underline;
}
.ribon a:hover{
  color: var(--c1);
}
.pre-list-ribon:after{
  display: block;
  content:"↓";
  width: 100%;
  background: var(--c1);
  font-size: 1.5em;
  font-weight: 200;
  padding-bottom: calc(var(--p)/2);
}
h2.ribon{
  margin-top: 0;
}
.full-width{
  position: relative;
  left:calc(var(--p) * -1);
  width: calc(100% + var(--p) * 2);
}
.lang-picker{
  top:calc(var(--p) * -1);
  text-align: center;
}

/* sub-pages menu */
.sub-pages{
  display: flex;
  position: sticky;
  z-index: 3;
  top: calc(var(--headerH) + var(--p) * 3);
  justify-content: space-evenly;
  text-align: center;
  width: 50%;
  margin: 0 auto;
}
.sub-pages a{
  background: var(--c1);
  color: var(--bg);
  padding: calc(var(--p) /2) calc( var(--p) * 2 );
}
.sub-pages a:hover{
  background: var(--bg);
  color: var(--c1);
}
main h1 a{
  color: var(--bg);
}

.button, button, span.editor-button a{
  background: var(--mid);
  border:3px outset white;
  padding: var(--p) var(--p) calc(var(--p)/2);
  display: inline-block;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: -.04em;
  transition: background .1s ease-out;
}
.button:hover, button:hover, span.editor-button a:hover{
  background: var(--c2);
}
.button:active, button:active, span.editor-button a:active{
  border:3px inset var(--c2);
  background: #BBB;
}
.button a{
  border-bottom:0;
}
.edit-link{
  position: fixed;
  z-index: 4;
  padding:2px var(--p);
  line-height: 1em;
  top:0;
  right:0;
}

/* Pager .sitemap-header */
.pagination {
  padding: calc(var(--p)*3) var(--p);
  color: var(--c2);
  background: var(--c1);
}
.pagination ul{
  display: flex;
  justify-content: center;
  width: 100%;
}
.pagination li {
  margin: 0 var(--p);
}
.pagination li a {
  padding: 0.3em 0.6em;
  border-radius: 1em;
  border: none;
  background: var(--bg);
}
.pagination li a:hover {
  background: var(--c2);
}
.hidden-meta{
  display: none;
}
.black-box{
  background: var(--c1);
  color: var(--bg);
}
.black-box a{
  color: var(--bg);
  border-color: var(--bg);
}
a{
  color:var(--c1);
  text-decoration: none;
  transition: background .4s ease-out;
}
a:hover img{
  opacity: .8;  
}
a:hover{
  transition: none;
  background: var(--c2);
}
a:active{
  background: var(--c2);
}

/* News banner */
.news-banner {
  display: none;
  transition: all .2s ease-in-out;
  width:100%;
  position: relative;
  text-align: center;
  padding-right: 3em;
}
.news-banner p{
  margin:0;
}
.news-banner.opened {
  display: block;
  right: 0;
  background-color: var(--vivid);
}
.news-banner .close-news{
  cursor: pointer;
  background: none;
  border: none;
  color: inherit;
  font-size: 2.2em;
  position: absolute;
  font-weight: normal;
  right: 0;
  top: 0;
  height: 1em;
  padding: 0 var(--p);
}

/* Footer */
footer {
  border-bottom:calc(var(--p)*4) solid var(--c1);
  scale: -1;
}
.p404{
  font-size: 20vw;
  text-align: center;
  margin-bottom: var(--p);
  line-height: 1em;
}
.p404:hover{
  background: white;
}

/* Responsive */
@media only screen and (max-width: 700px) {
  :root{
    --headerH:4.4em;
  }
  body{
    font-size: 18px;
    line-height: 1.2em;
  }
  [class*='b-1']{
    width: 100%;
    left: 0;
  }
  .big-button{
    width: 100%;
  }
  footer{
    display: none;
  }
  .m-menu-btn{
    display: block;
    width: 3em;
    height: 3em;
    border-radius: 100%;
    position: fixed;
    top: var(--p);
    z-index: 5;
    left: calc(50% - 1.5em - 12px);
  }
  .font-box{
    border-bottom: 1px solid var(--c1);
  }
  .edit-link{
    position: static
  }
  .menu{
    margin-top: 2em;
  }
  header{
    /* position: fixed; */
    z-index: 4;
    max-height: 100vh;
    overflow: scroll;
    position: fixed;
    top: 0;
    padding-top: var(--headerH);
  }
  input, textarea, select, button{
    font-size: initial;
  }
  .main-header{
    position: static;
  }
  .menu, .sitemap-header{
    display: none;
  }
  body[data-mmenu]{
    overflow: hidden;
  }
  body[data-mmenu] .menu,
  body[data-mmenu] .sitemap-header{
    display: block;
    background-color: var(--bg);
    z-index: 4; /* Above sticky ribon */
    left: 0;
    line-height: 1.5em;
    /*! position: fixed; */
    top: 5em;
  }
  header a{
    padding:calc(var(--p) / 2);
  }
  .link-list .link-item a{
    display: block;
  }
}
::selection {background:LightYellow;}
::-moz-selection {background:LightYellow;}