/* Base styles - Brutalist theme */
:root {
  --black: #000000;
  --bg-color: #eeeeee;
  --link-color: #0000FF;
  
  /* Code syntax colors */
  --code-bg: #1e1e1e;
  --code-text: #d4d4d4;
  --code-comment: #6A9955;
  --code-keyword: #569CD6;
  --code-string: #CE9178;
  --code-function: #DCDCAA;
  --code-number: #B5CEA8;
  --code-operator: #D4D4D4;
  --code-parameter: #9CDCFE;
  --code-class: #4EC9B0;
  --code-tag: #569CD6;
  --code-attr: #9CDCFE;
  --code-value: #CE9178;
}

* {
  box-sizing: border-box;
}

html {
  font-family: monospace;
  font-size: 16px;
  line-height: 1.4;
  color: var(--black);
  background-color: var(--bg-color);
}

body {
  margin: 40px;
  max-width: 100%;
  overflow-x: hidden;
}

/* Layout */
.header {
  width: 100%;
  max-width: 800px;
  margin-bottom: 40px;
}

.content {
  width: 100%;
  max-width: 800px;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: monospace;
  line-height: 1.2;
  font-weight: normal;
  margin: 0;
}

h1 {
  font-size: 1rem;
  font-weight: normal;
}

h2 {
  font-size: 1rem;
}

h3 {
  font-size: 1rem;
}

p, ul, ol {
  margin-bottom: 0;
  font-size: 1rem;
}

a {
  color: var(--link-color);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

ul, ol {
  margin-left: 0;
  padding-left: 20px;
}

/* Code styling */
code {
  font-family: monospace;
  background-color: var(--black);
  color: var(--white);
  padding: 0.2rem 0.4rem;
}

pre {
  background-color: var(--code-bg);
  color: var(--code-text);
  padding: 1rem;
  margin-bottom: 1rem;
  overflow-x: auto;
  border: 1px solid var(--black);
}

pre code {
  background: none;
  padding: 0;
  color: var(--code-text);
}

/* Syntax highlighting classes */
.hljs-keyword {
  color: var(--code-keyword);
}

.hljs-string, .hljs-regexp, .hljs-subst {
  color: var(--code-string);
}

.hljs-function, .hljs-built_in {
  color: var(--code-function);
}

.hljs-comment, .hljs-quote {
  color: var(--code-comment);
  font-style: italic;
}

.hljs-number, .hljs-literal {
  color: var(--code-number);
}

.hljs-operator {
  color: var(--code-operator);
}

.hljs-params {
  color: var(--code-parameter);
}

.hljs-class {
  color: var(--code-class);
}

.hljs-tag {
  color: var(--code-tag);
}

.hljs-attr {
  color: var(--code-attr);
}

.hljs-variable.language_ {
  color: var(--code-keyword);
}

/* Colorful markdown code blocks */
.language-javascript, .language-js {
  color: var(--code-text);
}

.language-javascript .keyword, .language-js .keyword {
  color: var(--code-keyword);
}

.language-javascript .string, .language-js .string {
  color: var(--code-string);
}

.language-javascript .function, .language-js .function {
  color: var(--code-function);
}

.language-javascript .comment, .language-js .comment {
  color: var(--code-comment);
}

.language-javascript .number, .language-js .number {
  color: var(--code-number);
}

.language-html .tag {
  color: var(--code-tag);
}

.language-html .attr {
  color: var(--code-attr);
}

.language-html .string {
  color: var(--code-value);
}

.language-markdown .section {
  color: var(--code-keyword);
}

.language-markdown .strong {
  color: var(--code-function);
  font-weight: bold;
}

.language-markdown .emphasis {
  color: var(--code-function);
  font-style: italic;
}

.language-yaml .attr {
  color: var(--code-attr);
}

blockquote {
  border-left: 4px solid var(--black);
  padding-left: 1rem;
  margin: 1rem 0;
}

/* Posts */
.posts p {
  margin-bottom: 15px;
}

.post-meta {
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

.post-title {
  margin-top: 0;
  font-size: 1rem;
  font-weight: normal;
}

.post-header {
  margin-bottom: 1rem;
}

.post-content {
  max-width: 100%;
  margin-top: 20px;
}

.post-content p, 
.post-content ul, 
.post-content ol {
  margin-bottom: 15px;
}

/* Images and assets */
.post-content img,
.asset-img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1rem 0;
  border: 1px solid var(--black);
}

.asset-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 20px;
  margin: 20px 0;
}

.asset-gallery img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--black);
}

.asset-caption {
  margin-top: 5px;
  font-size: 0.9rem;
}

/* About page styling */
.about-content h3 {
  margin-top: 15px;
  margin-bottom: 5px;
}

/* Tags styling */
.tags ul {
  list-style: none;
  padding: 0;
}

.tags li {
  margin-bottom: 10px;
}

/* Special characters and elements */
.dash {
  display: block;
  font-style: normal;
  margin: 0;
}

/* Media queries */
@media (max-width: 768px) {
  body {
    margin: 20px;
  }
  
  .asset-gallery {
    grid-template-columns: 1fr;
  }
}