@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400&family=UnifrakturMaguntia&family=Eagle+Lake&display=swap');

:root {
  --green:      #00cc00;
  --green-dark: #1a4a1a;
  --green-mid:  #3a6b2a;
  --green-lite: #7ecf5a;
  --red:        #cc0000;
  --black:      #060a06;
  --border-w10: 4px outset #5aaf3a;   
  --border-w10i:4px inset  #2e5522;   
  --sidebar-w:  200px;
}

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

body {
  color: #ccffcc;
  font-family: 'Eagle Lake', serif;
  min-height: 100vh;
  display: flex;
  cursor: default;
}

/* ══════════════════════════════
   SIDEBAR
══════════════════════════════ */
#sidebar {
  width: var(--sidebar-w);
  min-height: 100vh;
  border-right: 5px outset #5aaf3a;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

#sidebar::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('background.png');
  background-size: auto;
  background-repeat: repeat;
  animation: bgScroll 6s linear infinite;
  z-index: 0;
}

@keyframes bgScroll {
  0%   { background-position: 0px 0px; }
  100% { background-position: 200px 200px; }
}

#sidebar > * {
  position: relative;
  z-index: 2;
}

/* ── Profile block ── */
#profile-block {
  padding: 10px;
  border-bottom: 4px outset #5aaf3a;
  position: relative;
  overflow: visible;
  background: rgba(0,0,0,0.2);
}

#profile-block::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: calc(var(--sidebar-w) + 80px);
  height: 100%;
  background-image: url('foreground.png');
  background-size: auto;
  background-repeat: repeat;
  animation: bgScroll 4s linear infinite;
  z-index: -1;
  pointer-events: none;
}

#profile-pic {
  width: 100%;
  aspect-ratio: 1;
  overflow: visible;
  position: relative;
  border: 4px inset #2e5522;
}

#profile-pic img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  position: relative;
  z-index: 1;
}

/* ── Nav ── */
nav {
  display: flex;
  flex-direction: column;
}

nav a, .nav-item {
  display: block;
  padding: 7px 10px;
  border-bottom: 3px outset #5aaf3a;
  border-top: 1px inset #2e5522;
  text-decoration: none;
  color: #ccffcc;
  font-family: 'UnifrakturMaguntia', cursive;
  font-size: 1rem;
  text-align: center;
  cursor: pointer;
  user-select: none;
  background: linear-gradient(180deg, #1a3a1a 0%, #0d1f0d 100%);
  transition: none;
}

nav a:hover, .nav-item:hover {
  background: linear-gradient(180deg, #2a5a2a 0%, #1a3a1a 100%);
  color: #00ff00;
  border-bottom-style: inset;
  border-top-style: outset;
}

nav a.active, .nav-item.active {
  background: linear-gradient(180deg, #0d1f0d 0%, #1a3a1a 100%);
  color: #00ff44;
  border-bottom-style: inset;
  border-top-style: outset;
}

/* Submenu */
.nav-group {
  position: relative;
  display: flex;
  flex-direction: column;
}

.submenu {
  display: none;
  flex-direction: column;
}

.nav-group:hover .submenu {
  display: flex;
}

.submenu a {
  padding: 6px 10px 6px 18px;
  font-size: 0.9rem;
  font-family: 'UnifrakturMaguntia', cursive;
  border-bottom: 2px inset #2e5522;
  text-align: left;
  background: linear-gradient(180deg, #0a180a 0%, #061006 100%);
  color: var(--green-lite);
  text-decoration: none;
  cursor: pointer;
}

.submenu a:hover, .submenu a.active {
  background: var(--red);
  color: #fff;
}

/* ══════════════════════════════
   MAIN
══════════════════════════════ */
#main {
  flex: 1;
  padding: 24px 32px;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  color: #ccffcc;
}

#main::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('background2.png');
  background-size: auto;
  background-repeat: repeat;
  animation: bgScroll 6s linear infinite;
  z-index: 0;
}

#main > * {
  position: relative;
  z-index: 1;
}

/* Animación de entrada para las secciones */
.content-section { display: none; }
.content-section.active { 
  display: block; 
  animation: dropDownSection 0.5s ease-out forwards;
}

@keyframes dropDownSection {
  0% { transform: translateY(-30px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* H1 — Sin brillos */
.content-section h1 {
  font-family: 'UnifrakturMaguntia', cursive;
  font-size: 2.2rem;
  margin-bottom: 10px;
  padding: 4px 8px 8px;
  border-top:    4px outset #5aaf3a;
  border-left:   4px outset #5aaf3a;
  border-bottom: 4px inset  #2e5522;
  border-right:  4px inset  #2e5522;
  background: linear-gradient(135deg, #00ff00 0%, #39d353 40%, #c8f5a0 70%, #fff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
  margin-bottom: 14px;
}

.content-section p {
  line-height: 1.75;
  max-width: 640px;
  margin-bottom: 12px;
  color: #ccffcc;
}

/* ── Social ── */
.social-list { list-style: none; margin-top: 10px; }
.social-list li { margin-bottom: 6px; }

.social-list a {
  font-family: 'Eagle Lake', serif;
  color: #ff9999;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.social-list a:hover { color: #ffff00; text-decoration: none; }

/* ── Project card — web1 table-look ── */
.project-card {
  border-top:    4px outset #5aaf3a;
  border-left:   4px outset #5aaf3a;
  border-bottom: 4px inset  #2e5522;
  border-right:  4px inset  #2e5522;
  padding: 16px;
  max-width: 500px;
  margin-bottom: 20px;
  background: linear-gradient(180deg, #0e200e 0%, #060e06 100%);
}

.project-card h2 {
  font-family: 'UnifrakturMaguntia', cursive;
  font-size: 1.4rem;
  margin-bottom: 8px;
  background: linear-gradient(135deg, #00ff00 0%, #39d353 40%, #c8f5a0 70%, #fff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.project-card p {
  font-family: 'Eagle Lake', serif;
  font-size: 0.9rem;
  color: #aaffaa;
}

/* ══════════════════════════════
   BLOG
══════════════════════════════ */

/* Post card */
.blog-post {
  border-top:    4px outset #5aaf3a;
  border-left:   4px outset #5aaf3a;
  border-bottom: 4px inset  #2e5522;
  border-right:  4px inset  #2e5522;
  background: linear-gradient(180deg, #0e200e 0%, #060e06 100%);
  padding: 16px;
  margin-bottom: 24px;
  max-width: 720px;
}

.blog-post-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  border-bottom: 2px inset #2e5522;
  padding-bottom: 8px;
  background: linear-gradient(90deg, #1a3a1a, transparent);
  padding: 6px 8px;
}

.blog-post-title {
  font-family: 'UnifrakturMaguntia', cursive;
  font-size: 1.5rem;
  background: linear-gradient(135deg, #00ff00 0%, #39d353 40%, #c8f5a0 70%, #fff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  flex: 1;
}

.blog-post-date {
  font-family: 'Courier Prime', monospace;
  font-size: 0.72rem;
  color: #669966;
  white-space: nowrap;
}

.blog-post-body {
  font-family: 'Eagle Lake', serif;
  font-size: 0.93rem;
  line-height: 1.8;
  color: #ccffcc;
  margin-bottom: 16px;
  padding: 8px 4px;
}

/* Comments */
.comments-section {
  border-top: 3px inset #2e5522;
  padding-top: 12px;
  margin-top: 4px;
}

.comments-title {
  font-family: 'UnifrakturMaguntia', cursive;
  font-size: 1.05rem;
  color: var(--green-lite);
  margin-bottom: 8px;
}