:root {
  /*text*/
  --textColor: #111;
  --textSecondaryColor: #4f4f4f;
  --textHeadlines: #111;
  --textLinks: #4f4f4f;
  --textBold: #111;

  --background: #fff;
  --backgroundSecondary: #f7f7f7;

  --accent: #111;
  --accentText: #fff;
  --accentSecondary: #2d2d2d;
  --accentTextSecondary: #e3e3e3;
  --accentStatic: #111;
  --accentStaticWhite: #fff;
  --accentWhite: #fff;
  --accentBlack: #111;

  --border: 1px solid #eceaea;

  --postWidth: 950px;
  --textSize: 18px;
  --googleFont: 'Lato';
  --googleFontSecondary: 'Lato';

  --barWidth: 100px;
  --asideWidth: 380px;
  --sideWidth: calc(var(--barWidth) + var(--asideWidth));
  --mainWidth: calc(100vw - 420px);
  --bannerHeight: 250px;
  --footerHeight: 190px;
}

[data-theme="dark"] {
  --textColor: rgba(255,255,255,0.8);
  --textSecondaryColor: #eee;
  --textHeadlines: #fff;
  --textLinks: #eee;
  --textBold: #fff;
  --background: #171717;
  --backgroundSecondary: #1f1f1f;
  --accent: #fff;
  --accentText: #111;
  --accentSecondary: #2d2d2d;
  --accentTextSecondary: #e3e3e3;
  --accentStatic: #111;
  --accentStaticWhite: #fff;
  --accentWhite: #1f1f1f;
  --accentBlack: #1f1f1f;
  --border: 1px solid #333333;
  --postWidth: 950px;
  --textSize: 18px;
  --googleFont: 'Lato';
  --googleFontSecondary: 'Lato';
  --barWidth: 100px;
  --asideWidth: 380px;
  --sideWidth: calc(var(--barWidth) + var(--asideWidth));
  --mainWidth: calc(100vw - 420px);
  --bannerHeight: 250px;
  --footerHeight: 190px;
}


/*GENERAL*/
*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body, html {
  font-size: var(--textSize);
  font-family: var(--googleFont);
  background: var(--background);
  position: relative;
  color: var(--textColor);
}

::selection {
  background: var(--accent);
  color: var(--accentText);
}

::-moz-selection {
  background: var(--accent);
  color: var(--accentText);
}

b, strong {
  color: var(--textBold);
}

a {
  text-decoration: none;
  color: var(--textLinks);
}

a:hover {
  color: var(--textColor);
}

strike {}

pre {
  margin 20px 10px;
  background: var(--backgroundSecondary);
  padding: 10px 10px;
  font: var(--textSize) monospace;
  letter-spacing: 0px;
  text-align: left;
  width: 100%;
  line-height: 160%;
  overflow: wrap;
  white-space: pre-wrap;       /* css-3 */
  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
  word-wrap: break-word;
}

.hljs {
  background: var(--backgroundSecondary) !important;
}

code {
  font-family: monospace;
}

small, sub {
  font-size: calc(var(--textSize)px - 1px);
}

blockquote {
  border-left: 5px solid var(--backgroundSecondary);
  margin-left: 15px !important;
  padding: 0 20px 0 20px;
}

.npf_color_joey {
color:#ff492f;
}

.npf_color_monica {
color:#ff8a00;
}

.npf_color_chandler {
color:#973ff4;
}

.npf_color_phoebe {
color:#fcf01d;
}

.npf_color_rachel {
color:#00b8ff;
}

.npf_color_ross {
color:#00cf35;
}

.npf_color_niles {
color:#ff62ce;
}

.npf_color_frasier {
color:#001935;
}

.npf_color_mr_big {
color:#000c1a;
}

.permalink blockquote {
  margin: 10px 0;
}

.caption ul,
.caption ol {
  margin: 20px 0 20px 35px;
  text-align: justify;
}

.caption li {
  margin: 10px 0 10px 15px;
}

/*headlines*/
h1, h2, h3, h4, h5 {
  font-family: var(--googleFontSecondary);
  text-transform: lowercase;
  color: var(--textHeadlines);
}

h1 {
  font-size: calc(var(--textSize) + 10px);
  padding-bottom: 25px;
  line-height: 100%;
}

h3 { /*quote*/
  font-size: calc(var(--textSize) + 5px);
}

input#mobile_button {
  display: none;
}

#mobile_menu {
  display: none;
}

