@font-face {
  font-family: "UbuntuMono-Regular";
  src: url("../fonts/UbuntuMono-Regular.ttf") format("truetype");
  font-weight: normal;
  font-display: swap;
}

@font-face {
  font-family: "UbuntuMono-Bold";
  src: url("../fonts/UbuntuMono-Bold.ttf") format("truetype");
  font-weight: normal;
  font-display: swap;
}

@font-face {
  font-family: "UbuntuMono-Italic";
  src: url("../fonts/UbuntuMono-Italic.ttf") format("truetype");
  font-weight: normal;
  font-display: swap;
}

@font-face {
  font-family: "UbuntuMono-BoldItalic";
  src: url("../fonts/UbuntuMono-BoldItalic.ttf") format("truetype");
  font-weight: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto-Regular";
  src: url("../fonts/Roboto-Regular.ttf") format("truetype");
  font-weight: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto-Italic";
  src: url("../fonts/Roboto-Italic.ttf") format("truetype");
  font-weight: normal;
  font-display: swap;
}

:root {
  --text: #111111;
  --blue: #005bbb;
  --yellow: #ffd500;
  --default: #0796ff70;
  --accent: var(--default);
  --font-regular: Roboto-Regular, Sans-Serif;
  --font-code: UbuntuMono-Regular, Courier, Sans-Serif;
  --link: var(--blue);
  --titleBg: var(--yellow);
  --textBg: linear-gradient(90deg, var(--yellow) 50%, var(--blue) 50%);
  --textBgAngled: linear-gradient(110deg, var(--yellow) 50%, var(--blue) 50%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --link: white;
    --bg: #0e1719;
    --text: #b8bfc5;
    --titleBg: var(--blue);
    --textBg: linear-gradient(90deg, var(--blue) 50%, var(--yellow) 50%);
    --textBgAngled: linear-gradient(110deg, var(--blue) 70%, var(--yellow) 30%);
  }
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: var(--font-regular);
  /* font-size: 1.125em; */ /* Increased from default */
  /* line-height:  1.5em; */ /* Increased from default */
  background-color: var(--bg);
  color: var(--text);
}

.site-title a {
  padding: 0.25em 0.25em;
}

a {
  color: var(--link);
}

table {
  text-align: left;
  margin: 25px;
  border-collapse: collapse;
}

table th {
  padding: 0 10px 0 10px;
  font-family: var(--font-code);
}

table tr:first-child {
  background: var(--accent);
}

table tr {
  border: 1px;
  border-style: solid;
  border-color: var(--accent);
}

table td {
  padding: 0 10px 0 10px;
  font-family: var(--font-code);
}

table a {
  padding: 3px;
  background-color: var(--accent);
  display: inline-block;
  margin: 2px 0 2px 0;
  border-radius: 2px;
  text-decoration: none;
  white-space: nowrap;
}

table a:hover {
  text-decoration: underline;
}

#home-data {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}

.highlight {
  font-family: var(--font-code);
  overflow-x: auto;
  max-width: 100%;
  height: auto;
}

.highlight pre {
  padding: 0.9375em;
  max-width: 100%;
  height: auto;
  border: none;
  white-space: pre-wrap;
}

.gallery-wrapper {
  width: 100%;
}

.highlight div:first-child {
  border-radius: 0.25em;
}

.highlight td:first-child pre {
  border-top-left-radius: 0.25em;
  border-top-right-radius: unset;
  border-bottom-left-radius: 0.25em;
  border-bottom-right-radius: unset;
  overflow: hidden;
}

pre code {
  overflow-x: scroll;
  max-width: 100%;
  height: auto;
  white-space: pre-wrap;
}

header {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-content: center;
  margin-bottom: 1.5em;
  font-family: var(--font-code);
}

header nav {
  display: flex;
  align-items: center;
}

header nav a {
  padding: 0 0.3125em;
  background-color: var(--accent);
  margin: 0 0.125em;
  border-radius: 0.125em;
}

header nav a:hover {
  text-decoration: none;
}

header h1 {
  font-size: 1.5em; /* Increased from 20px */
  font-weight: bold; /* Added */
  align-self: center;
}

.comments {
  width: 100%;
}

#content {
  display: flex;
  flex-direction: column;
  max-width: 50em; /* 800px */
  width: 100%;
  align-items: flex-start;
  background-color: var(--bg);
  align-items: stretch;
}

#content img {
  max-width: 100%;
  width: auto;
  height: auto;
}

#content h1 {
  font-size: 1.5em; /* Increased from 20px */
  align-self: center;
  border-top: var(--accent) 1px dashed;
  border-bottom: var(--accent) 1px dashed;
  padding: 0.25em 0.625em;
}

#content h2:not(#game h2) {
  border: var(--text) 1px dashed;
  font-size: 1.375em; /* Increased from 18px */
  font-weight: bold; /* Added */
  padding: 0.25em;
  width: 100%;
}

#content h3 {
  padding: 0.25em;
  border: var(--text) 1px dashed;
  font-style: italic;
  font-weight: bold; /* Make the text bold */
  letter-spacing: 0.05em; /* Increase the spacing between letters */
  text-shadow: 1px 1px 1px rgba(0,0,0,0.1); /* Add a subtle text shadow */
  margin: 1em 0; /* Add some vertical margin */
}

#game h2 {
  border-top: var(--blue) 1px dashed;
  border-bottom: var(--yellow) 1px dashed;
  background: none;
}

#content .post {
  max-width: 40em;
  align-self: center;
}

#content p {
  margin-bottom: 0;
  text-indent: 1em;
  margin-top: 0.5em;
  font-size: 1.125em; /* Increased from default */
  line-height: 1.5em;
}

blockquote {
  padding-left: 0.625em; /* Increased from 5px */
  border-color: var(--accent); /* Changed from white */
  border-left: 1px dotted;
  border-bottom: 1px dotted;
}

time {
  align-self: center;
}

#metadata {
  display: flex;
  justify-content: space-between;
}

#categories a {
  padding: 0.1875em;
  background-color: var(--accent);
  display: inline-block;
  margin: 0.125em 0 0.125em 0;
  border-radius: 0.125em;
  text-decoration: none;
}

#categories a:hover {
  text-decoration: underline;
}

.video-shortcode {
  max-width: 100%;
  height: auto;
}

/* Unordered List */
ul {
  list-style-type: none; /* Remove default bullet points */
}

ul li {
  padding: 0.5em 0; /* Add some vertical padding to each list item */
  position: relative;
  font-size: 1.125em; /* Increased from default */
}

ul li::before {
  content: "‣"; /* Add a custom bullet point */
  position: absolute;
  left: -1em; /* Position the bullet point */
}