/* Markdown */
:root{
--maincolor: red;
--bordercl:rebeccapurple;
--callouctcolor:dodgerblue;
--hovercolor: #64AAD9;
--darkMaincolor: #50fa7b;
}
html {
  color: #232333;
  font-family: 'Posterama Text Light', sans-serif;
  font-size: 18px;
  line-height: 1.6em;
}
body{
  display: block;
  margin: 8px;
}
* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

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

p {
  font-family: 'Posterama Text Light', sans-serif;
  line-height: 1.5;
}

hr {
  border: 0;
  border-top: 3px dotted var(--bordercl);
  margin: 1em 0;
}

blockquote {
  border-left: 3px solid var(--bordercl);
  color: #737373;
  margin: 0;
  padding-left: 1em;
}



a {
  color: inherit;
  text-decoration: none;
}


.selected_menu {
  border-bottom: 3px solid #FEDE17;
}

h1 a {
  color: inherit;
  text-decoration: none;
  border-bottom: 3px solid #FEDE17;
}

h2 a {
  color: inherit;
  text-decoration: none;
  border-bottom: 3px solid #FEDE17;
}

article .body img {
	display: block;
    margin: 0 auto;

} 

.title_fp {
  border-bottom: 0px solid #1727fe;
}

.title_fp a {
  border-bottom: 0px solid #1727fe;
}


article .title h1 {
	font-size: 2em;
	padding: 0px;
	margin: 0px;
}

.content .page-title {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	padding-bottom: 0;
  margin-bottom: 0;
  font-weight: 400;
  font-family: 'Posterama 1927', sans-serif;
}

.email_form {
	border-width: 2px;
	border-color: black;
	padding-top: 2em;
	margin-left: auto;
	margin-right: auto;
	text-align:center;
}

.email_form table {
	padding-top: 1em;
	margin-left: auto;
	margin-right: auto;
}

.list-post-title {
    display: flex;
	justify-content: space-between;
	margin: 0;
	padding-top: 2em;
}

.list-post-title h2 {
	padding: 0px;
	margin: 0px;
}

.project-list {
	padding-top: 0em;
  display: flex;
	flex-wrap: wrap;
  align-items: center;
	justify-content: center;
	padding-bottom: 3em;
}

.project-list .project-item {
  width: 10em;
  height: 12em;
  object-fit: cover;
  margin-right: 0.8em;
  margin-left: 0.8em;
	text-align:center;
  padding-bottom: 2em;
}

.project-list .project-item img {
  object-fit: cover;
  width: 9em;
  height: 7em;
} 

a:hover {
    background-color: var(--hovercolor);
    color: #fff;
}

ul {
  list-style: none;
  padding-left: 2ch;
}

ul li {
  text-indent: -2ch;
}

ul li::before {
  content: 'x ';
  font-weight: bold;
}

/* Images */
img {
  border: 3px solid #ececec;
  max-width: 100%;
}

figure {
  box-sizing: border-box;
  display: inline-block;
  margin: 0;
  max-width: 100%;
}

figure img {
  max-height: 500px;
}

@media screen and (min-width: 600px) {
  figure {
    padding: 0 40px;
  }
}

figure h4 {
  font-size: 1rem;
  margin: 0;
  margin-bottom: 1em;
}
figure h4::before {
  content: '↳ ';
}

/* Code blocks */
code {
  background-color: #f1f1f1;
  padding: .1em .2em;
}

.highlight-gallery {
	padding-top: 1em;
    display: flex;
	flex-wrap: wrap;
    align-items: flex-start;
	padding-left: 2em;
}

.highlight-gallery img {
  width: 5em;
  height: 5em;
    object-fit: cover;
}

pre {
  background-color: #ececec;
  line-height: 1.4;
  overflow-x: auto;
  padding: 1em;
}

.highlight pre ::selection {
  background: rgba(255, 255, 255, 0.2);
  color: inherit;
}

.list-triangle {
	border:0;
	padding-right: 0.2em;
}

.highlight-list {
	padding-top: 0.5em;
	margin-top: 0em;
	display: block;
	margin-left: 2em;
}