/*transitions*/
a, body > iframe:first-child,
#tumblr_controls,
.post_header i,
nav ul i,
aside ul i,
.custom_like_button,
.buttons i {
  -ms-transition: 0.5s;
  -moz-transition: 0.5s;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

/*animations*/
aside, .post, #footer .row, #side_wrap, #errorp {
  -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 1s; /* Firefox < 16 */
  -ms-animation: fadein 1s; /* Internet Explorer */
  -o-animation: fadein 1s; /* Opera < 12.1 */
  animation: fadein 1s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}



/*LAYOUT*/

#tumblr_controls {display: none; z-index: 9;}

#wrapper {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

/*post container*/
main {
  position: relative;
  height: auto;
  background: var(--background);
  width: var(--mainWidth);
  margin-left: var(--sideWidth);
  margin-top: var(--bannerHeight);
  margin-bottom: var(--footerHeight);
}

#banner {
  position: fixed;
  top: 0;
  left: var(--sideWidth);
  height: var(--bannerHeight);
  width: var(--mainWidth);
    /*
  background-image: url("https://images.unsplash.com/photo-1483203257148-66ee23170d09?ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60");
  background-size: cover;
  background-position: left 100%;
 */
  background-image: url("https://static.tumblr.com/hohmoxg/smjpwqk12/smartmockups_jzpdgpyt.jpg");
  background-size: cover;
  background-position: 50% 55%;
  border-bottom: var(--border);
}

#banner .blck_bttn {
  position: absolute;
  top: calc(var(--bannerHeight) - 50px);
  padding: 15px 20px;
  background: var(--accentStatic);
  color: var(--accentStaticWhite);
  font-size: calc(var(--textSize) - 2px);
  font-weight: bold;
}

.blck_bttn i {
  font-size: 18px;
  margin-left: 5px;
}

.blck_bttn:hover {
  background: var(--accentSecondary);
}

.pinned_label {
  padding: 15px 20px;
  background: var(--accentStatic);
  color: var(--accentStaticWhite);
  font-size: calc(var(--textSize) - 2px);
  font-weight: bold;
  margin-bottom: 25px;
  display: inline-block;
}

/*sidebar*/
aside {
  position: fixed;
  left: var(--barWidth);
  bottom: 100px;
  display: flex;
  flex-direction: column;
  height: calc(100% - 120px);
  width: 380px;
  overflow-y: auto;
  top: 0;
}

aside .side_wrap {
  height: 100%;
}

main, #banner, #footer {
  border-left: var(--border);
}

/*footer*/
footer {
  height: 100px;
  margin-left: var(--sideWidth);
  background: var(--accentSecondary);
  color: var(--accentText);
  text-align: center;
}

/*SIDEBAR*/
nav {
  position: fixed;
  left: 0;
  width: var(--barWidth);
  height: 100%;
  background: var(--accentStatic);
  padding: 0px 0px;
}

.side_wrap {
  padding: 25px 50px 0 50px;
}

nav ul {
  position: absolute;
  bottom: 0px;
  left: var(--barWidth);
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
  transform-origin: bottom left;
  height: var(--barWidth);
  width: 100vh;
  display: flex;
  justify-content: space-between;
  list-style-type: none;
  padding-left: 25px;
}

nav li a, nav li, nav li:last-child i {
  display: flex !important;
  align-items: center;
  height: 100%;
  font-weight: 400;
  color: var(--accentStaticWhite);
  text-transform: lowercase;
  font-size: 12px;
  letter-spacing: 5px;
}

nav li:first-of-type {
  margin-left: 100px;
}

nav li span {
    font-size: 10px;
    margin-left: 10px;
}

nav li a {
  padding: 0 25px;
  font-family: var(--googleFont);
  background: rgba(255,255,255,0.03);
}

nav li i {
  justify-content: center;
  color: var(--accentstaticWhite);
}

aside a {
  color: var(--textColor);
}

aside ul {
  list-style-type: none;
  margin: 25px;
}

aside ul li {
  margin: 5px 0;
}

aside ul li a {
  font-family: var(--googleFontSecondary);
}

.side_wrap {
  display: flex;
  flex-direction: column;
}

/*boxes*/
.side_box {
   margin-bottom: 25px;
}

.box_title {
  display: flex;
  align-items: center;
  color: var(--textColor);
  justify-content: space-between;
  border-bottom: var(--border);
}

.box_title h2 {
  color: var(--textHeadlines);
  padding-bottom: 5px;
}

.box_title i {
  font-size: calc(var(--textSize) + 5px);
}

