/* ------------ theme's variables */

:root {
/*   colors   */

--backgroundThemeColor: #fcfcfc;
--headingTitleColor: #313131;
--sidebarTitleColor: #313131;
--bodyTextColor: #313131;
--bodyLinkColor: #8a8b8c;
--bodyLinkHoverColor: #cccccc;
--boldColor: #313131;
--italicColor: #61626b;
--likedTextColor: #dca734;
--scrollbarColor: #858586;
--bordersColor: #ededed;
--postsBackgroundColor: #ffffff;
--tumblrControlsIconColor: #898989;


/*   fonts, sizes, styles   */

--bodyFont: Sarabun;

--headingFontSize: 16px;
--sidebarTitleFontSize: 12px;
--bodyFontSize: 12px;
--sidebarLinksFontSize: 12px;
--descriptionFontSize: ;
--dateFontSize: 11px;
--tagsFontSize: 11px;

--boldFontWeight: bold;
--headingFontWeight: bold;
--sidebarTitleFontWeight: bold;
--sidebarLinksFontWeight: normal;
--descriptionFontWeight: normal;
--dateFontWeight: bold;
--tagsFontWeight: normal;

--headingTextTransform: none;
--sidebarTitleTextTransform: lowercase;
--sidebarLinksTextTransform: none;
--descriptionTextTransform: none;
--dateTextTransform: lowercase;
--tagsTextTransform: none;

--headingFontStyle: normal;
--sidebarTitleFontStyle: normal;
--sidebarLinksFontStyle: normal;
--descriptionFontStyle: normal;
--tagsFontStyle: normal;
--dateFontStyle: normal;

--postsTextPosition: left;
--headingTextPosition: left;
--sidebarTitlePosition: left;
--sidebarLinksPosition: left;
--descriptionTextPosition: left;
--tagsTextPosition: left;




/*   other styles   */

--bordersStyle: solid;
--bordersSize: 1px;
--updateToggleHeight: ;
--postsSize: ;
--boxShadowSize:0px 4px 8px;
--boxShadowColor:0, 0, 0, 0.1;
--transitions: all 0.3s ease-in-out;


}







/* ------------ tumblr controls */


iframe.tmblr-iframe {
z-index:99999999999999!important;
top: 15px!important;
right: 15px!important;
opacity:0;
padding-right:38px;
-webkit-transform:scale(0.75);
-ms-transform:scale(0.75);
transform:scale(0.75);
-webkit-transform-origin:100% 0;
-ms-transform-origin:100% 0;
transform-origin:100% 0;
-webkit-transition: var(--transitions);
-o-transition: var(--transitions);
transition: var(--transitions);
cursor: pointer;
}

iframe.tmblr-iframe:hover {
opacity:1!important;
-webkit-transition: var(--transitions);
-o-transition: var(--transitions);
transition: var(--transitions);
}

.hcontrols {
position:fixed;
top:23px;
right:15px;
z-index:999999999;
cursor: pointer;
}

.hcontrols .feather {
width:25px;
height:25px;
stroke-width: 2;
stroke:var(--tumblrControlsIconColor);
-webkit-transition: var(--transitions);
-o-transition: var(--transitions);
transition: var(--transitions);
cursor: pointer;
}

.hcontrols .feather:hover {
stroke: var(--bodyLinkHoverColor);
}







/* ------------ scrollbar */

::-webkit-scrollbar {
   width:7px;
   height:7px;
}
::-webkit-scrollbar {
   background-color:var(--backgroundThemeColor);
}
::-webkit-scrollbar-track {
   border:8px solid var(--backgroundThemeColor);
   background-color:var(--backgroundThemeColor);
}
::-webkit-scrollbar-thumb {
   border:2.1px solid var(--backgroundThemeColor);
   background-color:var(--scrollbarColor);
   border-radius:10px;
   min-height:24px;
   min-width:24px;
}


/* ------------ theme settings */

html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

*::after,
*::before {
  box-sizing: inherit;
}


html,
body {
  height: 100vh;
}


body {
padding: 0;
margin: 0;
font-family: var(--bodyFont), Arial, sans-serif;
font-size:var(--bodyFontSize);
line-height:1.5;
background-color:var(--backgroundThemeColor);
color:var(--bodyTextColor);
word-wrap:break-word;
background-image:url('https://assets.tumblr.com/images/x.gif?v=1');
background-repeat: repeat;
background-attachment: fixed;
background-position:center;
}

a {
position:relative;
color: var(--bodyLinkColor);
text-decoration: none;
-webkit-transition: var(--transitions);
-o-transition: var(--transitions);
transition: var(--transitions);
}

