@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');

body {
  color: white;
  background-color: #282828;
}

::-moz-selection {
  background: blue;
  color: #fff;
  text-shadow: none;
}

::selection {
  background: red;
  color: #fff;
  text-shadow: none;
}

hr {
  border-top: 3px dotted blue;
}
code {
  background-color: lightblue;
  color: black;
  text-decoration: bold;
  padding: 0.1em 0.2em;
}
pre {
  background-color: #272822;
  line-height: 1.4;
  overflow-x: auto;
  padding: 1em;
}
blockquote {
  border-color: blue;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #ddd;
}
h1::before {
  color: var(--darkMaincolor);
  content: "# ";
}
h2::before {
  color: var(--darkMaincolor);
  content: "## ";
}
h3::before {
  color: var(--darkMaincolor);
  content: "### ";
}
h4::before {
  color: var(--darkMaincolor);
  content: "- ";
}
h5::before {
  color: var(--darkMaincolor);
  content: "##### ";
}
h6::before {
  color: var(--darkMaincolor);
  content: "###### ";
}
h4.title {
  margin: 1px;
}
.toc {
  background-color: #272822;
  color: white;
}

.subtitle::before, .titlebar::before {
    content: none;
}

h1.titlebar{
    font-size: 30pt;
    margin-top: 40px;
    text-align: center;
}

h3.subtitle {
    font-size: 10pt;
    margin-top: 10px;
    text-align: center;
}

.logo {
  width: 20%;
  height: auto;
  filter: drop-shadow(2px 2px 4px rgba(255, 255, 255, 0.5));
}

.titlebar {
    color: #fabd2f;
}

.subtitle {
    color: #d2869b;
}

ul.socials {
    text-align: center;
    padding-top: 1em;
    padding-bottom: 1em;
    margin-left: auto;
    margin-right: auto;
}

ul.socials li{
    display: inline;
    list-stye-type: none;
}

ul.socials img {
	width: 30px;
	height: 30px;
	margin: 0px;
	border: 0px;
	display: inline;
	vertical-align: middle;
	padding-right: 0.3em;
}

.socials img, .socials a {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.socials img:hover, .socials a:hover {
	-webkit-filter: grayscale(0);
	filter: grayscale(0);
	background-color: transparent;
	text-decoration: none;
}

.footermenu {
    text-align: center;
}

a {
  border-bottom: 0px solid var(--darkMaincolor);
  color: #d65d0e;
  text-decoration: underline;
}

a:hover {
  background-color: #fabd2f;
  color: #282828;
  text-decoration: none;
}


.site-description a {
  color: #ddd;
}
.site-description a:hover {
  color: black;
}

.tags a {
  border-bottom: 3px solid var(--darkMaincolor);
}
.tags a:hover {
  background-color: var(--darkMaincolor);
  color: black;
}

.site-title a {
  color: white;
  text-decoration: none !important;
}

.header nav,
.footer {
  border-color: #333;
}

.footer-info {
    text-align: center !important;
}

.footer {
    text-align: center !important;
    display: flex;
}

.highlight {
  background-color: #333;
}
.soc:hover {
  color: black;
}
.draft-label {
  color: var(--darkMaincolor);
  background-color: blue;
}
.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 ;
}

.titlebar-link {
    text-decoration: none !important;
    color: #fabd2f;
    font-family: "Anton", sans-serif;
    text-transform: uppercase;
    letter-spacing: 7px;
    font-size: 4.5vw;
}

.titlebar-link:hover {
    background-color: #282828 !important;
    color: #d65d0e !important;
}