.box_desc {
  margin-top: 15px;
  font-size: calc(var(--textSize) - 1px);
  color: var(--textColor);
  text-align: justify;
  line-height: 150%;
  font-weight: 400;
}

.box_desc ul {
  margin: 0;
}

#about_box {
  align-self: flex-end;
  margin-top: auto;
}

#link_box {
  margin-bottom: 50px;
}

#link_box ul {
  margin: 0;
}

#link_box li {
  font-size: 25px;
  font-weight: bold;
  padding-bottom: 5px;
}

#support_box li {
  padding-bottom: 8px;
}

#support_box li i {
  color: var(--accent);
  margin-right: 15px;
}

#suggested {
  position: fixed;
  bottom: 50px;
  width: var(--asideWidth);
}

#suggested ul {
  display: flex;
  justify-content: space-around;
  margin: 0;
  height: 50px;
}

#suggested li {
  padding: 0 25px;
  margin: 0;
  display: flex;
  flex: auto;
  align-items: center;
  font-weight: bold;
  font-size: calc(var(--textSize) - 2px);
}

#suggested li:before {
  content: "#";
}

#suggested li:nth-of-type(1n) {background: rgba(127,127,127,0.1);}
#suggested li:nth-of-type(2n) {background: rgba(127,127,127,0.05);}
#suggested li:nth-of-type(3n) {background: rgba(127,127,127,0.01);}

.search {
  width: var(--asideWidth);
  display: flex;
  flex-direction: row;
}

#search_bar {
  position: fixed;
  left: var(--barWidth);
  bottom: 0;
}

.search form {
  flex: 1;
}

.search input, .search select, .search textarea {
  height: 50px;
  width: 100%;
  border: 0;
  padding: 20px;
  font-size: var(--textSize);
  background: var(--accentWhite);
  color: var(--textColor);
}

.search input:focus {
  border: 0;
  box-shadow: none;
  outline: 0;
}

.search .fa-search {
  height: 50px;
  width: 50px;
  color: var(--accentTextSecondary);
  background: var(--accentSecondary);
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#search_bar .fa-search {
  border-right: var(--border);
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  font-family: var(--googleFont);
}
::-moz-placeholder { /* Firefox 19+ */
  font-family: var(--googleFont);
}
:-ms-input-placeholder { /* IE 10+ */
  font-family: var(--googleFont);
}
:-moz-placeholder { /* Firefox 18- */
  font-family: var(--googleFont);
}

/*POSTS*/
.article_wrapper {
  border-bottom: var(--border);
  padding: 50px 50px;
}

article {
  max-width: var(--postWidth);
}

.post {
  display: flex;
  flex-direction: row;
  position: relative;
  height: auto;
  margin: auto;
}

.post_header {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 10px;
}

.pinfo > img {
  width: 50px;
}

.post_body {
  max-width: var(--postWidth);
  flex: 1;
  padding-right: 50px;
}

.cpt {
  max-width: var(--postWidth);
}

.post_footer {
  display: flex;
  flex-direction: column;
  width: 250px;
  border-left: var(--border);
  padding-left: 50px;
}

.post_title {
  width: 100%;
}

.post_title h1 {
  line-height: 150%;
  color: var(--textHeadlines);
  padding: 0;
}

/*CAPTIONS & UNNEST*/
.caption {
  margin-top: 0px;
  line-height: 150%;
  text-align: justify;
  font-size: var(--textSize);
  font-weight: 400;
  color: var(--textColor);
}

.reblog_body, .caption {
  padding: 15px 0 25px;
}

.caption h2 {
  margin-bottom: 10px; width: 100%; text-align: left;
}

.caption p a,
.caption ul a,
.caption a,
#top_articles a b {
  padding: 0 0px;
  box-shadow: inset 0 -50px var(--accent);
  color: var(--accentText);
  font-weight: 500;
}

.caption a:hover {
  box-shadow: none;
  color: var(--textColor);
}

.caption a b {
  color: var(--accentText);
}

.caption a b:hover {
  color: var(--textColor);
}

.caption p {}

.caption *, #desc * {
  margin: 15px 0;
  word-break: break-word;
}

.caption code * {
  margin: 0px 0 !important;
}

.caption p:empty, #desc p:empty {
  margin: 0;
}

.caption p:only-child {
  margin: 0;
}

.caption :first-child {
  margin-top: 0;
}

.caption :last-child, #desc :last-child {
  margin-bottom: 0;
}

.caption > :only-child {
  margin: 0 auto;
}

