@import "theme-styling.css";
@import "fonts.css";
@import "syntax-highlight.css";
@import "pixelart.css";

html, body {
  background-color: var(--primary-bg-color);
  color: var(--primary-text-color);
  margin: 0px;
}

a:link, a:visited {
  color: var(--fresh-link-color);
  text-decoration-line: none;
} a:hover, a:visited:hover {
  color: var(--hover-link-color);
  text-decoration-line: underline;
} a:active, a:visited:active {
  color: var(--active-link-color);
  text-decoration-line: underline;
}/* a:visited {
  color: var(--visited-link-color);
  text-decoration-line: none;
} a:visited:hover {
  color: var(--visited-hover-link-color);
  text-decoration-line: underline;
} a:visited:active {
  color: var(--visited-active-link-color);
  text-decoration-line: underline;
}*/


h1, h2, h3, h4, h5, h6 {
    font-family: var(--title-font);
    font-weight: 700;
}


.body {
  background-color: var(--content-bg-color);
  width: auto;
  max-width: 61rem;
  height: auto;
  /*      top right bottom left  */
/*   margin: 0px calc(max(80rem, 100vw) - 80rem) 0px calc(max(80rem, 100vw) - 80rem); */
  margin: auto;
  padding: 1rem;
}

header {
  background-color: var(--highlight-bg-color);
  font-family: var(--title-font);
  font-weight: 700;
  padding: 1.5rem;
}
header h1 {
  margin: unset;
  line-height: 1.5rem;
}



.bloglist {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.blogitem {
  padding: 1rem;
  background-color: var(--fresh-interact-color);
}
.blogtaglist {
  list-style: none;
  display: flex;
  padding: 0;
  margin: 0.5rem 0 0 0;
  gap: 0.5rem;
}
.blogtaglist > li {
  padding: 0.25rem;
  background: var(--content-bg-color);
  border-radius: 0.25rem;
}


.blogitem h2 {
  margin: 0rem;
}
.blogitem hgroup {
  margin: 0rem;
  margin-block-end: 0.5rem
}
article > h1 {
  margin-block: 0rem 1.25rem;
  font-size: 1.75rem;
}

/* post titles */
hgroup > h1 {
  margin: 0rem;
}
hgroup {
  margin-block-end: 1.25rem;
}
hgroup > time {
  color: var(--secondary-text-color);
  font-size: smaller;
}
hr {
  color: var(--secondary-text-color);
  margin-block: 1.25rem;
}

input {
  background-color: var(--primary-bg-color);
  color: var(--primary-text-color);
  caret-color: var(--primary-text-color);
  font-family: var(--writing-font);

  border: none;
  border-radius: 0.25rem;
  padding: 0.25rem;
}
input:focus {
  outline: var(--active-interact-color) solid 0.125rem;
}
input::placeholder {
  font-family: var(--writing-font);
  color: var(--secondary-text-color);
}

.previouspost {
  float: left;
  margin-bottom: 0 !important;
}
.nextpost {
  float: right;
  margin-bottom: 0 !important;
}
.postnavsep {
  color: var(--highlight-bg-color);
}




/* navigation bar */
nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10ch, 1fr));
  margin-top: 1.5rem;
}
nav a {
  margin: unset;
  padding-block: 0.25rem;
  text-align: center;
  color: var(--primary-text-color) !important;
}
nav a:not(:last-child) {
  border-right: solid 3px var(--active-interact-color);
}
nav a:link {
/*  background-color: var(--fresh-interact-color);*/
}
nav a:hover {
  background-color: var(--fresh-interact-color);/*  background-color: var(--hover-interact-color);*/
  text-decoration-line: none;
}
nav a:active {
  background-color: var(--active-interact-color);
  text-decoration-line: none;
}

main {
  padding: 3rem;
  border: solid 3px var(--highlight-bg-color);
  font-family: var(--writing-font);
  overflow: auto;
}

/* adjust spacing for mobile */
@media (max-aspect-ratio: 1/1) {
  main {
    padding: 1.5rem;
  }
  .body {
    padding: 0.5rem;
  }
}

main p {
  line-height: 150%;
  margin: unset;
}
main > article > :not(:last-child) {
  margin-bottom: 1rem;
}
main > article > :not(:has(~ :not(script))) {
  margin-bottom: 0rem !important;
}


footer {
  max-width: 61rem;
  margin: auto;
/*   margin: 0px calc(max(80rem, 100vw) - 80rem) 0px calc(max(80rem, 100vw) - 80rem); */
  padding: 2rem;
  line-height: 150%;
  color: var(--primary-text-color);
  font-family: var(--code-font);
}

footer > hr {
  margin: 1.75rem;
}
#footer-buttons {
  margin-bottom: 2rem;
}

.kofi-button {
  display: inline-block;
  vertical-align: middle;
  width: 143px;
  height: 36px;
}




pre {
  padding: 0.5rem;
/*  padding-top: 1rem;*/
  overflow-x: auto;
}
code {
  font-family: var(--code-font);
  font-size: 0.9rem;
}


/* Line Numbers */
pre.highlight {
  counter-reset: line;
}
code span.line {
    counter-increment: line;
}
code span.line:before {
  display:inline-block;
  width: 1.8rem;
  padding-right: 1.5rem;
  content: counter(line);
  text-align: right;
  -webkit-user-select: none;
}



main.notfound {
  text-align: center;
  padding: 50px;
}

.notfound h1 {
    font-size: 4rem;
}