pre code {
  background-color: transparent;
  color: inherit;
  font-size: 100%;
  padding: 0;
}

/* Containers */
.content {
  margin-bottom: 4em;
  margin-left: auto;
  margin-right: auto;
  max-width: 800px;
  padding: 0 1ch;
  word-wrap: break-word;
}

/* Header */
header {
  /* display: flex; 
  flex-wrap: wrap;
  justify-content: space-between; */
  margin: 1em 0;
}

header .main {
  /*width: 100em;*/
  line-height: 2.8rem;
  width: 100%;
  font-size: 3.0rem;
  font-family: 'Posterama 1927', sans-serif;
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
  margin-bottom: 20px;
  text-align: center;
}

header .mainnav {
	display: flex;
	width: 100%;
	height: 1em;
	margin-left: auto;
	margin-right: auto;
	justify-content: center;
	font-size: 1rem;
	text-align:center;
	margin-bottom: 2.5em;
}

header .mainnav a {
	display: inline-block;
	margin-left: 10px;
	margin-right:10px;
	font-weight: 200;
	font-family: 'Posterama 1927';
}

header .feature {
	display: block;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	max-width: 350px;
}

header .feature img {
	float: left;
	width: 80px;
	height: 90px;
}

header .feature p {
	margin-left: auto;
	text-align:right;
	font-size: 0.75rem;
	margin-left: 25px;
}

h1, h2, h3, h4, h5, h6 {
  font-size: 1.4rem;
  margin-top: 2em;
  line-height: 2.0rem;
}




/*
.core-archive {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-gap: 1em;
  width: 800px;
}

.core-archive article {
	display:block;
  padding: 1em;
  background: #fff;
  width: 100px;
  height: 100px;
  border: 3px;
  box-shadow:
    0 5px 10px rgba(0, 0, 0, 0.1),
    0 20px 20px rgba(0, 0, 0, 0.05);
}
*/

/*
h1::before { color: var(--maincolor); content: '# '; }
h2::before { color: var(--maincolor); content: '## '; }
h3::before { color: var(--maincolor); content: '### '; }
h4::before { color: var(--maincolor); content: '#### '; }
h5::before { color: var(--maincolor); content: '##### '; }
h6::before { color: var(--maincolor); content: '###### '; }
*/

/* Footer */
footer {
  margin-top: 1em;
}

/* Common */
.title h1 {
  margin-bottom: 0;
}

time {
  color: grey;
  min-width: 40pt;
  display: block;
  margin-left: 0.5em; 
  margin-right: 0;
}

.post_list_image {
    float:right; 
    width:300px; 
    padding-left: 20px; 
    border: 0px;
}


@media (max-width:560px)  {
  .post_list_image {
    float: none;
    padding-left: 0px; 
    margin-left: auto; 
    margin-right: auto; 
    text-align: center;
    width: 100%;
  }

  }


/* Pprojects */
article .project-title {
  padding-top: 0.0em;
  padding-bottom: 0.5em;
  margin-bottom: 0em;
  display: flex;
  justify-content: space-between;
}

/* Posts */
article .title {
    padding-top: 4em;
	  padding-bottom: 1em;
    margin-bottom: 1em;
    display: flex;
	  justify-content: space-between;
}


/* Callout */
.callout {
  background-color: var(--callouctcolor);
  color: #fff;
  padding: 1em;
}

.callout p {
  font-family: 'Posterama Text Thin', monospace;
  margin: 0;
}

.callout a {
  border-bottom: 3px solid #fff;
}

.callout a:hover {
  background-color: #fff;
  color: var(--callouctcolor);
}