.caption :first-child:not(:empty) {
  margin-top: 0;
}

.caption blockquote p {
  margin: 0 auto;
}

.caption img {
  width: 100%;
  height: auto;
}

.reblog_parent {
  padding: 0px 0px 0px 0px;
  margin: 0px 0px;
}

.reblog_parent:first-child {
  margin-top: 0;
}

.reblog_parent:last-child {
  margin-bottom: 0;
}

.reblog_header,
.asker,
.answerer {
  display: flex;
  align-items: center;
  text-transform: lowercase;
  margin-top: 15px;
  font-weight: bold;
}

.reblog_header img,
.reblog_header i,
.asker img,
.answerer img {
  height: 32px;
  margin-right: 10px;
}

.answerer {
  margin-top: 0;

}

/*deactivated user*/
.reblog_header i {
  display: flex;
  align-items: center;
}

.answerer {
  flex-direction: row-reverse;
}

.answerer img {
  margin: 0 0 0 10px;
}

.reblog_body {
  margin-top: 0px;
}

.reblog_header a,
.asker,
.answerer {
  text-decoration: none;
  color: var(--textColor);
}

.reblog .qh,
.reblog .lh,
.reblog .audio_post,
.reblog .spotify_audio_player,
.reblog .soundcloud_audio_player  {
  margin-bottom: 20px;
}

.reblog.chat .reblog-list  {
  display: none;
}

/*POST TYPES*/

/*photo*/
.post_photo img {
  max-width: 100%;
  line-height: 100%;
}

/*photoset*/
iframe.photoset {
  max-width: 100%;
}

/*link*/
.lh a {
  padding: 0 5px;
  color: var(--accentText);
}
.lh.caption {
  background: var(--accent);
  padding: 15px;
}

/*chat*/
.chat_lines {
  padding: 10px;
}

.chat_lines.odd {
  background: var(--backgroundSecondary);
  color: var(--textColor);
}

.chat_lines.odd b {
  color: var(--textColor);
}

/*video*/
.tumblr_video_container {
  position: relative;
  overflow: hidden;
  padding-top: 56.25%;
  width: 100%!important;
  height: 100%!important;
}

.tumblr_video_iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%!important;
  height: 100%!important;
  border: 0;
}

.tumblr_video_container {
  max-height: 540px!important;
  overflow: hidden;
  margin-bottom: 5px;
}

#youtube_iframe {
  width: 100%!important;
}

/*ask*/
.asker a,
.answerer a {
  padding: 5px;
  color: var(--textLinks);
}

.question {
  margin-bottom: 15px;
  padding: 5px 25px;
  background: var(--backgroundSecondary);
}

.question .caption,
.question .caption a {
  margin-bottom: 0;
}

.question p {
  display: inline;
}

.answerer .caption {
  margin-top: 5px;
}

.answerer ~ .caption {
  margin-bottom: 25px;
}

.answerer {
  text-align: right;
  margin-bottom: 0px;
}

/*POST INFO*/
.post_info {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}

.post_header i,
.pdate a,
.pnotes a {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.post_header .pinfo {
  background: rgba(127,127,127,0.1);
}

.pinfo img {
  height: 50px;
  width: 50px;
}

.ptags {
  margin: 25px 0;
  line-height: 150%;
}

.ptags a {
  font-size: calc(var(--textSize) - 1px);
  color: var(--textSecondaryColor);
  padding: 0 10px 0 0;
  display: inline-block;
  font-weight: bold;
  text-transform: lowercase;
}

.pdate {
  padding: 0px;
  text-transform: uppercase;
  width: auto;
}

.pdate a {
  color: var(--textColor);
  text-transform: lowercase;
  font-weight: bold;
  font-size: calc(var(--textSize) + 3px);
}

.pnotes {
  font-size: 14px;
  margin-top: 5px;
  color: #6f6f6f;
  letter-spacing: 2px;
}

.pdate a,
.pnotes a {
  padding: 0
  height: 100%;
}

.pdate a

.answer .rblg {
  display: none;
}

/*BUTTONS & CONTROLS*/
.buttons {
  display: flex;
  justify-self: flex-end;
  margin: auto 0 0 auto;
}

.buttons a,
.buttons i,
.custom_like_button {
  font-size: 21px;
  color: var(--textColor);
}

.buttons a:hover,
.buttons i:hover {
  color: ;
}

.custom_like_button {
  position: relative;
  margin-left: 10px;
}

.custom_like_button:hover {cursor: pointer;}
.like_button {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
  opacity: 0.0001;
}

.like_button.liked + i,
.custom_like_button:hover {
  color: red;
}

/*PAGINATION*/
#pagination {
  position: relative;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#pagination a, #pagination b {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100%;
  background: rgba(255,255,255,0.1);
}

