/* Everforest Dark Medium Color Palette */
:root {
  --bg0: #2d353b;
  --bg1: #343f44;
  --bg2: #3d484d;
  --bg3: #475258;
  --bg4: #4f585e;
  
  --fg: #d3c6aa;
  --red: #e67e80;
  --orange: #e69875;
  --yellow: #dbbc7f;
  --green: #a7c080;
  --aqua: #83c092;
  --blue: #7fbbb3;
  --purple: #d699b6;
  --grey0: #7a8478;
  --grey1: #859289;
  --grey2: #9da9a0;
}

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

body {
  font-family: 'Courier New', monospace;
  background-color: var(--bg0);
  color: var(--fg);
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 1rem;
  line-height: 1.6;
}

/* Typography */
h1 {
  font-size: 2.5rem;
  color: var(--green);
  border-bottom: 4px solid var(--green);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

h2 {
  font-size: 2rem;
  color: var(--aqua);
  margin-top: 1.5rem;
}

h3 {
  font-size: 1.5rem;
  color: var(--blue);
  margin-top: 1.5rem;
}

p {
  margin-bottom: 1rem;
}

/* Links */
a {
  color: var(--aqua);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

a:hover {
  border-bottom: 2px solid var(--aqua);
}

/* Header */
header {
  border: 3px solid var(--green);
  padding: 2rem;
  margin-bottom: 3rem;
  background-color: var(--bg1);
}

.site-title {
  font-size: 2.5rem;
  margin: 0;
  color: var(--green);
  letter-spacing: 0.1em;
}

.site-description {
  color: var(--grey1);
  margin-top: 0.5rem;
  font-style: italic;
}

.quick-links {
  margin: 1rem 0;
  padding: 0.5rem 0;
  border-top: 1px solid var(--bg3);
  border-bottom: 1px solid var(--bg3);
}

.quick-links a {
  color: var(--aqua);
}

/* Navigation */
nav {
  margin-top: 1.5rem;
  border-top: 2px solid var(--bg3);
  padding-top: 1rem;
}

nav ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem 2rem;
  margin-top: 1rem;
}

nav li {
  margin: 0;
}

nav a {
  color: var(--fg);
  font-weight: normal;
  border: none;
  padding: 0;
  background: none;
  display: block;
  border-bottom: 1px solid var(--bg3);
  padding-bottom: 0.25rem;
}

nav a:hover {
  color: var(--aqua);
  border-bottom: 1px solid var(--aqua);
  background: none;
}

/* Responsive nav */
@media (max-width: 600px) {
  nav ul {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Articles */
article {
  border: 2px solid var(--bg3);
  padding: 2rem;
  margin-bottom: 2rem;
  background-color: var(--bg1);
}

/* Code */
code {
  background-color: var(--bg3);
  padding: 0.2rem 0.4rem;
  color: var(--yellow);
  border: 1px solid var(--bg4);
}

pre {
  background-color: var(--bg2);
  padding: 1rem;
  border: 2px solid var(--bg4);
  margin: 1rem 0;
  overflow-x: auto;
}

/* Vim cursor */
.vim-cursor {
  background-color: #fff;
  color: var(--bg0);
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  0%, 100% { background-color: #fff; color: var(--bg0); }
  50% { background-color: transparent; color: var(--green); }
}

/* Social icons */
.socials {
  text-align: center;
  margin-top: 1rem;
}

.socials a {
  display: inline-block;
  margin: 0 0.5rem;
  border-bottom: none;
}

.socials a:hover {
  border-bottom: none;
  opacity: 0.8;
}

.socials img {
  width: 40px;
  height: 40px;
  vertical-align: middle;
}

/* Footer */
footer {
  border-top: 3px solid var(--green);
  margin-top: 4rem;
  padding-top: 2rem;
  text-align: center;
  color: var(--grey1);
}