a:hover {
color:var(--bodyLinkHoverColor);
-webkit-transition: var(--transitions);
-o-transition: var(--transitions);
transition: var(--transitions);
}

a:last-child {
margin-right:0px;
}

h1, h2 {
margin:15px 0 5px;
display:block;
font-style:var(--headingFontStyle);
font-weight:var(--headingFontWeight);
text-transform:var(--headingTextTransform);
color:var(--headingTitleColor);
font-size:var(--headingFontSize);
text-align:var(--headingTextPosition);
}


h2 a {
color:var(--headingTitleColor);
 
}


p {
display: block;
margin-block-start: 0.1em;
margin-block-end: 0.5em;
word-wrap:wrap;
}

hr {
width:100px;
margin:10px 0 10px 0;
border-width: var(--bordersSize) 0px 0px 0px;
border-style: var(--bordersStyle);
border-color: var(--bordersColor);
}

small, sup, sub {
font-size:var(--bodyFontSize);
}

pre, code {
line-height:inherit!important;
background:transparent;
font-family:inherit!Important;
font-size:inherit!important;
white-space:pre-wrap;
white-space:-moz-pre-wrap;
white-space:-pre-wrap;
white-space:-o-pre-wrap;
word-wrap:break-word;
}

bold, b, strong {
color:var(--boldColor);
font-weight:var(--boldFontWeight);
}

italic, i, em {
color:var(--italicColor);
}

img {

border:0;
max-width:100%;
height:auto;
display:block;
margin: 0;
padding: 0;

-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
   
img:hover {
opacity:1;
-webkit-filter: grayscale(0%);
-webkit-transition: var(--transitions);
-o-transition: var(--transitions);
transition: var(--transitions);
}
 
.posts:hover img {
-webkit-filter: grayscale(0%);
opacity:1;
 }

::-moz-selection {
background-color: var(--boldColor);
color:#fff;
}

::selection {
background-color: var(--boldColor);
color:#fff;
}



/* ------------ lists */

ul {
margin:15px 0;
list-style:none; 
}

ul li {
margin:5px 15px;
list-style:none;
}


ul li::before {
content: '\e09a';
font-family:'saturnicons';
font-size:calc(var(--bodyFontSize) - 50%);
bottom:0.5px;
margin-right:7px;
display:inline-block;
vertical-align:middle;
position:relative;
color: var(--bodyLinkColor);
}

ul li:hover:before {
color:var(--bodyLinkHoverColor);
}

ol {
margin:15px;
}

ol li {
margin:5px 15px;
list-style-type: decimal;
}



/* ------------ tooltips */

#s-m-t-tooltip {
max-width:300px;
border-radius: 0px;
padding:10px;
font-weight:var(--boldFontWeight);
margin:20px -25px;
color:var(--boldColor);
background-color:var(--postsBackgroundColor);
outline:var(--bordersSize) var(--bordersStyle) var(--bordersColor);

-webkit-box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));
box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));

z-index:99999;
}


/* ------------ custom borders */

.sidebar-title-border { /*   sidebar title border   */
border-bottom: var(--bordersSize) var(--bordersStyle) var(--bordersColor);
width:60px;
margin:5px auto;
float:var(--sidebarTitlePosition);
}



/* ------------ custom icons */

.feather {
stroke-width: 1.75;
width:var(--bodyFontSize);
height:var(--bodyFontSize);
}


/* ------------ sidebar */

.title {
font-weight:var(--sidebarTitleFontWeight);
font-size:var(--sidebarTitleFontSize);
color:var(--sidebarTitleColor);
text-transform:var(--sidebarTitleTextTransform);
text-align:var(--sidebarTitlePosition);
font-style:var(--sidebarTitleFontStyle);
}


.sidebar {

order:2;
margin-left: 110px;

  display: flex;
  align-content: center;
  align-items:center;
flex: 1;
height:calc(100vh - 200px);

}


/*   content inside the sidebar   */

.sidebar-content {
width:268px;
padding:15px;
position:fixed;
background-color:var(--postsBackgroundColor);


-webkit-box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));
box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));

}

.sidebar-image {
text-align:center;
max-width:268px;
margin:15px 0;
}

.sidebar-image img {
object-fit: cover;

}

.sidebar-image:hover {
-webkit-filter: grayscale(0%);
}


/* navigation */

.navigation {
margin:0 0 5px;

position:relative;
}

