@media (prefers-color-scheme: dark) {
  html { 
      filter: invert(1);
      img {
        filter: invert(1);

        &.invertable { filter: invert(0); }
      }
  }
}
html { background: white; }
html { height: 100%; }

* {
	margin: 0;
	padding: 0;
}

ul {
	padding-left:2em;
}
p {
	margin-top:1em;
	margin-bottom:1em;
}

a {
	text-decoration: none;
}

a:link,
a:visited {
	color: #f30;
}

a:hover {
	color: #f90;
}

pre>code {
	background-color:transparent;
}
code {
	background-color:#2b303b;
    color:#c0c5ce;
}

#site {
	width:96%;
	min-width:1024px;
	margin-left:auto;
	margin-right:auto;
	padding:10px 2%;
}

#main_header{
	width: 100%;
	font-weight:bold;
	font-size:45pt;
	color:#FFF;
	background-color: #2a7ec7; /*#0300C1;*/
	border-radius:12px;
	box-shadow: 0 0 6px #888;
	text-align:center;
	vertical-align:middle;
	height:80pt;
	line-height:75pt;
	margin-bottom:4pt;
	font-family: Georgia, Palatino;
}
#main {
	width:82%;
    display:inline-block;
	padding-bottom:5em;
	min-height:50em;
}

#content header > h1 {
	font-size:3em;
}
#content h1 {
	font-size: 3em;
	font-family: Georgia, Palatino;
    text-align:center;
}
#content {
	padding:1%;
	margin:0;
	width:97%;
}
#right {
	padding:0;
	margin:0;
    width:17%;
    float:right;
}
#side h4, #articles h4, #projects h4, #donate h4 {
	text-align:center;
}
#side a, #articles a, #projects a {
	font-weight:bold;
}
#side, #articles, #projects, #donate, #home {
	border-left: 2px #f90 solid;
	margin-top:1em;
	margin-bottom: 1em;
	padding-left:0.5em;
	font-family: Georgia, Palatino;
}
#projects {
	margin-bottom:7em;
}
.divider {
	color: #f90;
    font-weight:bold;
    font-size:1.3em;
}

#tag {
	min-height:60em;
}

#tag h1 {
	font-size:3em;
	text-align:center;
}
#tag article {
	padding-bottom:3em;
}

#home_left{
    max-width: 50em;
    float:left;
    margin-right:5em;
}

#home_right{
    max-width:50em; 
    float:left;
}

.tag_list {
    margin: auto;
    width: 70%;
	font-size:1.5em;
    list-style:none ;
	line-height:1.7em;
}
.tag_list li::before {
  content: "-";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: #f30;; /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
}
blockquote {
    border:0;
    padding:0.5em;
    border-left:1em;
    border-color:lightgrey;
    border-style:solid;
}

pre {
	padding:1em;
}

h1 {
    margin-top: 1em;
    margin-bottom: 1em;
}

h2, h3 {
    margin-top: 2em;
    margin-bottom: 1em;
}
.post_date {
    font-weight:bold;
    text-align: right;
}


.github_button {
    background-color: rgb(235, 240, 244);
    background-image: linear-gradient(rgb(246, 248, 250), rgb(235, 240, 244) 90%);
    background-position: 0 -0.5em;
    background-repeat: repeat-x;
    background-size: 110% 110%;
    border-style:solid;
    border-color: #d1d9e0;
    border-radius: .25em;
    border-width:1px;
    color: rgb(37, 41, 46);
    cursor: pointer;
    display: inline-flex;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
    height: 18px;
    line-height: 18px;
    padding: 5px 12px;
    user-select: none;
    vertical-align: bottom;
    font-weight: 600;
}
a:hover.github_button , a:visited.github_button  {
    color: #25292e;
}
.icon-heart {
    color: #bf3989;
    fill: #bf3989;
}
.kofi_button {
    background-color: #00b9fe;
    height: 26px;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    width: max-content;
    padding: 2px 7px;
    font-size: 16px;
    color: #fff;
    border-radius: 3px;
    font-weight: 600;
}
a.kofi_button , a:visited.kofi_button a:hover.kofi_button  {
    color: #fff;
}
.kofi_button > img {
    width: 19px;
    margin-right:10px;
}