#pagination a:nth-of-type(2n) {
  background: rgba(255,255,255,0.15);
}

#pagination a:hover {
  background: none;
}

#pagination b {
  background: rgba(255,255,255,0.01);
}

#pagination b,
#pagination a,
#pagination i {
  font-size: 25px;
  color: var(--accentStaticWhite);
}


/*tags, search, etc headlines*/
.tag_info {
  position: relative;
  max-width: var(--postWidth);
  margin: 50px auto;
  padding: 0 50px;
  border-bottom: var(--border);
}

.tag_info:after {
  position: absolute;
  content: "";
  width: 15%;
  height: 5px;
  background: {color:accent};
  background-image: -webkit-linear-gradient(left, transparent 0%, {color:accent} 50%, transparent 100%);
  background-image: -moz-linear-gradient(left,  transparent 0%, {color:accent} 50%, transparent 100%);
  background-image: -o-linear-gradient(left,  transparent 0%, {color:accent} 50%, transparent 100%);
  background-image: linear-gradient(to right, {color:accent} 80%, transparent 100%);
}

.tag_info h2 {
  text-align: left;
}

.no_post h2 {
  background: none;
}

.tag_info + .article_wrapper {
  padding-top: 0;
}


/*PERMALINK*/
.permalink {
  position: relative;
  max-width: calc(var(--postWidth) + 100px);
  margin: 25px auto 100px auto;
  padding: 0 50px;
}

.permalink .pl.via {
  font-weight: bold;
  font-style: normal;
  text-transform: lowercase;
}

.pl i,
.pl a {
  margin: 0 5px 5px 0;
}

.permalink .pl i {
  font-style: normal;
}

.plnotes {
  margin: 25px 0;
  max-width: var(--postWidth);
}

.plnotes ol {
  margin: 50px 0;
  padding: 0;
  list-style-type: none;
}

.plnotes ol li {
  margin: 5px 0;
  padding: 0;
  font-weight: 400;
  font-style: normal;
  font-size: calc(var(--textSize) - 1px);
  color: var(--textLinks);
}

.plnotes ol li a {
  text-transform: lowercase;
  margin: 0 5px;
  font-weight: bold;
  font-style: normal;
  color: var(--textLinks);
  font-size: calc(var(--textLinks) - 1px);
}

.plnotes ol li blockquote a {
  text-transform: none;
  font-weight: normal;
}

.plnotes img {
  display: none;
  vertical-align: middle;
}

.plnotes img,
.plnotes a {
  margin: 0 5px 0 0;
}

.notes .action {
  font-style: normal;
}

.avatar_frame {
  display: none;
}

.more_notes_link_container {
  margin-top: 50px!important;
}

.more_notes_link_container a {
  font-style: normal!important;
}

.note.like::before,
.note.reblog::before,
.note.reply::before {
  font-family: 'Font Awesome 5 Free','Font Awesome 5 Brands';
  font-weight: 900;
  display: inline-block;
}

.note.reblog::before {
  content: "\f079";
  display: inline;
  width: 1.25em;
  margin-right: 15px;
}

.note.like::before {
  content: "\f004";
  display: inline;
  width: 1.25em;
  margin-right: 18px;
}

.note.reply::before {
  width: 1.25em;
  display: inline-block;
  text-align:center;
  content: "\f075";
  margin-right: 15px;
}

/*xkit*/
.note div.retags a {
  display: none;
}

#scrolltop {
  position: fixed;
  right: 30px;
  font-size: 25px;
  padding: 15px 20px;
  filter: opacity(0.3);
  cursor: pointer;
  display: none;
  z-index: 8;
  background: {color:accent};
  -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 1s; /* Firefox < 16 */
  -ms-animation: fadein 1s; /* Internet Explorer */
  -o-animation: fadein 1s; /* Opera < 12.1 */
  animation: fadein 1s;
}

#scrolltop i {
  color: {color:accent text};
}

#scrolltop:hover {
  filter: opacity(1);
}

#scrolltop:focus {
  outline:0;
}

/*OTHER PAGES*/
.flex {
  display: flex;
  justify-content: center
}

.flex.wrap {
  flex-wrap: wrap;
}

.pages h1, .pages .row > h2 {
  text-align: center;
  color: var(--textHeadlines);
  margin-bottom: 50px;
}