.navigation a {
color: var(--bodyLinkColor);
display:inline-block;
position:relative;
font-size: var(--sidebarLinksFontSize);
font-weight: var(--sidebarLinksFontWeight);
font-style: var(--sidebarLinksFontStyle);
text-transform:var(--sidebarLinksTextTransform);
}

.navigation a:hover, .navigation .feather:hover {
color: var(--bodyLinkHoverColor);
stroke: var(--bodyLinkHoverColor);
-webkit-transition: var(--transitions);
-o-transition: var(--transitions);
transition: var(--transitions);
}

.navigation a:last-child {
margin-right:0px;
}

.navigation ul {
text-align:var(--sidebarLinksPosition);
margin-bottom: 5px;
margin: 0;
}

.navigation ul li {
list-style-type:none;
display:inline-block;
margin: 0px 5px 0 0;

margin: 0px 15px 0 0;

}

.navigation ul li::first-child {
margin-left:0;
}

.navigation ul li::before {
content: '';
width: 0px;
height: 0px;
margin:0px;
background-color: none;
}

.navigation ul li .feather {
width: var(--sidebarLinksFontSize);
height: var(--sidebarLinksFontSize);
stroke: var(--bodyLinkColor);
}


/* description */

.description {
margin:15px 0;
font-size:var(--descriptionFontSize);
font-style:var(--descriptionFontStyle);
font-weight:var(--descriptionFontWeight);
text-align:var(--descriptionTextPosition);
color:var(--bodyTextColor);
text-transform:var(--descriptionTextTransform);
}

.description a {
color:var(--bodyLinkColor);
}

.description a:hover {
color: var(--bodyLinkHoverColor);
}


/* search bar */

form {
text-align:left;
}

.search .query {
width:100%;
font-weight:var(--boldFontWeight);
text-align:var(--sidebarTitlePosition);
font-size:var(--bodyFontSize);
color:var(--boldColor);
font-family: var(--bodyFont), Arial, sans-serif;
border: 0;
outline: 0;
background-color:var(--postsBackgroundColor);
}
 .query::placeholder {
color:var(--boldColor);
 }


input:focus::-webkit-input-placeholder {color: transparent; }
input:focus:-moz-placeholder {color: transparent;}
input:focus::-moz-placeholder {color: transparent;}
input:focus:-ms-input-placeholder { color: transparent;}



/* pagination */

.pagination {
text-align:var(--descriptionTextPosition);
}

.pagination a {
color:var(--boldColor);
font-weight:var(--boldFontWeight);
}

.pagination a:hover {
color: var(--bodyLinkHoverColor);
}

.pagination a::after {
content:none;
}



/* ------------ posts */


/* wrapping sidebar and posts */

.container {
width:90vw;
max-width: 1000px;

  display: flex;
  align-content: center;
  align-items: flex-start;
margin:50px auto;
}


/* wrapping only the posts */

.posts-container {

order:1;

flex: 1;
background:var(--backgroundThemeColor);
}


/* posts */

.posts {

    width:541px;



margin:100px auto;
padding:15px;
word-wrap:wrap;
text-align:var(--postsTextPosition);
background:var(--postsBackgroundColor);


-webkit-box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));
box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));

}

.posts b, strong {
font-weight:var(--boldFontWeight);
}

.posts img {

    max-width:100%;



}


.posts:last-child {
margin-bottom:0px;
}

.posts:first-child {
margin-top:0px;
}


.photo, .photoset {
}


/* photosets */

[photoset-layout] {
display: grid;
grid-template-columns: repeat(6, 1fr);

grid-gap: 4.9px;



}


[photoset-layout] img {
display: block;
height: 100%;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
}

.photoset-grid {

    width:541px;



}

.photoset-grid div {
  cursor: pointer;
}


/* neue post format (npf)
images on posts as photosets
*/

.post-content 
div.npf_row, 
.post 
div.npf_row, 
body 
div.npf_row  {
max-width:100%;
margin:5px auto;
}

body p+div.npf_row {
max-width:100%;
margin-top: 5px;
margin-bottom:5px;
}



/* ------------ captions & blockquote */


/* tumblr's dashboad captions style */







/* old captions style */


.tumblr_blog {
display:inline-block;
line-height:15px;
margin-right:2px;
text-transform:lowercase;
font-family: var(--bodyFont), Arial, sans-serif;
font-size:var(--bodyFontSize);
color:var(--bodyLinkColor);
}

 
.tumblr_blog a {
color:var(--bodyLinkColor);
vertical-align:bottom;
}
   
