/*-------------------/
  @ Main
/-------------------*/

body { font-family: 'archivo_regular'; background:#000; padding-top:5px; overflow-x: hidden; transition: opacity 150ms; opacity: 1 !important}
wr { display:block; max-width:900px; margin:0px auto; }
photo { display: block;background-position: center; background-size:cover; transition: all 150ms; }
b { font-weight:bold; }
i { font-style:italic }
a { cursor: pointer; }
list { display: block }
list ln { display: block }
code { display: block; white-space: pre }
svg { stroke-width: 10;stroke: white;stroke-linecap: round; }
media { display: block; width:100%; height:100%; background-size:cover; background-position: center }
t { display: inline }
noscript { color:white; display: block; padding:30px; font-family: 'archivo_medium'; font-size:12px; line-height: 20px }
noscript b { font-family: 'archivo_bold'; font-weight: normal; }
noscript a { font-family: 'archivo_bold'; text-decoration: underline; }
noscript ul { padding-left:15px; padding-top:15px;}
noscript ul li:before { content:"—"; color:#333;padding-right:10px;}

#view { transition: opacity 50ms, background-color 500ms; background-color: #f4f4f4; }

#view.loading { opacity: 0 }
#view.loading #header #photo { opacity: 0 }
#view.ready { opacity: 1; transition: opacity 250ms }
#view.ready #header #photo { opacity: 1 }

#header { position: relative; min-height: 155px; transition: all 250ms; color: white;}
#header #logo { position: fixed;display: block;top: 15px;width: 180px;height: 90px;z-index: 200;background-image: url(../media/icon/logo.svg);background-repeat: no-repeat;background-size: contain;background-position-y: center;left: 30px; }
#header #logo a { display:block; width:100%; height:100%;}
#header #logo.sticky { position: absolute;bottom: 18px;top: initial; }
#header #photo { position: relative; top:0px; left:0px; width:100vw; max-height:calc(100vh - 135px); background-position: center; background-size:cover; transition: opacity 750ms; min-height:115px;}
#header #photo media { min-height:calc(100vh - 135px);}
#header #photo.hide { opacity: 0; transition: opacity 50ms }
#header #photo.show { opacity: 1; transition: opacity 250ms }
#header #photo.empty media { display: none }
#header #info { display: block;position: absolute;bottom: 30px;font-size: 12px;left: 30px;line-height: 16px; opacity: 1; transition: opacity 250ms,bottom 250ms}
#header #info a { font-weight: normal; font-family: 'archivo_bold' }
#header #info a:hover { text-decoration: underline; }
#header #info #title { display: inline-block; vertical-align: top; text-transform: capitalize;}
#header #info #glyph { display: inline-block; width:35px; height:35px; margin-right:10px;vertical-align: top; fill:none; stroke:white; stroke-width:7.5; stroke-linecap: round}
#header #info.ghost { opacity: 0; bottom:35px; }
#header #menu { position: fixed;top: 45px; right: 45px;}
#header #menu #search { line-height: 16px;padding: 8px 20px 8px 0px;font-size: 12px;font-family: 'archivo_bold';text-transform: capitalize;border-right: 1.5px solid white;background: transparent;margin-top: -2px;text-align: right; transition: all 250ms; width:120px; float:left; }
#header #menu #search:hover,#header #menu #search:focus { color:black; background:white; cursor:pointer; border-radius: 2px; padding-right:15px; }
#header #menu #activity { display: block; float:left; line-height: 30px; font-size: 12px; font-family: 'archivo_medium' }
#header #menu #activity a { display: inline-block; margin-left:15px; padding-left:35px; background-size:contain; background-position: left center; background-repeat: no-repeat; }
#header #menu #activity a#diaries { background-image:url(../media/icon/diary.svg); }
#header #menu #activity a#logs { background-image:url(../media/icon/log.svg); }
#header #menu #activity a#issues { background-image:url(../media/icon/issue.svg); }
#header #menu #activity a:hover { text-decoration: underline; }
#header #menu.sticky { position: absolute;bottom: 50px;top: initial; }

#header.light #logo { -webkit-filter: invert(1); filter: invert(1); }
#header.light #menu { -webkit-filter: invert(1); filter: invert(1); }
#header.light #info { -webkit-filter: invert(1); filter: invert(1); }

#header.no_photo { height: 120px;min-height: 50px; }
#header.no_photo #logo { -webkit-filter: invert(1); filter: invert(1); }
#header.no_photo #menu { -webkit-filter: invert(1); filter: invert(1); }
#header.no_photo #info { display: none }

#core { position: relative;z-index: 9000; padding-bottom:1px; transition: background-color 1500ms; overflow: hidden; min-height: calc(100vh - 230px)}

#sidebar { display: inline-block;padding: 50px 30px 60px 30px;width: 200px;position: relative;height: 100%;margin-right: 0px}
#sidebar #bref > h1 { font-size: 26px;line-height: 30px;margin: 0px 0px 30px;font-family: 'archivo_medium'; max-width: 400px}
#sidebar #bref > h1 a { font-family: 'archivo_bold' }
#sidebar #bref > h1 b { font-family: 'archivo_medium_italic'; font-weight: normal; }
#sidebar #bref > h2 { font-size: 20px;margin: 0px auto;display: block;line-height: 25px;text-transform: uppercase;margin-bottom: 30px;font-family: 'archivo_light';}
#sidebar #bref > h2 a:hover { text-decoration: underline; }
#sidebar #bref > h2 .links { margin: 30px 0px; }
#sidebar #bref > h2 .links a { font-size: 11px;margin-bottom: 2px;font-family: 'archivo_bold';line-height: 20px;display: block;text-transform: uppercase; }
#sidebar #bref > h2 .links a:hover { text-decoration: underline; }
#sidebar #bref > h3 { display: block;margin-top:1px; margin-bottom: 30px }
#sidebar icon { display: block;background-image: url(../media/badge/nataniev.svg);background-repeat: no-repeat;background-position: center center;background-size: 100px 100px;background-color: white;width: 150px;height: 150px;margin-bottom: 45px}
#sidebar icon.hide { transition: opacity 50ms; opacity: 0; height:0px; margin-bottom:0px; }
#sidebar icon.show { transition: opacity 150ms, height 250ms opacity: 1;  }

#content { display: inline-block;padding: 45px 30px 30px;margin: 0px auto;vertical-align: top;max-width:730px;width: 100% }
#content > p:first-child { font-size: 32px;line-height: 40px;max-width: 480px  }
#content p { font-size: 18px;display: block;max-width: 600px;line-height: 25px;font-family: 'archivo_regular';margin: 0px 0px 30px }
#content p b { font-family: 'archivo_bold'; font-weight: normal; }
#content p b i { font-family: 'archivo_bold_italic'; font-weight: normal; font-style: normal; }
#content p i { font-family: 'archivo_italic'; font-style: normal; }
#content p a { margin-bottom: -2px;display: inline-block;font-family: 'archivo_medium';position: relative; line-height: 90%; transition: all 150ms; border-bottom:1.5px solid transparent; }
#content p a:hover { border-bottom-color: black }
#content p a.external {  }
#content p a.external:after { content: "°";color: #000; font-family: 'archivo_bold'; padding-left:1px; transition: all 250ms}
#content p a.external:hover:after { color:#72dec2; }
#content p a.redlink { border-bottom: 1.5px solid red }
#content p a.redlink:hover { background:red; }
#content p.note { display: block;background: #e9e9e9;max-width: 660px;margin-bottom: 30px;font-size: 13px;line-height: 20px;padding: 15px 20px;font-family: 'archivo_medium';color: #222;border-radius: 2px }
#content p.note a { text-decoration: underline; }
#content p.note a:hover { text-decoration: none }
#content p.note b { font-weight: normal; font-family: 'archivo_bold' }
#content p code { display: inline;padding: 4px 7.5px !important;font-size: 11px; border-radius: 3px; border:1.5px solid black; font-family: 'input_mono_medium'; text-transform: uppercase; line-height: 20px; background:transparent; position: relative; top:-2px; margin-left:0px;}
#content h2 { display: block;text-decoration: none;border-bottom: 1.5px solid transparent;transition: all 250ms;font-family: 'archivo_bold';text-transform: capitalize;font-size: 36px;letter-spacing: -1px; margin-bottom: 30px}
#content h2.book { font-family: 'frank_ruhl_light';max-width: 700px !important;font-size: 40px;margin-bottom:30px;line-height: 45px; text-transform: capitalize;letter-spacing: -1px}
#content h2.book a { border-bottom:0px;  }
#content h2 a { display: inline-block; text-decoration: none;  transition: all 250ms; height:30px; }
#content h2 a:hover {}
#content h3 { font-family: 'archivo_medium';font-size: 30px;text-transform: capitalize;line-height: 30px;max-width: 600px;margin-bottom: 30px;}
#content h3.book { font-family: 'frank_ruhl_regular'; text-transform: uppercase  }
#content h3 a { display: inline-block; text-decoration: none}
#content hs { font-size: 13px;font-family: 'archivo_medium';margin-top: -20px;display: block;margin-bottom: 30px;line-height: 20px; }
#content hs a { border-bottom:0px; font-family: 'archivo_bold'; }
#content hs a:hover { text-decoration: underline; }
#content hs b { font-weight: normal; font-family: 'archivo_bold' }
#content iframe { margin-bottom:45px; border-radius: 3px; overflow: hidden; max-width:700px; display: block}
#content div.term a.photo { width: 100%;height: 370px;border-radius: 4px;max-width: 600px;margin: 0px 0px 45px }
#content div.term p {  }
#content div.container div.container { padding: 0px 30px;margin-bottom: 45px;border-left: 1.5px solid black }
#content table { overflow: hidden;border-collapse: separate;font-family: 'input_mono_regular';min-width: 50%;background: #fff;padding: 20px; font-size:12px; line-height:20px; margin-bottom:30px}
#content table tr th { font-family:'input_mono_medium'; text-align:left; padding-top:10px; padding-bottom:10px;}
#content table tr > * { padding-right:10px; padding-left:10px; }
#content table tr b { font-family: 'input_mono_medium'; font-weight: normal; }
#content table tr a { text-decoration: underline; }
#content table tr a:hover { text-decoration: none; }
#content list { margin-bottom:30px; position: relative; max-width: 700px;}
#content list ln { font-family: 'archivo_regular';line-height: 25px; position: relative; padding-left:30px}
#content list ln a { text-decoration: underline; }
#content list ln b { font-family: 'archivo_bold';font-weight: normal; }
#content list.bold { }
#content list.bold ln { display: block;font-size: 14px;line-height: 30px;font-family: 'archivo_medium';position: relative;background:black;color:white;padding-left:25px;margin-bottom:1.5px;border-radius: 2px}
#content list.bold ln:before { content: "•"; position: absolute; left:10px; font-size:20px; color:#aaa;}
#content list.bold ln b { font-family: 'archivo_bold';}
#content list.bold ln a { font-family: 'archivo_bold';}
#content list.mini { max-width:550px; }
#content list.mini ln { font-family: 'input_mono_regular'; font-size:13px; line-height: 25px; margin-bottom:5px; position: relative;}
#content list.mini ln b { font-family: 'input_mono_medium' }
#content list.mini ln a { font-family:'input_mono_medium' }
#content list.tidy { columns:3; }
#content list.tidy ln { border-top: 0px;line-height: 20px;font-size:13px;margin-left:0px;padding:0px; margin-bottom: 0px; font-family: 'archivo_regular' }
#content list.tidy ln a { text-decoration: none; font-family: 'archivo_bold' }
#content list.tidy ln a:hover { text-decoration: underline; }
#content list.tidy ln.head { font-size: 18px;font-family: 'archivo_regular';line-height: 45px; }
#content quote { display: block;margin-bottom: 30px; position: relative;}
#content quote p.text { max-width: 400px;padding-left: 30px;margin-left: -30px;margin-bottom: 15px;font-size: 22px;line-height: 30px;font-family: 'frank_ruhl_regular'}
#content quote p.text:before { content:"\""; color:#aaa; position: absolute; left:-10px; }
#content quote p.text:after { content:" \""; color:#aaa; }
#content quote p.text b { font-family: 'frank_ruhl_medium'; font-weight: normal; }
#content quote p.text a { font-family: 'frank_ruhl_bold'; text-decoration: none; border-bottom: 1.5px solid #ccc; transition: all 250ms }
#content quote p.text a:hover { border-bottom-color: #000 }
#content quote p.attrib { font-size: 11px;line-height: 20px;font-family: 'input_mono_regular'; color: #999; }
#content quote p.attrib a { font-family: 'input_mono_medium'; text-decoration: none; background: #fff;color: #000;padding: 0px 10px;display: inline-block;line-height: 25px;border-radius: 2px; border-bottom:0px !important; }
#content quote p.attrib b { font-family: 'input_mono_medium'; text-decoration: none; }
#content quote p.attrib a:hover { background: black; color:white; }
#content quote p.attrib:before { content:"— "; }
#content quote p a { border-bottom: 0px; text-decoration: underline; }
#content quote p a:hover { text-decoration: none }
#content quote p a:after { content: ""; width:0px;}
#content quote p b { font-family: 'archivo_bold' }
#content quote h3 b { font-family: 'archivo_bold'; font-weight: normal; }
#content quote h3 a { margin-bottom: -1.5px }
#content code { font-family: 'input_mono_regular';font-size: 12px;padding: 30px 0px 0px 30px;max-width: 600px;margin-bottom: 30px;line-height: 18px;border-top:1.5px solid black; overflow-x: auto; overflow-y: hidden;}
#content code b { font-family: 'input_mono_medium'; font-weight: normal;   }
#content code ln { display: block; line-height: 20px }
#content code ln a { font-family: 'input_mono_medium'; text-decoration: underline;}
#content code ln b { font-family: 'input_mono_medium'; font-weight: normal; }
#content code comment { color:#999; }

#content .entry.log { display: block;padding: 15px 15px 15px 70px;margin-bottom: 1px;vertical-align: top;position: relative;font-size: 14px;max-width: 650px;border-top: 1.5px solid #000;min-height: 50px }
#content .entry.log svg:hover { opacity: 1.0}
#content .entry.log svg.icon { cursor: pointer; background:black; width:50px; height:50px; border-radius:3px; display:inline-block; position:absolute; left:0px }
#content .entry.log svg.icon path { fill:none; stroke-width:10;stroke:white }
#content .entry.log .head { display: block; font-size:15px; line-height: 25px; }
#content .entry.log .head .div.details {  }
#content .entry.log .head .details a { font-family: 'archivo_bold' }
#content .entry.log .head .details t.time { color:#999; float:right; }
#content .entry.log .head .details span.name:hover { text-decoration: underline; cursor: pointer; }
#content .entry.log .head .bref a { font-family: 'archivo_medium'; text-decoration: underline; }
#content .entry.log img { max-width:700px; cursor: pointer; margin-top:15px; }

#content img { max-width: 100%;display: block;border-radius: 3px;margin:0px 0px 30px; width:700px; }
#content img.icon { max-width:200px;margin:0px auto 30px;position: relative;left:-60px }
#content photo { display: block;height: 330px;width: 100%;max-width: 600px;margin-bottom: 30px;border-radius: 2px }
#content gallery { display: block; max-width: 700px; height:350px; position: relative; overflow: hidden; margin-bottom:30px; overflow: hidden; border-radius: 2px }
#content gallery photo { position: absolute;background-size: cover;height: 100%;max-width:100% }
#content gallery.p2 photo:nth-child(1) { top:0px;left:0px;width:50%;height:100%; }
#content gallery.p2 photo:nth-child(2) { top:0px;left:calc(50% + 1px);width:calc(50% - 1px);height:100%; }
#content gallery.p3 photo:nth-child(1) { top:0px;left:0px;width:50%;height:100%; }
#content gallery.p3 photo:nth-child(2) { top:0px;left:calc(50% + 1px);width:calc(50% - 1px);height:50%; }
#content gallery.p3 photo:nth-child(3) { top:calc(50% + 1px);left:calc(50% + 1px);width:calc(50% - 1px);height:calc(50% - 1px); }
#content center { display: block; max-width: 600px;}
#content center img { display: inline-block;max-height: 200px;width: initial}
#content mini { display: block;font-size: 11px;margin-bottom:30px;color:#999;line-height: 30px; font-family: 'input_mono_regular'; max-width: 700px }
#content mini b { font-weight: normal; font-family: 'input_mono_medium' }
#content mini a { background: #fff;color: #000;padding: 0px 10px;display: inline-block;line-height: 25px;border-radius: 2px }
#content mini a:hover { background:#000; color:white; }
#content mini t.right { float:right;  }
#content mini t.right a { background:none; padding:0px }
#content mini t.right a:hover { color:black; text-decoration: underline; }

#navi { margin-left: 30px;font-size: 13px;width: calc(100% - 160px);border-top: 1.5px solid black;padding-top: 30px;padding-left: 75px;position: relative;overflow: hidden;}
#navi.empty { display: none }
#navi svg { stroke: black;fill: none;padding: 15px;width: 40px;height: 40px;display: block; position: absolute; left:0px;}
#navi table { margin-bottom:45px;border-collapse: collapse; max-width: 800px; overflow-x: scroll}
#navi table tr {}
#navi table tr.head th { min-width: 170px }
#navi table tr.head td { padding-left:15px; }
#navi table tr.head th a { font-family: 'archivo_bold'; padding-right:15px; }
#navi table tr th,#navi table tr td { padding:0px; vertical-align: top; line-height: 20px; color:#999; }
#navi table tr th a,#navi table tr td a { color:black; }
#navi table tr th a:hover,#navi table tr td a:hover { text-decoration: underline; }
#navi table tr th { text-align: left }
#navi table tr td a { font-family: 'archivo_medium' }
#navi table tr td b { font-family: 'archivo_bold'; color:black; font-weight: normal; }
#navi table tr t.depth2:after { content:" •"; }
#navi table tr t.depth2:last-child:after { content:""; }
#navi table tr t.depth1 a { font-family: 'archivo_regular' }
#navi table tr t.depth1:after { content:" •"; }
#navi table tr t.depth1:last-child:after { content:""; }
#navi table table { margin-bottom: 0px }

#view.noir { background:transparent; }
#view.noir #core { background-color:#000 !important; color:white;border-bottom:1.5px solid #333}
#view.noir #header { -webkit-filter: invert(1); filter: invert(1); }
#view.noir #header photo { display:none}
#view.noir #navi { -webkit-filter: invert(1); filter: invert(1); border-top:1.5px solid transparent; }
#view.noir .entry.log { border-bottom: 1.5px solid #333; }
#view.noir .entry.log p { color:#aaa }
#view.noir .entry.log p.bref { color:white;}
#view.noir #content p a:hover { color:#72dec2; }
#view.noir #content p code { background:white; color:black; }
#view.noir code.inline { border-color:white; }
#view.noir table { background:none; font-family: 'archivo_medium'; border-collapse:separate; border-spacing:1px; padding:0px; }
#view.noir table tr {  }
#view.noir table tr td { margin-bottom:2px; border-collapse:  }
#view.noir table tr td a { text-decoration: none; }
#view.noir table tr td a:hover { text-decoration: underline; }
#view.noir code { padding-top:0px; }

#footer { background: #fff;color: black;padding: 0px 30px; clear:both; position: relative; }
#footer #credits { padding: 30px 20px;font-size: 12px;line-height: 40px;color: #000;margin: 0px;max-width: 100%;vertical-align: middle}
#footer #credits center { display: inline-block; position: absolute;left:calc(50% - 75px); font-family: 'input_mono_regular'; font-size:11px;}
#footer #credits a { font-family: 'archivo_bold';  }
#footer #credits a:hover { color:#000; opacity: 1; text-decoration: underline; }
#footer #credits a:hover { cursor: pointer }
#footer #credits a.icon { background-position: center center;background-size: cover ;display: inline-block;width: 30px;height: 30px;float: right;margin-left: 10px; margin-top:5px; opacity: 1.0}
#footer #credits a.icon:hover { opacity: 0.7 }
#footer #credits a.icon.twitter { background-image:url(../media/icon/twitter.png); }
#footer #credits a.icon.github { background-image:url(../media/icon/github.png); }
#footer #credits a.icon.hundredrabbits { background-image: url(../media/icon/hundredrabbits.svg);float:left;margin-left:0px;margin-right:20px }
#footer #credits a.icon.rotonde { background-image:url(../media/icon/rotonde.svg); }
#footer #credits a.icon.nataniev { background-image:url(../media/icon/oscean.png); }
#footer #credits a.icon.cc { background-image:url(../media/icon/cc.svg); background-size:90%; background-repeat: no-repeat;}
#footer #entaloneralie { margin-right:20px; fill:none; stroke-width:1; stroke-linecap:butt; stroke:black; border: 1.5px solid black; position: absolute; top:43px; transition: opacity 100ms}
#footer #entaloneralie:hover { opacity: 0.25 }
#footer #entaloneralie > div { margin-left:-1px; }
#footer #entaloneralie svg:hover { cursor: pointer; }
#footer #entaloneralie svg path { stroke-width:1; margin-top:-2px; margin-left:-2px; stroke:black; }

@media (max-width: 950px) {
  body #activity { display: none !important; }
  body #sidebar { width: calc(100% - 60px);float: none;clear: both;margin: 0px auto;position: relative;margin-bottom: 30px;padding: 45px 30px 0px; }
  body #sidebar #bref h1 { margin-bottom:0px; }
  body #sidebar #bref h2 { display: none }
  body #sidebar icon { position: absolute;top: 45px;left: 30px;width: 100px;height: 100px;display: block !important; border-right:1.5px solid black; padding-right:45px; border-bottom:0px; }
  body #sidebar h3 { display: none }
  body #content { padding:0px 30px; max-width: calc(100% - 60px) }
  body #content list.tidy { columns: 2 }
  body #navi { margin-left: 30px;margin-right: 30px;padding-left:0px;width:calc(100% - 60px) }
  body #navi svg { display: none; }
  body #footer #credits center { display: none; }
}