.pages #wrapper {
  background: var(--backgroundSecondary);
}

.pages aside {
  background: var(--backgroundSecondary);
}

.pages .side_wrap {
    padding: 20px 50px 0 50px;
}

.pages main {
  position: relative;
  background: var(--background);
  margin-left: var(--barWidth);
  margin-top: var(--bannerHeight);
  z-index: 9;
  width: calc(100vw - var(--barWidth));
  min-height: 100%;
  z-index: 1;
  margin-bottom: var(--footerHeight);
}

.page_banner {
  position: fixed;
  top: 0;
  left: var(--barWidth);
  height: var(--bannerHeight);
  width: calc(100vw - var(--barWidth));
  background: var(--background);
  background-size: cover;
  border-bottom: var(--border);
  border-left: var(--border);
  z-index: -1;
}

.inner {
  background: var(--background);
}

.pages section {
  padding: 80px 0px;
}

.pages section.secondary-bg {
  background: var(--backgroundSecondary);
}

.pages section#footer {
  left: 100px;
  width: calc(100vw - var(--barWidth));
  height: var(--footerHeight);
  bottom: 0;
  z-index: -1;
}

.pages .row {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 50px;
}

.pages .row.full-width {
  max-width: 100%;
}

.pages .no-bottom-padding {
  padding-bottom: 0;
}

/*support page*/
#banner_support {
  background-image: url("https://static.tumblr.com/hohmoxg/cdSpwweqg/matthew-waring-mjaoiige14e-unsplash.jpg");
  background-position: 50% 60%;
}

section.help_nav {
  flex-wrap: wrap;
  padding: 0 25px !important;
}

.topics {
  width: 250px;
  padding: 25px;
  margin: 0 25px 50px 25px;
  text-align: center;
  border: var(--border);
}

.topics h2 {
  margin-top: 15px;
}

.topics i {
  font-size: 28px;
}

.topics i, .topics h2 {
  color: var(--textColor);
}

#by_theme {
  flex-direction: column;
  text-align: center;
  padding-top: 25px;
}

#by_theme .search {
  margin: 0px auto 50px auto;
}

#theme_tags {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: center;
  margin: 0 auto;
}

#theme_tags li {
  margin: 5px 5px;
  list-style-type: none;
  padding: 15px 25px;
  background: var(--accentBlack);
}

#theme_tags li a {
  color: var(--accentStaticWhite);
}

.row#top_articles {
  max-width: 750px;
}

#top_articles .col {
  column-count:2;
  -moz-column-count:2;
  -webkit-column-count:2;
  -webkit-column-width: 300px; /* Chrome, Safari, Opera */
  -moz-column-width: 300px; /* Firefox */
  column-width: 300px;
  -webkit-column-gap: 50px; /* Chrome, Safari, Opera */
  -moz-column-gap: 50px; /* Firefox */
  column-gap: 50px;
}

#top_articles li {
  margin-bottom: 15px;
}

#top_articles .col a {
  font-weight: 400;
  font-size: 18px;
  color: var(--textColor);
}

#faq {
  flex-direction: column;
}

#support .quest, #support .reply {
  max-width: 600px;
  margin: 0 auto;
}

#support .quest {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: var(--background);
  font-size: var(--textSize);
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 25px;
  border: var(--border);
  }

.quest i {
  margin-left: 20px;
}

.quest:hover {

}

.quest:hover, .quest:hover i {

}

#support .reply {
  padding: 0 20px;
  height: 0;
  overflow: hidden;
  margin: 0 25px;
}

.reply.caption {
  padding: 0;
}

#contact .row {
  flex-direction: row;
  align-items: center
}

#contact .col {
  max-width: 500px;
  padding: 0 25px;
}

#contact .col li {
  list-style-type: none;
  padding: 8px 0;
  display: flex;
  align-items: center;
  line-height: 150%;
}

#contact .col li i {
  font-size: calc(var(--textSize) +3px);
  margin-right: 15px;
}

/*about page*/
#banner_about {
  background-image: url("https://static.tumblr.com/hohmoxg/Xq1pwwfp4/jessica-lewis-kt9e4gb-uqc-unsplash.jpg");
  background-position: 50% 40%;
}

#about_info {
  padding: 0px;
}

#about_info .left, #about_info .right {
  padding: 80px 50px;
  width: 50%;
  align-items: center;
  flex-direction: column;
}

#about_info .left {
  background: var(--background);
}