.site-description {
display: flex;
justify-content: space-between;
}
.tags li::before{
  content: "🏷 ";
}
.tags a{
  border-bottom: 3px solid var(--maincolor); 
}
.tags a:hover{
  color:white;
  background-color: var(--hovercolor); 
}
svg{
  max-height: 15px;
}
.soc:hover{
  color: white;
}
.draft-label{ 
    color: var(--bordercl);
    text-decoration: none;
    padding: 2px 4px;
    border-radius: 4px;
    margin-left: 6px;
    background-color: #f9f2f4;
}
.highlight {
  position: relative;
  -webkit-overflow-scrolling: touch;
}
.highlight pre code[class*="language-"] {
  -webkit-overflow-scrolling: touch;
}
.highlight pre code[class*="language-"]::before {
  background: black;
  border-radius: 0 0 0.25rem 0.25rem;
  color: white;
  font-size: 12px;
  letter-spacing: 0.025rem;
  padding: 0.1rem 0.5rem;
  position: absolute;
  right: 1rem;
  text-align: right;
  text-transform: uppercase;
  top: 0;
}

.highlight pre code[class=language-javaScript]::before,
.highlight pre code[class="language-js"]::before {
content: "js";
background: #f7df1e;
color: black;
}
.highlight pre code[class*='language-yml']::before,
.highlight pre code[class*='language-yaml']::before {
content: 'yaml';
background: #f71e6a;
color: white;
}
.highlight pre code[class*='language-shell']::before,
.highlight pre code[class*='language-bash']::before,
.highlight pre code[class*='language-sh']::before {
content: 'shell';
background: green;
color:white
}
.highlight pre code[class*='language-json']::before{
content: 'json';
background: dodgerblue;
 color: #000000 
}
.highlight pre code[class*='language-python']::before,
.highlight pre code[class*='language-py']::before {
content: 'py';
background: blue;
color: yellow ;
}
.highlight pre code[class*='language-css']::before{
content: 'css';
background: cyan;
color: black ;
}
.highlight pre code[class*='language-go']::before{
content: 'Go';
background: cyan;
color: royalblue ;
}
.highlight pre code[class*='language-md']::before,
.highlight pre code[class*='language-md']::before{
content: 'Markdown';
background: royalblue;
color: whitesmoke ;
}

.social-share {
	position: relative;
	top: -0.5em;
}
 
.social-share ul {
	margin: 0;
}
 
.social-share ul li p {
	display: none;
}
 
.social-share .share-icons li {
	padding: 0 !important;
	padding-bottom: 10px !important;
}
 
.social-share .share-btn {
	padding: 0.25em;
	width: 3em;
}
 
.social-share-nav .share-btn h3{
	color: #ffffff;
}

ul.share-icons {
	cursor: default;
	list-style: none;
	padding-left: 0;
	margin-top: 1em;
}

ul.share-icons li {
	display: inline-block;
	padding: 0 1em 0 0;
}

ul.share-icons li:last-child {
	padding-right: 0;
}

ul.share-icons li > * {
	text-decoration: none;
	border: 0;
}

ul.share-icons li > *:before {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	text-transform: none !important;
}

ul.share-icons li > * .label {
	display: none;
}
 
.share-btn {
	display: inline-block;
	color: #ffffff;
	border: none;
	border-radius: 4px;
	box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
	outline: none;
	text-align: center;
	text-decoration: none;
}
 
.share-btn:hover {
	color: #ffffff !important;
}

.share-btn:active {
	position: relative;
	top: 2px;
	box-shadow: none;
	color: #e2e2e2;
	outline: none;
}
.share-btn .widget-social__link-icon {
	margin: 0;
}
 
.share-btn.twitter     { background: #55acee; }
.share-btn.google-plus { background: #dd4b39; }
.share-btn.facebook    { background: #3B5998; }
.share-btn.linkedin    { background: #4875B4; }
.share-btn.stumbleupon { background: #EB4823; }
.share-btn.pinterest   { background: #BD081C; }
.share-btn.reddit      { background: #ff5700; }
.share-btn.email       { background: #444444; }
.share-btn.whatsapp    { background: #25d366; }


.share-btn.twitter:hover     { background: #4c9ad6; }
.share-btn.google-plus:hover { background: #c64333; }
.share-btn.facebook:hover    { background: #2f4779; }
.share-btn.linkedin:hover    { background: #4069a2; }
.share-btn.stumbleupon:hover { background: #d3401f; }
.share-btn.pinterest:hover   { background: #AD0000; }
.share-btn.reddit:hover      { background: #e54e00; }
.share-btn.email:hover       { background: #363636; }