.tumblr_blog a:hover {
text-decoration:none;
color:var(--bodyLinkHoverColor);
}



/* custom captions */


.user .feather {
width:var(--bodyFontSize);
height:var(--bodyFontSize);
margin-right: 5px;
position: relative;
top: 2px;
}




.reblog-header {
padding:0 15px;
margin:15px auto -10px;
font-weight:var(--boldFontWeight);

}


.reblog-header a::after {
content:none;
}

.reblog-list {
outline:0px solid #000;
}

.reblog-content, .caption, figcaption {
padding: 3px 15px;
margin:10px auto 6px;
color:var(--bodyTextColor);
}


.reblog-content a {
color:var(--bodyLinkColor);
}

figcaption a {
color:var(--bodyLinkColor);
}

.reblog-content a:hover {
color:var(--bodyLinkHoverColor);
}

figcaption a:hover {
color:var(--bodyLinkHoverColor);
}

blockquote { 
border-left:1px solid var(--bordersColor);
padding-left: 10px;
margin: 10px 10px;
}

figure {
display:inline-block;
}


/* ------------ date */

.date {
display:flex;
justify-content:space-between;
align-items:center;
font-size:var(--dateFontSize);
border-top: 1px solid var(--bordersColor);
padding: 10px 15px 0;
margin-top: 10px;
}

.date a:last-child {
margin-right:0px;
}

.date .feather {
width: var(--dateFontSize);
height: var(--dateFontSize);
stroke: var(--bodyLinkColor);
}

.date .feather:hover {
color: var(--bodyLinkHoverColor);
stroke: var(--bodyLinkHoverColor);
-webkit-transition: var(--transitions);
-o-transition: var(--transitions);
transition: var(--transitions);
}

.date-link {
text-transform: var(--dateTextTransform);
font-style:var(--dateFontStyle);
}

.date-link-bold {
font-weight:var(--dateFontWeight);
text-transform: var(--dateTextTransform);
color:var(--boldColor);
-webkit-transition: var(--transitions);
-o-transition: var(--transitions);
transition: var(--transitions);
}

.date-link-bold:hover {
color:var(--bodyLinkHoverColor);
-webkit-transition: var(--transitions);
-o-transition: var(--transitions);
transition: var(--transitions);
}

.date-link span:hover {
color:var(--bodyLinkHoverColor);
-webkit-transition: var(--transitions);
-o-transition: var(--transitions);
transition: var(--transitions);
}


.date a {
color:var(--bodyLinkColor);
}

.date a:hover {
color:var(--bodyLinkHoverColor);
-webkit-transition: var(--transitions);
-o-transition: var(--transitions);
transition: var(--transitions);
}

.time-ago {
font-weight:var(--dateFontWeight);
color:var(--boldColor);
-webkit-transition: var(--transitions);
-o-transition: var(--transitions);
transition: var(--transitions);
}


/*   like text   */

.like-b {
position:relative;
display:inline-block;
height:1em;
line-height:1.5em;
padding: 0 1px;
/*overflow:hidden;*/
/*margin-bottom:-3px;*/
}

.like-b .like_button iframe {
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
z-index:2;
opacity:0;
}

.like-b .liked + .b {
color: var(--likedTextColor);
stroke: var(--likedTextColor);
font-weight:var(--boldFontWeight);
}





/* ------------ tags */

.tags {
text-align:var(--tagsTextPosition);
text-transform: var(--tagsTextTransform);
font-style:var(--tagsFontStyle);
color:var(--bodyTextColor);
font-size:var(--tagsFontSize);
word-wrap:break-word;
padding:0 15px 0;
margin: 10px 0 5px;

}

.tags a::before {
content:'\e24c';
font-family:'saturnicons';
font-style:none!important;
display:inline-block;
vertical-align:middle;
margin-right:5px;
font-weight:400;
color:var(--bodyLinkColor);
}

.tags a:hover::before {
color:var(--bodyLinkHoverColor);
-webkit-transition: var(--transitions);
-o-transition: var(--transitions);
transition: var(--transitions);
}

.tags a {
font-weight:var(--tagsFontWeight);
color:var(--bodyTextColor);
margin-right:10px;
}

.tags a:last-child{
margin-right:0px;
}

.tags a:first-child {
margin-left:0px;
}


.tags a:hover {
color:var(--bodyLinkHoverColor);
}




/* ------------ quote / source */

.quote {
font-size:var(--headingFontSize);
text-transform:var(--headingTextTransform);
color:var(--headingTitleColor);
font-weight:var(--headingFontWeight);
text-align:var(--headingTextPosition);
font-style:var(--headingFontStyle);
}