#about_info .right {
  background: var(--backgroundSecondary);
  justify-content: flex-start;
}

#about #painfo, #about #paskills {
  max-width: 500px;
}

#painfo, #paskills {
  width: 100%;
  margin: 20px;
}

#painfo {
  list-style-type: none;
  text-align: justify;
}

#painfo li {
  display: flex;
  align-items: center;
  margin: 15px 0;
}

#painfo li:not(:last-child) {
  padding-right: 20px;
  font-weight: 500;
}

#painfo b {
  position: relative;
  margin: 0 15px 0 0;
  line-height: 160%;
}

#paskills .bar {
  height: 5px;
  display: flex;
  margin: 35px 0;
  flex-direction: row-reverse;
  justify-content: space-between;
}

#paskills .track {
  width: 100%;
  background: var(--background);
}

#paskills .track span {
  display: block;
  background: var(--accent);
  height: 100%;
}

#paskills .track_label {
  padding: 0px 10px;
  margin: 0 0px 0 10px;
  color: var(--textColor);
  text-transform: lowercase;
  width: 150px;
  font-weight: bold;
  text-align: right;
  font-size: calc(var(--textSize) + 2px);
  align-self: center;
}

/*contact page*/
#banner_contact {
  background: url("https://static.tumblr.com/hohmoxg/tx5pwshpc/william-iven-ganqcr1brtu-unsplash.jpg");
  background-position: 50% 70%;
  background-size: cover;
}

/*navigation page*/
#banner_navigation {
  background-image: url("https://images.unsplash.com/photo-1534636724373-7e5e6fe0783b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80");
  background-position: 50% 85%;
}

/*terms page*/
#banner_terms {
    background-image: url("https://images.unsplash.com/photo-1504648492881-a5150829085c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80");
    background-position: 50% 35%;
}

#credits li a {
  box-shadow: inset 0 -1px var(--accent);
  color: var(--textLinks);
}

/*error page*/
#errorp {
  background: var(--background);
  height: 100vh;
  display: flex;
}

#error_wrapper {
  margin: auto;
  text-align: center;
  font-size: 25px;
  font-weight: 400;
  max-width: 700px;
  color: var(--text);
}
#error_wrapper i {
  font-size: 100px;
  background: var(--accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
#error_wrapper h2 {
  font-size: 55px;
  margin: 20px 0 0 0;
  text-align: center;
}


section#footer{
  padding: 50px 25px;
  position: fixed;
  bottom: 100px;
  left: var(--sideWidth);
  width: var(--mainWidth);
  background: var(--background);
  font-size: calc(var(--textSize) - 2px);
  z-index: 0;
}

#footer .row:first-of-type {
  border-bottom: var(--border);
  justify-content: space-between;
  padding: 0 50px 25px 50px;
}

#footer .row:last-of-type {
  justify-content: space-between;
  padding: 25px 50px 0 50px;
}

#footer ul li {
  display: inline-block;
  list-style-type: none;
  margin-right: 15px;
}

#footer ul a {
  font-weight: bold;
  color: var(--textColor);
}

#footer i {
  margin: 0 5px;
}

#footer #affiliates a {
  font-weight: 500;
}

/*PAGES NAVIGATION*/
input#sidebar_button {
  display: none;
}

#sidebar_controls {
  position: fixed;
  top: 0;
  left: 100px;
  background: var(--accentStatic);
  z-index: 9;
  cursor: pointer;
}

#sidebar_controls::before,
input#sidebar_button:checked ~ #sidebar_controls::before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-size: 21px;
  padding: 25px;
}

#sidebar_controls::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f0c9";
  color: var(--accentStaticWhite);
}

input#sidebar_button:checked ~ main, input#sidebar_button:checked ~ main #footer, input#sidebar_button:checked ~ main .page_banner  {
  margin-left: calc(var(--barWidth) + var(--asideWidth));
  width: calc(100vw - var(--sideWidth));
  left: 0;
}

input#sidebar_button:checked ~ main .page_banner {
  border-left: var(--border);
}

input#sidebar_button:checked ~ #sidebar_controls {
  left: calc(var(--sideWidth) - 71px);
  background: var(--backgroundSecondary);
}

input#sidebar_button:checked ~ #sidebar_controls::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f00d";
  color: var(--textColor);
}

/*mode button*/
.theme-switch {
  position: absolute;
  bottom: 0;
  left: 0px;
  z-index: 9;
  cursor: pointer;
}

#mode_input {
  display: none;
}

