:root {
  --hc: #bf8eff;        /* Header / accent color (purple) */
  --hc2: #4fc3ff;       /* Header / accent color (blue) */
  --hc3: #ffd166;       /* Header / accent color (yellow) */
  --hc4: #95e6cb;       /* Header / accent color (cyan) */
  --hc5: #F23C16;       /* Header / accent color (red) */
  --bc: #262626;        /* Background color (dark gray) */
  --cbc: #313131;       /* Code block color */
  --tec: #eee;          /* Text color (light gray) */
  --ctec: #cccccc;
  --blc: #404040;       /* Block/border color */
  --lhc: #f99734;       /* Link hover color (orange) */
  --mc: #a2a2a2;        /* Muted color (medium gray) */
  
  /* Semantic mappings */
  --content-bg: var(--bc);
  --text: var(--tec);
  --accent: var(--hc3);
  --link-hover: var(--lhc);
  --link-visited: color-mix(in srgb, var(--accent) 60%, white);
  --muted: var(--mc);
  --border: var(--blc);
  --code-bg: var(--cbc);
  --code-text: var(--ctec);
  --page-gutter: clamp(1rem, 3vw, 4rem);
  --content-max-width: 800px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*
    Base elements
*/
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: var(--text);
  background-color: var(--content-bg);
}


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

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

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

img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 2rem 0;
  border-radius: 4px;
}

 /* 
   Layout
*/
.container {
  margin-inline: auto;       /* This centers the column */
  padding-inline: var(--page-gutter); /* This provides the dynamic margin */
  max-width: var(--content-max-width);
}

/* 
   Typography 
*/
h1 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
  color: var(--accent);
}

h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: var(--link-visited);
}

h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  color: var(--text);
}

h1 a, h2 a, h3 a {
  color: var(--text);
  text-decoration: none;
}

h1 a:hover, h2 a:hover, h3 a:hover {
  color: var(--accent);
}

p {
  margin-bottom: 1rem;
}

/* 
    Main Lists 
*/
main ul, main ol {
  margin: 0.1rem 0;
  padding-left: 2rem;
}

main li {
  margin-bottom: 0.5rem;
}

/* 
    Main Pre / Code blocks 
*/
main code {
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Courier New', monospace;
  font-size: 0.9em;
  background: var(--code-bg);
  color: --code-text;
  padding: 0.2em 0.4em;
  border-radius: 3px;
}

main pre {
  background: var(--code-bg);
  padding: 1rem;
  overflow-x: auto;
  border-radius: 5px;
  margin: 1rem 0;
  border: 1px solid var(--border);
}

main pre code {
  background: none;
  padding: 0;
}

/* 
    Footer 
*/
footer {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.9rem;
}

/* 
   Overwrites for Header and Navigation 
    (full-width chrome + scoped nav styles)
*/
.site-header {
  background-color: var(--accent);
  padding: 1.5rem 0;
  margin-bottom: 1.5rem;
  width:100%; 
}

.site-header .container {
  display: flex;
  align-items: flex-end;
  gap: 2rem;
}

.site-header .logo-ascii {
  font-family: 'Courier New', Courier, monospace;
  font-weight: bold;
  font-size: 0.7rem;
  line-height: 1.2;
  color: var(--content-bg);
  margin: 0;
  padding: 0;
  border: none;
  background: var(--accent);
  flex-shrink: 0;
}

.site-header a {
  text-decoration: none;
  font-weight: 700;
}

.site-header nav a {
  color: var(--content-bg);
  text-decoration: none;
}

.site-header nav a:hover {
  color: var(--link-hover);
  text-decoration: none;
}

.site-header nav a:visited {
  color: none;
}

.site-header nav ul {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-end;
  list-style: none;
  gap: 1.5rem;
}

.site-header .logo-link {
    text-decoration: none;
}

/*
    Settings for narrower screens (Phone)
*/
@media (max-width: 600px) {

  html, body {
    overflow-x: hidden;
    position: relative;
    width: 100%;
  }

   /*putting logo and nav columnar on phone*/
  .site-header .container {
    width: 100%;
    padding: 1rem 0;
    overflow: hidden;
    flex-direction: column;
    align-items: center; 
    gap: 1rem;
  }

  .site-header .logo-ascii {
    text-align: center;
    flex-shrink: 1;
    max-width: 100%;
    font-size: 2.0vw;
    overflow-x: hidden;
    white-space: pre;
  }

  .site-header nav ul {
    display: flex;
    justify-content: center;
    gap: 1rem;
  }

}