.quote-source {
}

.quote-source::before {
content: '';
width: 15px;
height: 1px;
margin-right:10px;
display:inline-block;
vertical-align:middle;
position:relative;
background-color: var(--bordersColor);
}


/* ------------ links */

.link-image img {
object-fit: cover;
}


.link {
font-weight:var(--headingFontWeight);
text-transform:var(--headingTextTransform);
font-size:var(--headingFontSize);
text-align:var(--headingTextPosition);
font-style:var(--headingFontStyle);
outline:0px solid var(--bordersColor);
}


/* ------------ chat posts */

p.npf_chat {
font-size:var(--bodyFontSize);
font-family: var(--bodyFont), Arial, sans-serif;
list-style:none;
}


.label {
font-weight:var(--boldFontWeight);
color:var(--boldColor);
}

.line {
padding: 0px 0px 5px;
margin: 0px 0px 5px;
}


/* ------------ video */

.video {

    max-width:540px;



}


/* ------------ audio */

div.audio-player {
   background: var(--PostsBackgroundColor);
color:var(--headingTitleColor);

}

.audio_playbutton {
margin: 0 auto;
  width: 33px;
  height:50px;
  overflow: hidden;
   background: var(--PostsBackgroundColor);
   opacity: .5;
}

.audio_playbox {
  height:50px;
padding:15px;
  margin-bottom:5px;
   background: var(--postsBackgroundColor);
outline:var(--bordersSize) var(--bordersStyle) var(--bordersColor);
}

.audio_trackinfo {
display: flex;
align-items: center;
justify-content:center;
flex-direction: column;
line-height:17px;
padding:15px;
  margin-bottom: 10px;
   background: var(--postsBackgroundColor);
  color: var(--bodyTextColor);
outline:var(--bordersSize) var(--bordersStyle) var(--bordersColor);
}

.audio_trackname {
font-weight:var(--headingFontWeight);
text-transform:var(--headingTextTransform);
font-size:var(--headingFontSize);
color:var(--headingTitleColor);
font-style:var(--headingFontStyle);
}


.audio_artist, .audio_album {
font-family: var(--bodyFont), Arial, sans-serif;
font-size:var(--bodyFontSize);
color:var(--bodyTextColor);
}


/* ------------ asks */

.ask {
border-bottom:var(--bordersSize) var(--bordersStyle) var(--bordersColor);
padding:0 0 10px;
margin: 0px 15px 20px;
}

.clearfix::before, .clearfix::after{
content:'';
clear:both;
display:table;
}

.ask-user {
color:var(--bodyLinkColor);
font-weight:var(--boldFontWeight);
text-transform:lowercase;
}


.ask-user a {
color:var(--bodyLinkColor);
font-weight:var(--boldFontWeight);
}

.ask-user a:hover {
color:var(--bodyLinkHoverColor);
}


.ask-question {
position: relative;
top: -2px;
}

.ask-question p {
margin: 0 0 5px;
}

.ask .feather {
float: left;
margin: 2px 10px 0 0;
stroke:var(--bodyLinkColor);
}

.ask-answer.reblog-content::after {
content: '';
height: 0px;
}


/* ------------ postnotes */

.post-notes {

    width:540px;



list-style-type: none;
font-family: var(--bodyFont), Arial, sans-serif;
font-size:var(--bodyFontSize);
color:var(--bodyTextColor);
background-color:var(--postsBackgroundColor);
}

.post-notes ol li {
list-style-type: none;
}

.post-notes ol li::before {
content: '\e09a';
font-family:'saturnicons';
font-size:calc(var(--bodyFontSize) - 50%);
bottom:0.5px;
margin-right:7px;
display:inline-block;
vertical-align:middle;
position:relative;
color: var(--bodyLinkColor);
}

.post-notes ol li:hover:before {
color:var(--bodyLinkHoverColor);
}

.post-notes ol li .more_notes_link a::before {
content: '';

}


ol.notes {
list-style:none;
color:var(--bodyTextColor);
}

ol.notes img { 
display: none;
}



/*     DO NOT REMOVE     */

.mcredito {
position:fixed;
right:5px;
bottom:18px;
padding:5px;
background: var(--postsBackgroundColor);
outline:var(--bordersSize) var(--bordersStyle) var(--bordersColor);

-webkit-box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));
box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));

}

.mcredito a {
font-weight:var(--boldFontWeight);
text-transform:lowercase;
text-align:center;
color:var(--boldColor);
padding:3px;
padding:3px;
}
