* { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, sans-serif; }
body { background: var(--bg); color: var(--text); line-height: 1.6; scroll-behavior: smooth; transition: background .3s, color .3s; }

a { color: var(--link); text-decoration: underline; text-underline-position: under; transition: color .3s ease; }
a:hover, a:focus { text-decoration-style: wavy; color: var(--link-hover); }
p a { font-weight: 600; }
nav a, .contact-links a, footer a { text-decoration: none; }
#about a[href="#projects"] { text-decoration: underline; text-underline-position: under; }
#about a[href="#projects"]:hover, #about a[href="#projects"]:focus { text-decoration-style: wavy; color: var(--link-hover); }

header { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; position:sticky; top:0; z-index:1000; padding:1rem 2rem; background:var(--card-bg); box-shadow:0 2px 5px rgba(0,0,0,.1); transition: box-shadow .3s ease, background .3s ease; }
header h1 { font-size:1.5rem; margin:0; }

.brand { display:flex; align-items:center; gap:.5rem; }
.brand .logo { width:40px; height:40px; border-radius:50%; object-fit:cover; }

.logo-light { display: block; }
.logo-dark { display: none; }

html.dark .logo-light { display: none; }
html.dark .logo-dark { display: block; }

nav { display:flex; align-items:center; flex-wrap:wrap; gap:1rem; }
nav a { font-weight:bold; color:var(--text); position:relative; }
nav a::after { content:""; position:absolute; left:0; bottom:-4px; width:0; height:2px; background:var(--link); transition: width .3s ease; }
nav a:hover::after { width:100%; }

.theme-toggle { display:flex; align-items:center; justify-content:center; cursor:pointer; background:none; border:none; border-radius:6px; padding:.4rem; transition: background .3s; }
.theme-toggle:hover { background: var(--hover); }

section { padding:4rem 2rem; text-align:center; opacity:0; transform: translateY(40px); transition: all .8s ease-out; }
section p { max-width:700px; margin:0 auto; }
section.visible { opacity:1; transform: translateY(0); }
h2 { font-size:2rem; margin-bottom:2rem; }

.hero { display:flex; flex-direction:column; align-items:center; padding-top:2rem; }
.hero img { width:180px; height:180px; border-radius:50%; object-fit:cover; margin-bottom:1.5rem; transition: transform .4s ease; }
.hero img:hover { transform: scale(1.08); }
.hero h2 { font-size:2.2rem; margin-bottom:.5rem; }
.hero p { font-size:1.1rem; color: var(--subtext); }

.flip-card {
    width: 200px;
    height: 200px;
    perspective: 1000px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.8s;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    top: 0;
    left: 0;
}

.flip-card-front img,
.flip-card-back img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.flip-card-back {
    transform: rotateY(180deg);
}

.flip-card-back.logo-light { display: block; }
html.dark .flip-card-back.logo-light { display: none; }
.flip-card-back.logo-dark { display: none; }
html.dark .flip-card-back.logo-dark { display: block; }

.cards { display:grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap:2rem; justify-content:center; }
.card { background:var(--card-bg); border-radius:12px; padding:1.5rem; box-shadow:0 4px 10px rgba(0,0,0,.1); display:flex; flex-direction:column; align-items:center; text-align:center; transition: transform .3s ease, box-shadow .3s ease, background .3s; }
.card:hover { transform: translateY(-8px); box-shadow: 0 8px 18px rgba(0,0,0,.15); }
.card img { width:100%; height:280px; object-fit:cover; border-radius:6px; margin-bottom:1rem; }
.card h3 { margin:.5rem 0; }
.card p { font-size:.95rem; margin-bottom:.75rem; color: var(--subtext); }
.labels { display:flex; flex-wrap:wrap; gap:.4rem; justify-content:center; margin-bottom:1rem; }
.label { padding:.25rem .6rem; border-radius:999px; background:var(--hover); font-size:.75rem; font-weight:500; color: var(--subtext); user-select:none; pointer-events:none; white-space:nowrap; }