.theme-switch::before,
input#mode_input:checked ~ .theme-switch::before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-size: 21px;
  padding: 39.5px;
}

.theme-switch::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 500;
  content: "\f185";
  color: var(--accentStaticWhite);
}

input#mode_input:checked ~ .theme-switch::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 500;
  content: "\f186";
  color: var(--textStaticWhite);
}

/*HOVER*/
nav a:hover,
.post_header i:hover,
.ptags a:hover {
  background: rgba(255,255,255,0.1);
  color: var(--textSecondaryColor);
}

.ptags a:hover {
  color: var(--textSecondaryColor);
  cursor: pointer;
}

aside ul li a:hover {
  color: var(--textSecondaryColor);
}

#theme_tags li:hover {
  background: var(--background);
  pointer: cursor;
}

#theme_tags li:hover a {
  color: var(--accent);
}

/*TRANSITIONS*/
/*transitions*/
a, .custom_like_button,
#support .quest,
#faq,
#support .reply,
.topics,
#scrolltop,
#theme_tags li,
#banner_support,
#support,
#support #footer,
input#sidebar_button:checked ~ #sidebar_controls,
#sidebar_controls {
  -ms-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

/*SHADOWS*/
.quest,
.topics:hover,
#by_theme .search input,
#by_theme .fa-search,
#theme_tags li:hover,
#contact_page iframe {
  -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.12);
  -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.12);
  box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.12);
}

#footer {
  -webkit-box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.12);
  -moz-box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.12);
  box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.12);
}

/*MEDIA QUERIES*/
@media only screen and (max-width: 1100px) {
  aside, .pages aside {
    position: fixed;
    flex-direction: row;
    justify-content: unset;
    height: 50px;
    width: 100%;
    z-index: 8;
    top: 0;
    left: 0;
    padding: 0;
    background: var(--accent);
  }

  nav,
  #desc,
  #search_bar,
  aside ul,
  #suggested,
  #sidebar_controls {
    display: none;
  }

  main,
  footer,
  #banner,
  section#footer,
  .pages main,
  .page_banner,
  .pages section#footer {
    width: 100vw;
    margin-left: 0;
    left: 0;
  }

  #scrolltop {
    display: none;
  }

  #mobile_menu, #mobile_button {
    display: block;
  }

  #mobile_menu {
    height: 0px;
    display: block;
    overflow: hidden;
    padding: 0 0 0;
    list-style-type: none;
    position: fixed;
    min-width: 100%;
    top: 50px;
    background: var(--accent);
    z-index: 99;
    text-align: center;
    overflow-y: auto;
    transition: all 0.5s ease-out;
  }

  #mobile_menu li {
    padding: 10px 20px;
  }

  #mobile_menu li a {
    color: var(--accentText);
    font-size: calc(var(--textSize) + 10px);
    font-weight: bold;
  }

  #tumblr_controls {
    display: block;
    position: fixed;
    top: 0px;
    right: 0;
    padding: 10px 20px;
    font-size: 22px;
    background: ;
    color: ;
    visibility: visible;
    height: 50px;
    z-index: 9;
  }

  #tumblr_controls i {
    color: var(--accentText);
  }

  label#tumblr_controls:hover,
  input#mobile_button:checked ~ label {
    cursor: pointer;
    background: ;
  }

  input#mobile_button:checked ~ ul#mobile_menu {
    height: 100%;
    transition: all 0.5s ease-in;
    padding: 35px 0 0 0;
  }

  .tmblr-iframe-compact .tmblr-iframe--unified-controls {
    top: 55px;
  }
}

#nnspc {
  display: none;
}

@media only screen and (max-width: 800px) {
  #nnspc {
    display: block;
  }

   .post {
     flex-direction: column;
   }

   .post_body {
     padding-right: 0;
   }

   .post_footer {
     border-left: none;
     border-top: var(--border);
     padding: 25px 0;
     width: 100%;
   }

   .blck_bttn {
     display: none;
   }

   #about_info {
     flex-direction: column;
     padding: 0;
   }

   #about_info .left, #about_info .right {
     width: 100%;
     padding: 0 50px;
   }

   #ask_form {
     width: 100%;
     margin-top: 25px;
   }

   #top_articles {
     text-align: center;
   }

   #contact .flex {
     flex-direction: column;
   }

   #theme_tags {

   }

   section#footer .flex {
     flex-direction: column;
     padding: 0 25px;
   }

   section#footer .flex > * {
     margin-bottom: 25px;
   }

   #affiliates {
     display: none;
   }
}