:root {
  --background: #fcfcfc;
  --background-rp: #faf3e6;
  --background-inv: #030303;
  --color_1: #72dec2;
  --color_2: #51a196;
  --color_3: #316067;
  --grey_1: #f4f4f4;
  --grey_2: #a1a1a1;
  --grey_3: #666666;
  --grey_4: #111111;
  --rounded: 2px;
}

.logo {background-image: url("../logo.svg");}

* {margin:0; padding:0; border:0; outline:0; border-spacing:0; text-decoration:none; font-weight:inherit; font-style:inherit; color:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; list-style:none; border-collapse:collapse; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale}
body {background:black; padding-top:0px; overflow-x: hidden; transition: opacity 150ms; opacity: 1 !important; font-family: sans-serif; height: 100vh}
p {font-family: var(--font)}
b {font-weight: normal; font-family: var(--font-b)}
i {font-weight: normal; font-style:italic; font-family: var(--font-i)}
a {text-decoration: none}
code {font-family: var(--mono); border: 1.5px solid black; padding: 0px 5px; border-radius: var(--rounded)}
hr {border-top: 1.5px solid #ddd; padding-bottom: 30px}

#header {position: relative; min-height: 85px; transition: all 250ms; color: white}
#header #photo {position: relative; top: 0px; left: 0px; width: 100%; max-height: calc(100vh - 135px); background-position: center; background-size: cover; transition: opacity 1000ms; min-height: 115px; margin: 0px auto; overflow: hidden}
#header #photo #media {display: block; width:100%; height:100%; background-size:cover; background-position: center; min-height:calc(100vh - 135px)}
#header #menu {position: fixed; top: 30px; left: 30px; width: calc(100% - 60px); padding-bottom: 30px; border-bottom: 1.5px solid rgba(0, 0, 0, 0.2); height:30px; transition: border 500ms}
#header #menu.sticky {position: absolute; bottom: 0px; top: initial; border-bottom-color: rgba(0,0,0,0)}
#header #menu #logo {position: absolute; display: block; top: 0px; width: 160px; height: 35px; z-index: 9000; background-repeat: no-repeat; background-size: contain; background-position-y: center; left: calc(50vw - 100px); margin-top: -2.5px}
#header.no_photo {height: 120px; min-height: 50px; background: var(--background)}
#header.no_photo #menu {position: absolute; top:25px}

#core {position: relative; z-index: 9001; overflow: auto; min-height: calc(100vh - 230px); height: 100%; background-color: var(--background); margin-bottom: 0px}

#core #sidebar {display: inline-block; width: calc((100vw - 730px - 90px)/2); height: calc(100% - 90px); position: relative; margin-right: 0px; margin-left:30px; padding:60px 30px 30px 0px; min-width: 250px; max-width: 300px;}
#core #sidebar h2 {font-size: 30px; margin: 0px auto; display: block; line-height: 30px; text-transform: uppercase; margin-bottom: 30px; font-family: var(--font-t)}
#core #sidebar ul {font-family: var(--mono)}
#core #sidebar ul li {position: relative; line-height: 20px;}
#core #sidebar ul.directory {font-size: 14px; border-top: 1.5px solid; padding-top: 30px}
#core #sidebar ul.directory li.parent {font-family: var(--mono-m); margin-bottom:15px; padding-right: 15px}
#core #sidebar ul.directory li.parent:after {font-family: var(--mono); content: '<'; color:var(--grey_2); position: absolute; right:0px}
#core #sidebar ul.directory li:hover:before {content:'•'; position: absolute; left:-15px}
#core #sidebar ul.directory li.active:before {content:'•'; position: absolute; left:-15px; color:var(--grey_2)}
#core #sidebar ul.directory li:last-child {border-bottom: 1px solid; padding-bottom: 30px; margin-bottom: 30px}

#core #sidebar ul.links {font-size: 12px}
#core #sidebar ul.links li.parent {font-family: var(--mono-m); margin-bottom:15px; padding-right: 15px}
#core #sidebar ul.links li.parent:after {font-family: var(--mono); content: '<'; color:var(--grey_2); position: absolute; right:0px}
#core #sidebar ul.links li:hover:before {content:'•'; position: absolute; left:-15px}
#core #sidebar ul.links li.active:before {content:'•'; position: absolute; left:-15px; color:var(--grey_2)}

#searchform {background: inherit; position: fixed; bottom: 20px}
#searchbar {background: inherit; font-family: var(--mono); text-transform: uppercase}

#core #content {display: inline-block; position: absolute; padding: 60px 0 0 calc(50% - 700px); margin: 0px auto; vertical-align: top; max-width: 800px; width: auto}
#core #content > p:first-child {border-bottom: 1.5px solid #ddd; padding-bottom: 30px}
#core #content p {font-size: 18px; display: block; line-height: 27px; font-family: var(--font); margin: 0px 0px 30px}
#core #content p a {margin-bottom: -2px; display: inline-block; font-family: var(--font_m); position: relative; line-height: 90%; transition: all 150ms; border-bottom:1.5px solid gray}
#core #content p a:hover {border-bottom-color: black}
#core #content p code, #core #content li code {display: inline-block; font-size: 12px; font-family: var(--mono_b); border: 1.5px solid black; padding: 0px 5px; border-radius:var(--rounded); line-height: 20px; margin-bottom: 0px; background:none; color:black; vertical-align: middle}
#core #content h2 {font-family: var(--font-b); font-size: 30px; text-transform: line-height: 30px; margin-bottom: 30px}
#core #content h3 {font-family: var(--font-b); font-size: 24px; text-transform: line-height: 30px; margin-bottom: 20px}
#core #content h4 {font-size: 18px; font-family: var(--font-b); display: block; margin-bottom: 15px; line-height: 25px}
#core #content h4 a:hover {text-decoration: underline}
#core #content ul {margin-bottom:30px; position: relative}
#core #content ul li {font-family: var(--font); line-height: 25px; position: relative; padding-left:30px}
#core #content ul li a {margin-bottom: -2px; display: inline-block; font-family: var(--font_m); position: relative; line-height: 90%; transition: all 150ms; border-bottom:1.5px solid transparent}
#core #content ul li a:hover {border-bottom-color: black}
#core #content ul.bullet li:before { content:"▹"; position:relative; left:-10px; vertical-align: middle}
#core #content code {font-family: var(--mono); font-size: 12px; padding: 20px 30px; margin-bottom: 30px; line-height: 18px; overflow-x: auto; overflow-y: hidden; background: white; color: black; border-radius: var(--rounded)}
#core #content code b { font-family: var(--mono_m); font-weight: normal;  }
#core #content code li { display: block; line-height: 20px }
#core #content code li a { font-family: var(--mono_m); text-decoration: underline }
#core #content code li b { font-family: var(--mono_m); font-weight: normal }
#core #content code comment { color:var(--grey_2) }
#core #content .quote {padding: 5px; margin: 30px 10px; border-left: 5px solid var(--grey_2); background-color:var(--grey_1); color:var(--grey_3)}

/* RP MODIFIERS */
/* .rp {padding: 20px !important; background-color: var(--background-rp) !important; border: 20px solid transparent; border-image: linear-gradient(black, gray) 20 20} */
.rp p {font-family: var(--rp) !important}
.dark {color: #ffffff; background-color: var(--background-inv) !important}
.dark p a:hover {border-bottom-color: white !important}