.buttons { display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; }
.btn { background:var(--link); color:#fff; padding:.6rem 1.2rem; border:none; border-radius:10px; cursor:pointer; transition: transform .3s ease, background .3s; display:flex; align-items:center; gap:.5rem; }
.btn:hover { background:var(--link-hover); color:#fff; transform: translateY(-3px) scale(1.05); }
.contact-links { display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; margin-top:1.5rem; }
.contact-links a { display:flex; align-items:center; gap:.5rem; padding:.6rem 1rem; background:var(--card-bg); border-radius:6px; box-shadow:0 2px 5px rgba(0,0,0,.1); font-weight:500; color:var(--text); transition: transform .3s ease, background .3s; }
.contact-links a:hover { transform: scale(1.08); background:var(--hover); }

footer { background:var(--footer-bg); color:var(--footer-text); padding:2rem; text-align:center; transition: background .3s, color .3s; }
footer .links { margin:1rem 0; display:flex; flex-direction:column; gap:.5rem; text-align:left; }
footer a { color: var(--footer-link); }

.back-to-top { margin:2rem auto 0; display:inline-block; background:var(--link); color:#fff; padding:.8rem 1.5rem; border:none; border-radius:8px; cursor:pointer; font-size:1rem; font-weight:bold; box-shadow:0 4px 8px rgba(0,0,0,.2); transition: transform .3s ease, background .3s; }
.back-to-top:hover { background:var(--link-hover); transform: scale(1.08); }

#tagline { font-size:1.1rem; color:var(--subtext); border-right:2px solid var(--link); white-space:nowrap; display:inline-block; animation: blink-cursor .7s infinite; padding-right:5px; }
@keyframes blink-cursor { 0%, 50% { border-color: var(--link); } 51%, 100% { border-color: transparent; } }

:root {
    --bg:#f8f9fa; --text:#333; --subtext:#555; --link:#007BFF; --link-hover:#0056b3; --card-bg:#fff; --hover:#f1f1f1; --footer-bg:#111; --footer-text:#bbb; --footer-link:#ddd;
}
.dark {
    --bg:#121212; --text:#eee; --subtext:#aaa; --link:#4dabf7; --link-hover:#1c7ed6; --card-bg:#1e1e1e; --hover:#2a2a2a; --footer-bg:#000; --footer-text:#888; --footer-link:#bbb;
}
html.dark #theme-toggle svg { stroke:white; }

section:nth-of-type(odd) { background:#ffffff; }
section:nth-of-type(even) { background:#f7fbff; }
.dark section:nth-of-type(odd) { background:#121212; }
.dark section:nth-of-type(even) { background:#181a1d; }
.dark .split-section > section { background:#1e1e1e; }

.split-section { display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:stretch; text-align:left; }
.split-section > section { background:var(--card-bg); border-radius:12px; padding:2rem; box-shadow:0 4px 10px rgba(0,0,0,.1); transition: background .3s; display:flex; flex-direction:column; }
.split-section h2 { margin-bottom:1rem; }

@media (max-width: 992px) {
    header { flex-direction:column; align-items:flex-start; gap:.5rem; }
    nav { flex-wrap:wrap; gap:.8rem; }
    .hero h2 { font-size:1.8rem; }
    h2 { font-size:1.7rem; }
}
@media (max-width: 768px) {
    body { font-size:14px; }
    header { padding:1rem; }
    nav { flex-direction:column; align-items:flex-start; width:100%; }
    nav a { padding:.5rem 0; }
    .hero img { width:120px; height:120px; }
    .hero h2 { font-size:1.5rem; }
    h2 { font-size:1.4rem; }
    .cards { grid-template-columns:1fr; }
    .card { padding:1rem; }
    .btn { padding:.5rem 1rem; font-size:.9rem; }
    .split-section { grid-template-columns:1fr; }
    .contact-links { flex-direction:column; align-items:center; }

    #menu-toggle { display:block; margin-left:auto; }
    nav#nav-links { display:none; flex-direction:column; width:100%; background:var(--card-bg); margin-top:.5rem; padding:.5rem 1rem; border-radius:8px; box-shadow:0 2px 6px rgba(0,0,0,.15); }
    nav#nav-links.show { display:flex; }
    nav#nav-links a { padding:.7rem 0; width:100%; }
    nav#nav-links .theme-toggle { align-self:flex-start; margin-top:.5rem; }

    footer .links {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .5rem;
        text-align: center;
      }
    footer p { font-size:.85rem; }
}

.carousel { overflow:hidden; position:relative; }
.carousel-track { display:flex; transition: transform .5s ease; }
.carousel .cards { min-width:100%; display:grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap:2rem; }
.carousel-dots { display:flex; justify-content:center; gap:.6rem; margin-top:1rem; }
.carousel-dots button { width:12px; height:12px; border-radius:50%; border:none; background:#bbb; cursor:pointer; transition: background .3s; }
.carousel-dots button.active { background: var(--link); }
.card.empty { display:flex; align-items:center; justify-content:center; color:var(--subtext); font-style:italic; }

.terminal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    color: #0f0;
    font-family: monospace;
    font-size: 16px;
    z-index: 9999;
    padding: 1rem;
    box-sizing: border-box;
}

.terminal-header {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 10px;
}

.terminal-header button {
    background: #111;
    color: #0f0;
    border: 1px solid #0f0;
    padding: 5px 10px;
    cursor: pointer;
}

.terminal-output {
    height: calc(100% - 70px); /* header + input */
    overflow-y: auto;
    white-space: pre-wrap;
}

.terminal-output pre {
    font-family: monospace;
    white-space: pre;
    margin: 0;
}

.terminal-input {
    width: 100%;
    background: #000;
    color: #0f0;
    border: none;
    padding: 5px;
    font-family: monospace;
    font-size: 16px;
    outline: none;
}

.help-table {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
  width: 100%;
  font-family: monospace;
}

.help-row {
  display: flex;
  justify-content: flex-start;
  gap: 2rem;
  white-space: nowrap;
}

.awards-table .help-row {
    gap: 15rem;
}

.help-command {
  width: 200px;
  flex-shrink: 0;
  text-align: left;
}

.help-desc {
  flex-grow: 1;
  color: var(--command-output-color, #0f0);
  white-space: normal;
}

.help-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  padding-bottom: 4px;
  margin-bottom: 6px;
  font-weight: normal;
  color: var(--font-color, #0f0);
}

.cli-link {
  color: #0f0;
  text-decoration: none;
}
.cli-link:hover {
  text-decoration: none;
}

.help-table .help-header {
  border-bottom: none !important;
}
.contact-table .help-header {
  border-bottom: none !important;
}

/* === IMAGE LIGHTBOX === */
.image-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.image-lightbox.active {
  opacity: 1;
  pointer-events: auto;
}

.image-lightbox-content {
  position: relative;
  max-width: 90%;
  max-height: 85%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  background: #111;
}

.image-lightbox-content img {
  display: block;
  max-width: 100%;
  max-height: 80vh;
  border-radius: 8px;
  object-fit: contain;
}

.image-lightbox-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  gap: 0.5rem;
}

.image-lightbox button {
  background: #222;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.2s ease;
}

.image-lightbox button:hover {
  background: #333;
}

@media (max-width: 600px) {
  .image-lightbox-content {
    max-width: 95%;
    max-height: 80%;
  }
}