@charset "UTF-8";
:root {
  --current-theme: "cyberpunk";
  --primary-color: #ff0080;
  --secondary-color: #00ffff;
  --dark-color: #cc0066;
  --bg-color: #000011;
  --bg-light-color: #110022;
  --accent-color: #ffff00;
  --matrix-chars: "01234567890ABCDEF><{}[]()+=*&^%$#@!~`";
  --terminal-prompt: "necro@cyber-terminal:~$";
  --welcome-message: "Welcome to the cyber terminal... 🤖 Neural link established.";
  --header-decoration: "⚡️🤖💫";
  --theme-description: "Futuristic neon cyberpunk theme with hot pink and cyan";
}

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

html {
  overflow-x: hidden;
}

body {
  font-family: "Fira Code", "JetBrains Mono", "Courier New", monospace;
  background: #000011;
  color: #ff0080;
  line-height: 1.4;
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}
body.terminal-startup {
  background: black;
}
body.terminal-startup * {
  opacity: 0;
  animation: terminal-boot 2s ease-out forwards;
}

@keyframes terminal-boot {
  0% {
    opacity: 0;
    transform: scale(1.1);
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.matrix-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -2;
  opacity: 1;
}

.app {
  min-height: 100vh;
  position: relative;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

.content-wrapper {
  position: relative;
  z-index: 10;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  width: 100%;
  overflow-x: hidden;
}

.terminal-header {
  text-align: center;
  margin-bottom: 3rem;
  position: relative;
}
.terminal-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(transparent 50%, rgba(0, 255, 0, 0.03) 50%);
  background-size: 100% 4px;
  pointer-events: none;
  z-index: 1;
}
.terminal-header {
  border-radius: 8px;
  box-shadow: inset 0 0 100px rgba(0, 255, 0, 0.1), 0 0 50px rgba(0, 255, 0, 0.2);
  background: rgba(26, 26, 26, 0.9);
  padding: 2rem;
  border: 2px solid #ff0080;
}

.ascii-art {
  margin-bottom: 1rem;
}
.ascii-art .ascii-name {
  color: #ff0080;
  font-size: 0.7rem;
  text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
  animation: pulse-glow 3s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% {
    text-shadow: 0 0 5px #ff0080, 0 0 10px #ff0080;
  }
  50% {
    text-shadow: 0 0 20px #ff0080, 0 0 30px #ff0080, 0 0 40px #ff0080;
  }
}
.terminal-prompt {
  font-size: 1.1rem;
  margin-bottom: 1rem;
}
.terminal-prompt .prompt-user {
  color: #00ffff;
}
.terminal-prompt .prompt-separator {
  color: #ffffff;
}
.terminal-prompt .prompt-path {
  color: #ffff00;
}
.terminal-prompt .prompt-symbol {
  color: #ffffff;
}
.terminal-prompt .cursor {
  color: #ff0080;
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 50% {
    opacity: 1;
  }
  51%, 100% {
    opacity: 0;
  }
}
.tagline .comment {
  color: #666666;
  font-style: italic;
}

.resume-download {
  margin: 1.5rem 0;
}
.resume-download .download-btn {
  display: inline-block;
  background: transparent;
  border: 2px solid #ff0080;
  color: #ff0080;
  padding: 0.8rem 1.5rem;
  font-family: "Fira Code", "JetBrains Mono", "Courier New", monospace;
  font-size: 1rem;
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.3s ease;
  text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
}
.resume-download .download-btn:hover {
  background: #ff0080;
  color: #000011;
  box-shadow: 0 0 20px #ff0080;
  transform: translateY(-2px);
}
.resume-download .download-btn:active {
  transform: translateY(0);
}

.terminal-nav {
  margin-top: 1.5rem;
}
.terminal-nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
}
.terminal-nav .nav-command {
  color: #00ffff;
  text-decoration: none;
  padding: 0.5rem 1rem;
  border: 1px solid #00ffff;
  border-radius: 4px;
  transition: all 0.3s ease;
}
.terminal-nav .nav-command:hover {
  background: #00ffff;
  color: #000011;
  text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
  transform: translateY(-2px);
}

.terminal-section {
  margin-bottom: 4rem;
  position: relative;
}
.terminal-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(transparent 50%, rgba(0, 255, 0, 0.03) 50%);
  background-size: 100% 4px;
  pointer-events: none;
  z-index: 1;
}
.terminal-section {
  border-radius: 8px;
  box-shadow: inset 0 0 100px rgba(0, 255, 0, 0.1), 0 0 50px rgba(0, 255, 0, 0.2);
  background: rgba(26, 26, 26, 0.8);
  border: 1px solid #cc0066;
  border-radius: 8px;
  overflow: hidden;
}

.section-header {
  background: #110022;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #cc0066;
}
.section-header .prompt {
  color: #00ffff;
  margin-right: 1rem;
}
.section-header .command {
  color: #ffff00;
}

.section-content {
  padding: 1.5rem;
}
.section-content .about-content,
.section-content .skills-content,
.section-content .projects-intro,
.section-content .contact-content {
  background: #110022;
  border: 1px solid #ff0080;
  border-radius: 4px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  font-family: "Fira Code", "JetBrains Mono", "Courier New", monospace;
  line-height: 1.6;
  color: #cccccc;
}
.section-content .about-content h2,
.section-content .skills-content h2,
.section-content .projects-intro h2,
.section-content .contact-content h2 {
  color: #ff0080;
  font-size: 1.3rem;
  margin-bottom: 1rem;
  text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
}
.section-content .about-content h3,
.section-content .skills-content h3,
.section-content .projects-intro h3,
.section-content .contact-content h3 {
  color: #00ffff;
  font-size: 1.1rem;
  margin: 1.5rem 0 0.75rem 0;
  text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
}
.section-content .about-content p,
.section-content .skills-content p,
.section-content .projects-intro p,
.section-content .contact-content p {
  margin-bottom: 1rem;
  line-height: 1.6;
}
.section-content .about-content ul,
.section-content .skills-content ul,
.section-content .projects-intro ul,
.section-content .contact-content ul {
  list-style-type: disc;
  margin-left: 1.5rem;
  margin-bottom: 1.5rem;
}
.section-content .about-content ul li,
.section-content .skills-content ul li,
.section-content .projects-intro ul li,
.section-content .contact-content ul li {
  margin-bottom: 0.5rem;
  line-height: 1.5;
  color: #cccccc;
}
.section-content .about-content .online-links .inline-link,
.section-content .skills-content .online-links .inline-link,
.section-content .projects-intro .online-links .inline-link,
.section-content .contact-content .online-links .inline-link {
  color: #ff0080;
  text-decoration: none;
  font-weight: bold;
  position: relative;
  transition: all 0.3s ease;
}
.section-content .about-content .online-links .inline-link:hover,
.section-content .skills-content .online-links .inline-link:hover,
.section-content .projects-intro .online-links .inline-link:hover,
.section-content .contact-content .online-links .inline-link:hover {
  text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
}
.section-content .about-content .online-links .inline-link:hover::after,
.section-content .skills-content .online-links .inline-link:hover::after,
.section-content .projects-intro .online-links .inline-link:hover::after,
.section-content .contact-content .online-links .inline-link:hover::after {
  content: " →";
  color: #ffff00;
  animation: blink 0.8s infinite;
}
.section-content .about-content .online-links .inline-link::before,
.section-content .skills-content .online-links .inline-link::before,
.section-content .projects-intro .online-links .inline-link::before,
.section-content .contact-content .online-links .inline-link::before {
  content: "[";
  color: #cc0066;
}
.section-content .about-content .online-links .inline-link::after,
.section-content .skills-content .online-links .inline-link::after,
.section-content .projects-intro .online-links .inline-link::after,
.section-content .contact-content .online-links .inline-link::after {
  content: "]";
  color: #cc0066;
}
.section-content .about-content .call-to-action,
.section-content .skills-content .call-to-action,
.section-content .projects-intro .call-to-action,
.section-content .contact-content .call-to-action {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid #cc0066;
}
.section-content .about-content div,
.section-content .skills-content div,
.section-content .projects-intro div,
.section-content .contact-content div {
  white-space: pre-line;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.section-content .about-content div strong,
.section-content .skills-content div strong,
.section-content .projects-intro div strong,
.section-content .contact-content div strong {
  color: #ff0080;
}

.code-block {
  color: #cccccc;
  white-space: pre-wrap;
  line-height: 1.6;
}
.code-block .rust-keyword {
  color: #ff79c6;
}
.code-block .rust-string {
  color: #f1fa8c;
}
.code-block .rust-comment {
  color: #666666;
}
.code-block .rust-type {
  color: #8be9fd;
}

.file-listing {
  color: #cccccc;
  line-height: 1.8;
}
.file-listing .file-executable {
  color: #ff0080;
}
.file-listing .file-directory {
  color: #8be9fd;
}
.file-listing .file-size {
  color: #ffff00;
}

.git-log {
  color: #cccccc;
  line-height: 1.6;
}
.git-log .git-hash {
  color: #ffff00;
}
.git-log .git-branch {
  color: #ff0080;
}
.git-log .git-merge {
  color: #ff79c6;
}

.project-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.project-card {
  background: #110022;
  border: 1px solid #cc0066;
  border-radius: 6px;
  padding: 1.5rem;
  transition: all 0.3s ease;
}
.project-card:hover {
  border-color: #ff0080;
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 255, 0, 0.1);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.card-header .file-icon {
  font-size: 1.5rem;
}
.card-header .project-name {
  color: #ff0080;
  font-weight: bold;
  flex: 1;
}
.card-header .language-tag {
  color: #ffff00;
  font-size: 0.8rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid #ffff00;
  border-radius: 4px;
}

.card-content p {
  color: #cccccc;
  margin-bottom: 1rem;
}

.tech-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tech {
  color: #00ffff;
  font-size: 0.8rem;
  padding: 0.25rem 0.5rem;
  background: rgba(0, 204, 0, 0.1);
  border-radius: 4px;
}

.project-links {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.project-link {
  color: #ff0080;
  text-decoration: none;
  padding: 0.5rem 1rem;
  border: 1px solid #ff0080;
  border-radius: 4px;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.project-link:hover {
  background: #ff0080;
  color: #000011;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 255, 0, 0.3);
}
.project-link:active {
  transform: translateY(0);
}

.contact-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.contact-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: #110022;
  border: 1px solid #cc0066;
  border-radius: 6px;
  color: #ff0080;
  text-decoration: none;
  transition: all 0.3s ease;
}
.contact-link:hover {
  border-color: #ff0080;
  background: rgba(0, 255, 0, 0.05);
  transform: translateX(10px);
}
.contact-link .link-icon {
  font-size: 1.5rem;
}
.contact-link .link-text {
  font-family: "Fira Code", "JetBrains Mono", "Courier New", monospace;
}

.spotify-widget {
  margin: 2rem 0;
  padding: 1.5rem;
  background: #110022;
  border: 1px solid #cc0066;
  border-radius: 8px;
  position: relative;
}
.spotify-widget::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(transparent 50%, rgba(0, 255, 0, 0.03) 50%);
  background-size: 100% 4px;
  pointer-events: none;
  z-index: 1;
}
.spotify-widget {
  border-radius: 8px;
  box-shadow: inset 0 0 100px rgba(0, 255, 0, 0.1), 0 0 50px rgba(0, 255, 0, 0.2);
}
.spotify-widget .spotify-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  color: #ff0080;
  font-family: "Fira Code", "JetBrains Mono", "Courier New", monospace;
  font-weight: bold;
  text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
}
.spotify-widget .spotify-header .spotify-icon {
  font-size: 1.2rem;
  animation: pulse 2s infinite;
}
.spotify-widget .spotify-header .spotify-title {
  font-size: 1.1rem;
  flex: 1;
}
.spotify-widget .spotify-header .spotify-status {
  font-size: 0.8rem;
  color: #ffff00;
  animation: blink 1.5s infinite;
}
.spotify-widget .spotify-content .spotify-image {
  width: 100%;
  max-width: 400px;
  height: auto;
  border-radius: 6px;
  border: 1px solid #cc0066;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.spotify-widget .spotify-content .spotify-image.loaded {
  opacity: 1;
}
.spotify-widget .spotify-content .spotify-image:hover {
  border-color: #ff0080;
  box-shadow: 0 0 20px rgba(0, 255, 0, 0.3);
}
.spotify-widget .spotify-content .spotify-fallback .spotify-placeholder {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}
.spotify-widget .spotify-content .spotify-fallback .spotify-placeholder .spotify-album-art {
  width: 80px;
  height: 80px;
  background: rgba(0, 255, 0, 0.1);
  border: 1px solid #cc0066;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.spotify-widget .spotify-content .spotify-fallback .spotify-placeholder .spotify-album-art .spotify-icon-large {
  font-size: 2rem;
  color: #cccccc;
  opacity: 0.7;
}
.spotify-widget .spotify-content .spotify-fallback .spotify-placeholder .spotify-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.spotify-widget .spotify-content .spotify-fallback .spotify-placeholder .spotify-info .spotify-track {
  font-family: "Fira Code", "JetBrains Mono", "Courier New", monospace;
  font-weight: bold;
  color: #ff0080;
  margin-bottom: 0.25rem;
}
.spotify-widget .spotify-content .spotify-fallback .spotify-placeholder .spotify-info .spotify-artist {
  font-family: "Fira Code", "JetBrains Mono", "Courier New", monospace;
  color: #cccccc;
  font-size: 0.9rem;
}
.spotify-widget .spotify-content .spotify-fallback .spotify-actions {
  border-top: 1px solid #cc0066;
  padding-top: 1rem;
}
.spotify-widget .spotify-content .spotify-fallback .spotify-actions .spotify-profile-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #ff0080;
  text-decoration: none;
  font-family: "Fira Code", "JetBrains Mono", "Courier New", monospace;
  padding: 0.5rem 1rem;
  border: 1px solid #cc0066;
  border-radius: 4px;
  transition: all 0.3s ease;
  margin-bottom: 0.5rem;
}
.spotify-widget .spotify-content .spotify-fallback .spotify-actions .spotify-profile-link:hover {
  border-color: #ff0080;
  background: rgba(0, 255, 0, 0.1);
  text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
}
.spotify-widget .spotify-content .spotify-fallback .spotify-actions .spotify-note {
  display: block;
  font-family: "Fira Code", "JetBrains Mono", "Courier New", monospace;
  font-size: 0.8rem;
  color: #666666;
  margin-top: 0.5rem;
  font-style: italic;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.1);
  }
}
.streaming-content {
  margin-bottom: 2rem;
}
.streaming-content h2, .streaming-content h3 {
  color: #ff0080;
  text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
  margin-bottom: 1rem;
}
.streaming-content p {
  margin-bottom: 1rem;
  line-height: 1.6;
}

.twitch-widget {
  margin: 2rem 0;
  padding: 1.5rem;
  background: #110022;
  border: 1px solid #cc0066;
  border-radius: 8px;
  position: relative;
}
.twitch-widget::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(transparent 50%, rgba(0, 255, 0, 0.03) 50%);
  background-size: 100% 4px;
  pointer-events: none;
  z-index: 1;
}
.twitch-widget {
  border-radius: 8px;
  box-shadow: inset 0 0 100px rgba(0, 255, 0, 0.1), 0 0 50px rgba(0, 255, 0, 0.2);
}
.twitch-widget .twitch-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  color: #9146ff;
  font-family: "Fira Code", "JetBrains Mono", "Courier New", monospace;
  font-weight: bold;
  text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
}
.twitch-widget .twitch-header .twitch-icon {
  font-size: 1.2rem;
  animation: pulse 2s infinite;
}
.twitch-widget .twitch-header .twitch-title {
  font-size: 1.1rem;
  flex: 1;
}
.twitch-widget .twitch-header .stream-status {
  font-size: 0.8rem;
  color: #ff0000;
  animation: blink 1.5s infinite;
  background: rgba(255, 0, 0, 0.1);
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  border: 1px solid #ff0000;
}
.twitch-widget .twitch-embed-container {
  margin: 1rem 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #cc0066;
}
.twitch-widget .twitch-embed-container iframe {
  width: 100%;
  height: 400px;
  border: none;
  display: block;
}
.twitch-widget .twitch-actions {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2rem;
  margin-top: 1rem;
  align-items: start;
}
.twitch-widget .twitch-actions .twitch-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #9146ff;
  text-decoration: none;
  font-family: "Fira Code", "JetBrains Mono", "Courier New", monospace;
  padding: 0.8rem 1.5rem;
  border: 1px solid #9146ff;
  border-radius: 4px;
  transition: all 0.3s ease;
  white-space: nowrap;
}
.twitch-widget .twitch-actions .twitch-link:hover {
  background: rgba(145, 70, 255, 0.1);
  text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
  transform: translateX(5px);
}
.twitch-widget .twitch-actions .stream-info h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1rem;
}
.twitch-widget .twitch-actions .stream-info ul {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
}
.twitch-widget .twitch-actions .stream-info ul li {
  margin-bottom: 0.3rem;
  position: relative;
  padding-left: 1.5rem;
}
.twitch-widget .twitch-actions .stream-info ul li::before {
  content: "▶";
  position: absolute;
  left: 0;
  color: #9146ff;
  font-size: 0.8rem;
}

.streaming-schedule {
  margin-top: 2rem;
  padding: 1.5rem;
  background: rgba(145, 70, 255, 0.05);
  border: 1px solid #9146ff;
  border-radius: 8px;
}
.streaming-schedule h3 {
  margin-top: 0;
  color: #9146ff;
  text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
}
.streaming-schedule .schedule-grid {
  display: grid;
  gap: 1rem;
  margin-bottom: 1rem;
}
.streaming-schedule .schedule-grid .schedule-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8rem;
  background: #110022;
  border: 1px solid #cc0066;
  border-radius: 4px;
  font-family: "Fira Code", "JetBrains Mono", "Courier New", monospace;
}
.streaming-schedule .schedule-grid .schedule-item .day {
  font-weight: bold;
  color: #ff0080;
}
.streaming-schedule .schedule-grid .schedule-item .time {
  color: #ffff00;
  font-size: 0.9rem;
}
.streaming-schedule .schedule-note {
  font-size: 0.8rem;
  color: #666666;
  font-style: italic;
  margin: 0;
}

@media (max-width: 768px) {
  .twitch-actions {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .twitch-actions .twitch-link {
    justify-self: center;
  }
  .twitch-embed-container iframe {
    height: 250px;
  }
  .schedule-item {
    flex-direction: column !important;
    gap: 0.5rem;
    text-align: center;
  }
}
.terminal-container {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 600px;
  max-height: 400px;
  background: #000011;
  border: 2px solid #ff0080;
  border-radius: 8px;
  position: relative;
}
.terminal-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(transparent 50%, rgba(0, 255, 0, 0.03) 50%);
  background-size: 100% 4px;
  pointer-events: none;
  z-index: 1;
}
.terminal-container {
  border-radius: 8px;
  box-shadow: inset 0 0 100px rgba(0, 255, 0, 0.1), 0 0 50px rgba(0, 255, 0, 0.2);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
  z-index: 1000;
}

.terminal-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #110022;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #cc0066;
}

.terminal-controls {
  display: flex;
  gap: 0.5rem;
}
.terminal-controls .control {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.terminal-controls .control.close {
  background: #ff5f56;
}
.terminal-controls .control.minimize {
  background: #ffbd2e;
}
.terminal-controls .control.maximize {
  background: #27ca3f;
}

.terminal-title {
  color: #cccccc;
  font-size: 0.9rem;
}

.terminal-content {
  height: 300px;
  overflow-y: auto;
  padding: 1rem;
}

.terminal-output {
  margin-bottom: 1rem;
}

.terminal-line {
  color: #cccccc;
  margin-bottom: 0.2rem;
}
.terminal-line:empty {
  height: 1em;
}

.terminal-input-line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.terminal-input-line .terminal-prompt {
  color: #00ffff;
  white-space: nowrap;
}
.terminal-input-line .terminal-input {
  flex: 1;
  background: transparent;
  border: none;
  color: #ff0080;
  font-family: "Fira Code", "JetBrains Mono", "Courier New", monospace;
  font-size: 1rem;
  outline: none;
}
.terminal-input-line .terminal-input::placeholder {
  color: #666666;
}
.terminal-input-line .terminal-input[type=password] {
  color: transparent;
  text-shadow: none;
}
.terminal-input-line .terminal-cursor {
  color: #ff0080;
  animation: blink 1s infinite;
}

.skill-highlight {
  margin-top: 2rem;
  padding: 1rem;
  background: rgba(0, 255, 0, 0.05);
  border-left: 4px solid #ff0080;
}
.skill-highlight .comment {
  color: #666666;
  font-style: italic;
}

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
  .content-wrapper {
    padding: 0.5rem;
    max-width: 100vw;
    overflow-x: hidden;
  }
  .ascii-art .ascii-name {
    font-size: 0.3rem;
    line-height: 1.1;
  }
  .terminal-nav ul {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  .terminal-container {
    position: static;
    width: 100%;
    margin-top: 2rem;
  }
  .project-cards {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .contact-links {
    grid-template-columns: 1fr;
  }
  #snake-game .section-header .prompt, #snake-game .section-header .command {
    font-size: 0.8rem;
    line-height: 1.2;
  }
  #snake-game .game-container {
    padding: 0.5rem;
  }
  #snake-game .game-info {
    flex-direction: column;
    gap: 0.5rem;
  }
  #snake-game .game-info .score, #snake-game .game-info .status {
    text-align: center;
    font-size: 0.9rem;
  }
  #snake-game .game-canvas {
    width: 100% !important;
    max-width: 350px !important;
    height: auto !important;
    border-width: 1px !important;
  }
  #snake-game .game-controls .controls-info h4 {
    font-size: 1rem;
  }
  #snake-game .game-controls .controls-info ul {
    font-size: 0.8rem;
    padding-left: 1rem;
  }
  #snake-game .game-controls .controls-info ul li {
    margin: 0.25rem 0;
    word-wrap: break-word;
  }
  #snake-game .game-controls .game-buttons .restart-btn {
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
  }
  #snake-game .leaderboards-always-visible {
    flex-direction: column !important;
    gap: 1rem !important;
    margin-top: 1rem !important;
  }
  #snake-game .leaderboards-always-visible .leaderboard-panel {
    min-width: auto !important;
    width: 100% !important;
  }
  #snake-game .leaderboards-always-visible .leaderboard-panel h4 {
    font-size: 1rem;
    text-align: center;
    margin-bottom: 0.5rem;
  }
  #snake-game .leaderboards-always-visible .leaderboard-panel .leaderboard-table {
    font-size: 0.8rem;
    width: 100%;
  }
  #snake-game .leaderboards-always-visible .leaderboard-panel .leaderboard-table th, #snake-game .leaderboards-always-visible .leaderboard-panel .leaderboard-table td {
    padding: 0.25rem 0.5rem;
    text-align: center;
  }
  #snake-game .leaderboards-always-visible .leaderboard-panel .leaderboard-table th:first-child, #snake-game .leaderboards-always-visible .leaderboard-panel .leaderboard-table td:first-child {
    width: 15%;
  }
  #snake-game .leaderboards-always-visible .leaderboard-panel .leaderboard-table th:nth-child(2), #snake-game .leaderboards-always-visible .leaderboard-panel .leaderboard-table td:nth-child(2) {
    width: 35%;
  }
  #snake-game .leaderboards-always-visible .leaderboard-panel .leaderboard-table th:last-child, #snake-game .leaderboards-always-visible .leaderboard-panel .leaderboard-table td:last-child {
    width: 50%;
    text-align: right;
  }
  #snake-game .initials-modal-overlay {
    padding: 1rem;
  }
  #snake-game .initials-modal-overlay .modal-content {
    width: 90%;
    max-width: 300px;
    padding: 1rem;
  }
  #snake-game .initials-modal-overlay .modal-content h3 {
    font-size: 1.1rem;
    margin-bottom: 1rem;
  }
  #snake-game .initials-modal-overlay .modal-content label {
    font-size: 0.9rem;
    display: block;
    margin-bottom: 0.5rem;
  }
  #snake-game .initials-modal-overlay .modal-content input {
    width: 100%;
    font-size: 1rem;
    padding: 0.5rem;
    margin-bottom: 1rem;
  }
  #snake-game .initials-modal-overlay .modal-content button {
    width: 100%;
    font-size: 1rem;
    padding: 0.75rem;
  }
  .terminal-section {
    margin: 1rem 0;
  }
  .terminal-section .section-header {
    margin-bottom: 1rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  .about-content .intro-text {
    font-size: 0.9rem;
    line-height: 1.5;
  }
  .skills-grid {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.75rem;
  }
  .skills-grid .skill-item {
    font-size: 0.8rem;
    padding: 0.5rem;
  }
  .project-card .project-title {
    font-size: 1.1rem;
  }
  .project-card .project-description {
    font-size: 0.85rem;
    line-height: 1.4;
  }
  .project-card .tech-stack {
    font-size: 0.75rem;
  }
  .project-card .tech-stack .tech-item {
    padding: 0.2rem 0.4rem;
    margin: 0.1rem;
  }
  .project-card .project-links {
    gap: 0.5rem;
    flex-direction: column;
  }
  .project-card .project-links .project-link {
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem;
    text-align: center;
  }
  .terminal-container .terminal-header .terminal-title {
    font-size: 0.8rem;
  }
  .terminal-container .terminal-body {
    font-size: 0.8rem;
  }
  .terminal-container .terminal-body .command-line {
    flex-wrap: wrap;
  }
  .terminal-container .terminal-body .command-line .prompt {
    word-break: break-all;
  }
}
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #000011;
}

::-webkit-scrollbar-thumb {
  background: #cc0066;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #00ffff;
}

#snake-game {
  position: relative;
  z-index: 5;
}
#snake-game .game-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  position: relative;
  z-index: 5;
}
#snake-game .game-info {
  display: flex;
  justify-content: space-between;
  width: 600px;
  max-width: 100%;
  font-family: "Fira Code", "JetBrains Mono", "Courier New", monospace;
  font-size: 1.1rem;
}
#snake-game .game-info .score .label {
  color: #cccccc;
}
#snake-game .game-info .score .value {
  color: #ff0080;
  text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
}
#snake-game .game-info .status .playing {
  color: #ff0080;
  text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
}
#snake-game .game-info .status .paused {
  color: #ffff00;
  text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
}
#snake-game .game-info .status .game-over {
  color: #ff0000;
  text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
}
#snake-game .game-canvas {
  position: relative;
}
#snake-game .game-canvas::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(transparent 50%, rgba(0, 255, 0, 0.03) 50%);
  background-size: 100% 4px;
  pointer-events: none;
  z-index: 1;
}
#snake-game .game-canvas {
  border-radius: 8px;
  box-shadow: inset 0 0 100px rgba(0, 255, 0, 0.1), 0 0 50px rgba(0, 255, 0, 0.2);
  border: 2px solid #ff0080;
  background: #000011;
  max-width: 100%;
  height: auto;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  position: relative;
  z-index: 10;
}
#snake-game .game-canvas:focus {
  outline: none;
  border-color: #ffff00;
  box-shadow: inset 0 0 100px rgba(0, 255, 0, 0.1), 0 0 50px rgba(0, 255, 0, 0.2), 0 0 20px rgba(255, 176, 0, 0.5);
}
#snake-game .game-canvas:hover {
  border-color: rgb(255, 51, 153.4);
}
#snake-game .game-controls {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  width: 600px;
  max-width: 100%;
}
#snake-game .game-controls .controls-info {
  flex: 1;
}
#snake-game .game-controls .controls-info h4 {
  color: #ff0080;
  margin-bottom: 0.5rem;
  text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
}
#snake-game .game-controls .controls-info ul {
  list-style: none;
}
#snake-game .game-controls .controls-info ul li {
  color: #cccccc;
  margin-bottom: 0.3rem;
  font-family: "Fira Code", "JetBrains Mono", "Courier New", monospace;
  font-size: 0.9rem;
}
#snake-game .game-controls .controls-info ul li::before {
  content: "> ";
  color: #ff0080;
}
#snake-game .game-controls .restart-btn {
  background: transparent;
  border: 2px solid #ff0080;
  color: #ff0080;
  padding: 0.5rem 1rem;
  font-family: "Fira Code", "JetBrains Mono", "Courier New", monospace;
  cursor: pointer;
  transition: all 0.3s ease;
  text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
}
#snake-game .game-controls .restart-btn:hover {
  background: #ff0080;
  color: #000011;
  box-shadow: 0 0 20px #ff0080;
}

.mobile-controls {
  display: none;
  margin: 1.5rem 0;
  padding: 1rem;
  background: rgba(0, 255, 0, 0.05);
  border: 1px solid #cc0066;
  border-radius: 8px;
}
.mobile-controls .mobile-control-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  max-width: 200px;
  margin: 0 auto;
}
.mobile-controls .mobile-control-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
}
.mobile-controls .mobile-control-btn {
  width: 60px;
  height: 60px;
  background: #000011;
  border: 2px solid #ff0080;
  border-radius: 8px;
  color: #ff0080;
  font-size: 1.5rem;
  font-family: "Fira Code", "JetBrains Mono", "Courier New", monospace;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
}
.mobile-controls .mobile-control-btn:hover, .mobile-controls .mobile-control-btn:active {
  background: rgba(0, 255, 0, 0.1);
  border-color: #00ffff;
  transform: scale(0.95);
  box-shadow: 0 0 10px #ff0080, inset 0 0 20px rgba(0, 255, 0, 0.1);
}
.mobile-controls .mobile-control-btn:active {
  transform: scale(0.9);
  background: rgba(0, 255, 0, 0.2);
}
.mobile-controls .mobile-control-btn {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.mobile-controls .pause-btn {
  background: rgba(255, 176, 0, 0.1);
  border-color: #ffff00;
  color: #ffff00;
}
.mobile-controls .pause-btn:hover, .mobile-controls .pause-btn:active {
  background: rgba(255, 176, 0, 0.2);
  border-color: #ffff33;
  box-shadow: 0 0 10px #ffff00, inset 0 0 20px rgba(255, 176, 0, 0.1);
}

@media (max-width: 768px) {
  .mobile-controls {
    display: block;
  }
  #snake-game .game-controls {
    margin-bottom: 1rem;
  }
  #snake-game .game-controls .controls-info ul {
    font-size: 0.7rem;
  }
  #snake-game .game-controls .controls-info ul li {
    margin: 0.2rem 0;
  }
}
@media (max-width: 480px) {
  .mobile-controls {
    margin: 1rem 0;
    padding: 0.75rem;
  }
  .mobile-controls .mobile-control-btn {
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
  }
  .mobile-controls .mobile-control-grid {
    max-width: 170px;
    gap: 0.4rem;
  }
  .mobile-controls .mobile-control-row {
    gap: 0.4rem;
  }
}
#leaderboard .leaderboard-container {
  max-width: 600px;
  margin: 0 auto;
}
#leaderboard .leaderboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}
#leaderboard .leaderboard-header .leaderboard-title {
  color: #ff0080;
  font-size: 1.5rem;
  text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
}
#leaderboard .leaderboard-header .mode-toggle {
  display: flex;
  gap: 0.5rem;
}
#leaderboard .leaderboard-header .mode-toggle .mode-btn {
  background: transparent;
  border: 2px solid #cc0066;
  color: #cccccc;
  padding: 0.4rem 0.8rem;
  font-family: "Fira Code", "JetBrains Mono", "Courier New", monospace;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
}
#leaderboard .leaderboard-header .mode-toggle .mode-btn.active {
  border-color: #ff0080;
  color: #ff0080;
  background: rgba(0, 255, 0, 0.1);
  text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
}
#leaderboard .leaderboard-header .mode-toggle .mode-btn:disabled {
  cursor: default;
}
#leaderboard .leaderboard-header .mode-toggle .mode-btn:not(:disabled):hover {
  border-color: #00ffff;
  color: #00ffff;
}
#leaderboard .loading {
  text-align: center;
  color: #ffff00;
  padding: 2rem;
  font-family: "Fira Code", "JetBrains Mono", "Courier New", monospace;
  text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
}
#leaderboard .no-scores {
  text-align: center;
  color: #cccccc;
  padding: 2rem;
}
#leaderboard .no-scores p {
  margin-bottom: 0.5rem;
}
#leaderboard .scores-list .scores-header {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 1rem;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  border-bottom: 2px solid #cc0066;
  font-family: "Fira Code", "JetBrains Mono", "Courier New", monospace;
  font-weight: bold;
  color: #ffff00;
  font-size: 0.9rem;
}
#leaderboard .scores-list .scores-header .rank-header,
#leaderboard .scores-list .scores-header .name-header,
#leaderboard .scores-list .scores-header .score-header,
#leaderboard .scores-list .scores-header .date-header {
  text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
}
#leaderboard .scores-list .scores-header .score-header,
#leaderboard .scores-list .scores-header .date-header {
  text-align: right;
}
#leaderboard .scores-list .score-entry {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 1rem;
  padding: 0.5rem;
  margin-bottom: 0.3rem;
  border-left: 3px solid transparent;
  transition: all 0.3s ease;
  font-family: "Fira Code", "JetBrains Mono", "Courier New", monospace;
}
#leaderboard .scores-list .score-entry.top-three {
  border-left-color: #ff0080;
  background: rgba(0, 255, 0, 0.05);
}
#leaderboard .scores-list .score-entry:hover {
  background: rgba(0, 255, 0, 0.1);
}
#leaderboard .scores-list .score-entry .rank {
  color: #ffff00;
  font-weight: bold;
  min-width: 3rem;
}
#leaderboard .scores-list .score-entry .name {
  color: #ff0080;
  text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
}
#leaderboard .scores-list .score-entry .score {
  color: #ffffff;
  font-weight: bold;
  text-align: right;
}
#leaderboard .scores-list .score-entry .date {
  color: #cccccc;
  font-size: 0.9rem;
  text-align: right;
}
#leaderboard .score-form {
  background: rgba(0, 255, 0, 0.1);
  border: 2px solid #ff0080;
  padding: 1.5rem;
  margin: 1rem 0;
  text-align: center;
  position: relative;
}
#leaderboard .score-form::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(transparent 50%, rgba(0, 255, 0, 0.03) 50%);
  background-size: 100% 4px;
  pointer-events: none;
  z-index: 1;
}
#leaderboard .score-form {
  border-radius: 8px;
  box-shadow: inset 0 0 100px rgba(0, 255, 0, 0.1), 0 0 50px rgba(0, 255, 0, 0.2);
}
#leaderboard .score-form h4 {
  color: #ff0080;
  margin-bottom: 1rem;
  text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
}
#leaderboard .score-form p {
  color: #ffffff;
  margin-bottom: 1rem;
}
#leaderboard .score-form .form-group {
  margin-bottom: 1rem;
  text-align: left;
}
#leaderboard .score-form .form-group label {
  display: block;
  color: #cccccc;
  margin-bottom: 0.5rem;
  font-family: "Fira Code", "JetBrains Mono", "Courier New", monospace;
}
#leaderboard .score-form .form-group .name-input {
  background: #000011;
  border: 2px solid #cc0066;
  color: #ff0080;
  padding: 0.5rem;
  font-family: "Fira Code", "JetBrains Mono", "Courier New", monospace;
  font-size: 1rem;
  width: 200px;
  max-width: 100%;
  text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
}
#leaderboard .score-form .form-group .name-input:focus {
  outline: none;
  border-color: #ff0080;
  box-shadow: 0 0 10px #ff0080;
}
#leaderboard .score-form .form-group .checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  margin-bottom: 0.5rem;
}
#leaderboard .score-form .form-group .checkbox-label .global-checkbox {
  appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid #cc0066;
  background: #000011;
  cursor: pointer;
  position: relative;
}
#leaderboard .score-form .form-group .checkbox-label .global-checkbox:checked {
  border-color: #ff0080;
  background: #ff0080;
}
#leaderboard .score-form .form-group .checkbox-label .global-checkbox:checked::after {
  content: "✓";
  position: absolute;
  top: -2px;
  left: 2px;
  color: #000011;
  font-size: 12px;
  font-weight: bold;
}
#leaderboard .score-form .form-group .checkbox-label .global-checkbox:focus {
  outline: none;
  box-shadow: 0 0 5px #ff0080;
}
#leaderboard .score-form .form-group .checkbox-label .checkbox-text {
  color: #ff0080;
  font-family: "Fira Code", "JetBrains Mono", "Courier New", monospace;
  text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
}
#leaderboard .score-form .form-group .checkbox-help {
  font-size: 0.8rem;
  color: #cccccc;
  font-style: italic;
  margin-left: 1.5rem;
}
#leaderboard .score-form .form-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
}
#leaderboard .score-form .form-buttons button {
  background: transparent;
  border: 2px solid;
  padding: 0.5rem 1rem;
  font-family: "Fira Code", "JetBrains Mono", "Courier New", monospace;
  cursor: pointer;
  transition: all 0.3s ease;
}
#leaderboard .score-form .form-buttons button.submit-btn {
  border-color: #ff0080;
  color: #ff0080;
  text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
}
#leaderboard .score-form .form-buttons button.submit-btn:hover {
  background: #ff0080;
  color: #000011;
  box-shadow: 0 0 20px #ff0080;
}
#leaderboard .score-form .form-buttons button.cancel-btn {
  border-color: #ff0000;
  color: #ff0000;
}
#leaderboard .score-form .form-buttons button.cancel-btn:hover {
  background: #ff0000;
  color: #ffffff;
}
#leaderboard .leaderboard-info {
  text-align: center;
  margin-top: 2rem;
  color: #cccccc;
  font-style: italic;
  font-family: "Fira Code", "JetBrains Mono", "Courier New", monospace;
}
#leaderboard .leaderboard-info p {
  margin-bottom: 0.3rem;
  font-size: 0.9rem;
}
#leaderboard .leaderboard-info p:first-child {
  color: #ffff00;
}
#leaderboard .leaderboard-info p:nth-child(2) {
  color: #00ffff;
}
@media (max-width: 768px) {
  #leaderboard .leaderboard-header {
    flex-direction: column;
    text-align: center;
  }
  #leaderboard .scores-list .scores-header,
  #leaderboard .scores-list .score-entry {
    grid-template-columns: auto 1fr auto;
  }
  #leaderboard .scores-list .scores-header .date,
  #leaderboard .scores-list .scores-header .date-header,
  #leaderboard .scores-list .score-entry .date,
  #leaderboard .scores-list .score-entry .date-header {
    display: none;
  }
}

.counter-display {
  position: relative;
}
.counter-display::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(transparent 50%, rgba(0, 255, 0, 0.03) 50%);
  background-size: 100% 4px;
  pointer-events: none;
  z-index: 1;
}
.counter-display {
  border-radius: 8px;
  box-shadow: inset 0 0 100px rgba(0, 255, 0, 0.1), 0 0 50px rgba(0, 255, 0, 0.2);
  background: #000011;
  border: 2px solid #ff0080;
  padding: 1rem;
  margin: 1rem 0;
  font-family: "Fira Code", "JetBrains Mono", "Courier New", monospace;
  text-align: center;
  position: relative;
}
.counter-display .counter-label {
  color: #ffff00;
  font-size: 0.9rem;
  font-weight: bold;
  letter-spacing: 2px;
  margin-bottom: 0.5rem;
  text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
}
.counter-display .counter-value {
  color: #ff0080;
  font-size: 2rem;
  font-weight: bold;
  letter-spacing: 3px;
  text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
}
.counter-display .counter-value .loading {
  color: #00ffff;
  animation: pulse 1.5s infinite;
}
.counter-display .counter-value .number {
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 5px #ff0080, 0 0 10px #ff0080, 0 0 20px #ff0080;
}
.counter-display::before {
  content: "╔═══════════════════════════════════╗";
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  color: #ff0080;
  font-size: 0.8rem;
  white-space: nowrap;
  z-index: 2;
}
.counter-display::after {
  content: "╚═══════════════════════════════════╝";
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  color: #ff0080;
  font-size: 0.8rem;
  white-space: nowrap;
  z-index: 2;
}

.site-counter {
  margin: 2rem auto;
  max-width: 600px;
}
.site-counter .counter-display {
  background: linear-gradient(135deg, #000011 0%, #0f0f0f 100%);
  box-shadow: inset 0 0 100px rgba(0, 255, 0, 0.1), 0 0 50px rgba(0, 255, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.5);
}

.game-counter {
  margin: 1rem 0;
}
.game-counter .counter-display {
  background: linear-gradient(135deg, #000011 0%, #001100 100%);
  border-color: #00ffff;
}
.game-counter .counter-display .counter-label {
  color: #00ffff;
}
.game-counter .counter-display .counter-value .number {
  color: #00ffff;
  text-shadow: 0 0 5px #00ffff, 0 0 10px #00ffff, 0 0 20px #00ffff;
}
.game-counter .counter-display::before, .game-counter .counter-display::after {
  color: #00ffff;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}
@media (max-width: 768px) {
  .counter-display {
    padding: 0.5rem;
    margin: 0.5rem 0;
    border-width: 1px;
  }
  .counter-display .counter-label {
    font-size: 0.7rem;
    letter-spacing: 1px;
    line-height: 1.2;
  }
  .counter-display .counter-value {
    font-size: 1.2rem;
    letter-spacing: 1px;
  }
  .counter-display::before, .counter-display::after {
    font-size: 0.5rem;
    display: none;
  }
  .site-counter {
    margin: 1rem auto;
    padding: 0 0.5rem;
  }
  .game-counter {
    margin: 0.5rem 0;
  }
}
@media (max-width: 480px) {
  .content-wrapper {
    padding: 0.25rem;
  }
  #snake-game .game-canvas {
    max-width: 280px !important;
  }
  #snake-game .leaderboards-always-visible .leaderboard-table {
    font-size: 0.7rem;
  }
  #snake-game .leaderboards-always-visible .leaderboard-table th, #snake-game .leaderboards-always-visible .leaderboard-table td {
    padding: 0.2rem 0.3rem;
  }
  #snake-game .initials-modal-overlay .modal-content {
    width: 95%;
    padding: 0.75rem;
  }
  .ascii-art .ascii-name {
    font-size: 0.25rem;
    line-height: 1;
  }
  .counter-display .counter-label {
    font-size: 0.6rem;
  }
  .counter-display .counter-value {
    font-size: 1rem;
  }
}
.blog-admin {
  background: #000011;
  color: #ff0080;
  font-family: "Fira Code", "JetBrains Mono", "Courier New", monospace;
  min-height: 100vh;
  padding: 2rem;
}
.blog-admin .blog-admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #ff0080;
}
.blog-admin .blog-admin-header h1 {
  color: #ff0080;
  margin: 0;
  font-size: 1.5rem;
}
.blog-admin .blog-admin-header .admin-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.blog-admin .blog-admin-header .admin-info span {
  color: #999999;
}
.blog-admin .blog-admin-header .admin-info .logout-btn {
  background: transparent;
  border: 1px solid #ff0080;
  color: #ff0080;
  padding: 0.5rem 1rem;
  font-family: "Fira Code", "JetBrains Mono", "Courier New", monospace;
  cursor: pointer;
  transition: all 0.2s ease;
}
.blog-admin .blog-admin-header .admin-info .logout-btn:hover {
  background: #ff0080;
  color: #000011;
}
.blog-admin .admin-actions {
  margin-bottom: 2rem;
}
.blog-admin .admin-actions .new-post-btn {
  background: transparent;
  border: 1px solid #ff0080;
  color: #ff0080;
  padding: 0.75rem 1.5rem;
  font-family: "Fira Code", "JetBrains Mono", "Courier New", monospace;
  cursor: pointer;
  transition: all 0.2s ease;
}
.blog-admin .admin-actions .new-post-btn:hover {
  background: #ff0080;
  color: #000011;
}
.blog-admin .post-editor {
  background: rgba(0, 255, 0, 0.05);
  border: 1px solid #ff0080;
  padding: 2rem;
  margin-bottom: 2rem;
}
.blog-admin .post-editor h2 {
  color: #ff0080;
  margin-top: 0;
  margin-bottom: 1.5rem;
}
.blog-admin .post-editor .form-group {
  margin-bottom: 1.5rem;
}
.blog-admin .post-editor .form-group label {
  display: block;
  color: #ff0080;
  margin-bottom: 0.5rem;
  font-weight: bold;
}
.blog-admin .post-editor .form-group .form-input, .blog-admin .post-editor .form-group .form-textarea {
  width: 100%;
  background: #000011;
  border: 1px solid #ff0080;
  color: #ff0080;
  font-family: "Fira Code", "JetBrains Mono", "Courier New", monospace;
  padding: 0.75rem;
  font-size: 0.9rem;
}
.blog-admin .post-editor .form-group .form-input:focus, .blog-admin .post-editor .form-group .form-textarea:focus {
  outline: none;
  border-color: rgb(255, 102, 178.8);
  box-shadow: 0 0 0 2px rgba(0, 255, 0, 0.2);
}
.blog-admin .post-editor .form-group .form-input::placeholder, .blog-admin .post-editor .form-group .form-textarea::placeholder {
  color: #666666;
}
.blog-admin .post-editor .form-group .form-textarea {
  resize: vertical;
  min-height: 200px;
}
.blog-admin .post-editor .form-group .content-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
  color: #999999;
}
.blog-admin .post-editor .form-group .content-stats .char-count:contains("⚠️") {
  color: #ffff00;
}
.blog-admin .post-editor .form-group .content-stats .word-count {
  opacity: 0.7;
}
.blog-admin .post-editor .form-group .checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}
.blog-admin .post-editor .form-group .checkbox-label input[type=checkbox] {
  accent-color: #ff0080;
}
.blog-admin .post-editor .form-actions .save-btn {
  background: #ff0080;
  border: none;
  color: #000011;
  padding: 0.75rem 2rem;
  font-family: "Fira Code", "JetBrains Mono", "Courier New", monospace;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
}
.blog-admin .post-editor .form-actions .save-btn:hover {
  background: rgb(255, 51, 153.4);
}
.blog-admin .posts-list h2 {
  color: #ff0080;
  margin-bottom: 1.5rem;
}
.blog-admin .posts-list .loading, .blog-admin .posts-list .no-posts {
  text-align: center;
  color: #999999;
  padding: 2rem;
  font-style: italic;
}
.blog-admin .posts-list .posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 1.5rem;
}
.blog-admin .posts-list .posts-grid .post-card {
  background: rgba(0, 255, 0, 0.05);
  border: 1px solid #ff0080;
  padding: 1.5rem;
  transition: all 0.2s ease;
}
.blog-admin .posts-list .posts-grid .post-card:hover {
  border-color: rgb(255, 102, 178.8);
  transform: translateY(-2px);
}
.blog-admin .posts-list .posts-grid .post-card .post-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}
.blog-admin .posts-list .posts-grid .post-card .post-header h3 {
  color: #ff0080;
  margin: 0;
  font-size: 1.1rem;
  flex: 1;
}
.blog-admin .posts-list .posts-grid .post-card .post-header .post-status {
  font-size: 0.8rem;
  color: #999999;
  white-space: nowrap;
  margin-left: 1rem;
}
.blog-admin .posts-list .posts-grid .post-card .post-excerpt {
  color: #999999;
  margin-bottom: 1rem;
  line-height: 1.4;
}
.blog-admin .posts-list .posts-grid .post-card .post-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.blog-admin .posts-list .posts-grid .post-card .post-meta .post-date {
  color: #666666;
  font-size: 0.8rem;
}
.blog-admin .posts-list .posts-grid .post-card .post-meta .post-tags {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.blog-admin .posts-list .posts-grid .post-card .post-meta .post-tags .tag {
  background: rgba(0, 255, 0, 0.2);
  color: #ff0080;
  padding: 0.2rem 0.5rem;
  font-size: 0.7rem;
  border-radius: 2px;
}
.blog-admin .posts-list .posts-grid .post-card .post-actions {
  display: flex;
  gap: 0.5rem;
}
.blog-admin .posts-list .posts-grid .post-card .post-actions .edit-btn, .blog-admin .posts-list .posts-grid .post-card .post-actions .delete-btn {
  background: transparent;
  border: 1px solid #ff0080;
  color: #ff0080;
  padding: 0.5rem 1rem;
  font-family: "Fira Code", "JetBrains Mono", "Courier New", monospace;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.blog-admin .posts-list .posts-grid .post-card .post-actions .edit-btn:hover, .blog-admin .posts-list .posts-grid .post-card .post-actions .delete-btn:hover {
  background: #ff0080;
  color: #000011;
}
.blog-admin .posts-list .posts-grid .post-card .post-actions .delete-btn {
  border-color: #ff4444;
  color: #ff4444;
}
.blog-admin .posts-list .posts-grid .post-card .post-actions .delete-btn:hover {
  background: #ff4444;
  color: #000011;
}
.blog-admin .posts-list .posts-grid .file-input {
  padding: 0.5rem;
  cursor: pointer;
}
.blog-admin .posts-list .posts-grid .file-input::file-selector-button {
  background: #ff0080;
  color: #000011;
  border: none;
  padding: 0.5rem 1rem;
  font-family: "Fira Code", "JetBrains Mono", "Courier New", monospace;
  margin-right: 1rem;
  cursor: pointer;
}
.blog-admin .posts-list .posts-grid .file-input::file-selector-button:hover {
  background: rgb(255, 51, 153.4);
}
.blog-admin .posts-list .posts-grid .image-preview {
  margin-top: 1rem;
  text-align: center;
}
.blog-admin .posts-list .posts-grid .image-preview img {
  max-width: 100%;
  max-height: 200px;
  border: 1px solid #ff0080;
  background: #000011;
}
.blog-admin .posts-list .posts-grid .image-preview .remove-image-btn {
  display: block;
  margin: 0.5rem auto 0;
  background: transparent;
  border: 1px solid #ff4444;
  color: #ff4444;
  padding: 0.25rem 0.75rem;
  font-family: "Fira Code", "JetBrains Mono", "Courier New", monospace;
  font-size: 0.8rem;
  cursor: pointer;
}
.blog-admin .posts-list .posts-grid .image-preview .remove-image-btn:hover {
  background: #ff4444;
  color: #000011;
}
.blog-admin .posts-list .posts-grid .post-card .post-image {
  margin-bottom: 1rem;
}
.blog-admin .posts-list .posts-grid .post-card .post-image img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border: 1px solid #ff0080;
  background: #000011;
}

@media (max-width: 768px) {
  .blog-admin {
    padding: 1rem;
  }
  .blog-admin .blog-admin-header {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  .blog-admin .posts-grid {
    grid-template-columns: 1fr;
  }
}
.blog-post-container {
  padding: 2rem 0;
}
.blog-post-container .terminal-window {
  margin: 0 auto;
  max-width: 800px;
}
.blog-post-container .blog-post-header {
  margin-bottom: 2rem;
}
.blog-post-container .blog-post-header .back-button {
  background: #110022;
  color: #ff0080;
  border: 1px solid #ff0080;
  padding: 0.5rem 1rem;
  font-family: "Fira Code", "JetBrains Mono", "Courier New", monospace;
  font-size: 0.9rem;
  cursor: pointer;
  margin-bottom: 1.5rem;
  transition: all 0.3s ease;
}
.blog-post-container .blog-post-header .back-button:hover {
  background: #ff0080;
  color: #000011;
  text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
}
.blog-post-container .blog-post-header .post-title {
  color: #ff0080;
  font-family: "Fira Code", "JetBrains Mono", "Courier New", monospace;
  font-size: 2rem;
  margin: 0 0 1rem 0;
  text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
}
@media (max-width: 768px) {
  .blog-post-container .blog-post-header .post-title {
    font-size: 1.5rem;
  }
}
.blog-post-container .blog-post-header .post-info {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
  font-family: "Fira Code", "JetBrains Mono", "Courier New", monospace;
  font-size: 0.9rem;
}
.blog-post-container .blog-post-header .post-info .author, .blog-post-container .blog-post-header .post-info .date {
  color: #999999;
}
.blog-post-container .blog-post-header .post-info .author::before, .blog-post-container .blog-post-header .post-info .date::before {
  content: "[";
  color: #00ffff;
}
.blog-post-container .blog-post-header .post-info .author::after, .blog-post-container .blog-post-header .post-info .date::after {
  content: "]";
  color: #00ffff;
}
@media (max-width: 768px) {
  .blog-post-container .blog-post-header .post-info {
    flex-direction: column;
    gap: 0.5rem;
  }
}
.blog-post-container .blog-post-header .tags {
  font-family: "Fira Code", "JetBrains Mono", "Courier New", monospace;
  font-size: 0.9rem;
}
.blog-post-container .blog-post-header .tags .tags-label {
  color: #999999;
}
.blog-post-container .blog-post-header .tags .tag {
  color: #ffff00;
  margin-right: 0.5rem;
}
.blog-post-container .blog-post-header .tags .tag:hover {
  color: #ff0080;
  text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
}
.blog-post-container .blog-content .content-wrapper {
  font-family: "Fira Code", "JetBrains Mono", "Courier New", monospace;
  line-height: 1.6;
}
.blog-post-container .blog-content .content-wrapper .formatted-content .content-h2 {
  color: #ff0080;
  font-size: 1.5rem;
  margin: 2rem 0 1rem 0;
  border-bottom: 1px solid #ff0080;
  padding-bottom: 0.5rem;
  text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
}
.blog-post-container .blog-content .content-wrapper .formatted-content .content-h3 {
  color: #00ffff;
  font-size: 1.25rem;
  margin: 1.5rem 0 1rem 0;
}
.blog-post-container .blog-content .content-wrapper .formatted-content .content-h4 {
  color: #ffff00;
  font-size: 1.1rem;
  margin: 1rem 0 0.5rem 0;
}
.blog-post-container .blog-content .content-wrapper .formatted-content .content-paragraph {
  color: #cccccc;
  margin-bottom: 1rem;
}
.blog-post-container .blog-content .content-wrapper .formatted-content .content-paragraph:last-child {
  margin-bottom: 0;
}
.blog-post-container .blog-content .content-wrapper .formatted-content .code-block-delimiter {
  color: #ffff00;
  font-weight: bold;
  margin: 1rem 0;
  padding: 0.5rem;
  background: #110022;
  border: 1px solid #666666;
}
.blog-post-container .blog-content .content-wrapper .formatted-content .list-item {
  color: #cccccc;
  margin-left: 1rem;
  position: relative;
}
.blog-post-container .blog-content .content-wrapper .formatted-content .list-item::before {
  content: ">";
  color: #ff0080;
  position: absolute;
  left: -1rem;
}
.blog-post-container .blog-content .content-wrapper .formatted-content .blockquote {
  color: #999999;
  font-style: italic;
  margin: 1rem 0;
  padding-left: 1rem;
  border-left: 3px solid #ff0080;
  background: rgba(0, 255, 0, 0.05);
}
.blog-post-container .loading-indicator {
  text-align: center;
  color: #ff0080;
  font-family: "Fira Code", "JetBrains Mono", "Courier New", monospace;
}
.blog-post-container .loading-indicator p {
  margin: 0.5rem 0;
  text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
}
.blog-post-container .error-message {
  text-align: center;
  color: #ff4444;
  font-family: "Fira Code", "JetBrains Mono", "Courier New", monospace;
}
.blog-post-container .error-message p {
  margin: 1rem 0;
}
.blog-post-container .error-message .terminal-button {
  background: #110022;
  color: #ff0080;
  border: 1px solid #ff0080;
  padding: 0.75rem 1.5rem;
  font-family: "Fira Code", "JetBrains Mono", "Courier New", monospace;
  cursor: pointer;
  margin-top: 1rem;
  transition: all 0.3s ease;
}
.blog-post-container .error-message .terminal-button:hover {
  background: #ff0080;
  color: #000011;
  text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
}
@media (max-width: 768px) {
  .blog-post-container {
    padding: 1rem;
  }
  .blog-post-container .terminal-window {
    margin: 0;
  }
  .blog-post-container .blog-content .content-wrapper .formatted-content .content-h2 {
    font-size: 1.25rem;
  }
  .blog-post-container .blog-content .content-wrapper .formatted-content .content-h3 {
    font-size: 1.1rem;
  }
}

.blog-section {
  margin: 2rem 0;
}
.blog-section .blog-posts .blog-post-item {
  margin: 0.5rem 0;
  cursor: pointer;
  transition: all 0.3s ease;
}
.blog-section .blog-posts .blog-post-item:hover .blog-link {
  color: #ff0080;
  text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
}
.blog-section .blog-posts .blog-post-item:hover .post-number {
  color: #ffff00;
}
.blog-section .blog-posts .blog-post-item .blog-post-line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.blog-section .blog-posts .blog-post-item .blog-post-line .post-number {
  color: #00ffff;
  font-weight: bold;
  min-width: 2rem;
  text-align: right;
  font-family: "Fira Code", "JetBrains Mono", "Courier New", monospace;
}
.blog-section .blog-posts .blog-post-item .blog-post-line .blog-thumbnail .thumbnail-image {
  width: 24px;
  height: 24px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid rgba(0, 255, 0, 0.3);
  transition: all 0.3s ease;
}
.blog-section .blog-posts .blog-post-item .blog-post-line .blog-thumbnail .thumbnail-image:hover {
  border-color: #ff0080;
  transform: scale(1.1);
}
.blog-section .blog-posts .blog-post-item .blog-post-line .blog-link {
  color: #cccccc;
  font-family: "Fira Code", "JetBrains Mono", "Courier New", monospace;
  text-decoration: none;
  transition: color 0.3s ease;
}
.blog-section .blog-posts .blog-post-item .blog-post-line .blog-link:hover {
  color: #ff0080;
  text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
}
.blog-section .blog-posts .blog-post-item .blog-post-description {
  margin-left: 2.5rem;
  margin-top: 0.25rem;
}
.blog-section .blog-posts .blog-post-item .blog-post-description .file-description {
  color: #999999;
  font-style: italic;
  font-size: 0.9rem;
  font-family: "Fira Code", "JetBrains Mono", "Courier New", monospace;
}
.blog-section .blog-loading, .blog-section .blog-empty {
  text-align: center;
  padding: 2rem;
  color: #999999;
  font-family: "Fira Code", "JetBrains Mono", "Courier New", monospace;
}
.blog-section .blog-loading .blinking-cursor, .blog-section .blog-empty .blinking-cursor {
  animation: blink 1s infinite;
}
.blog-section .blog-loading .info-text, .blog-section .blog-empty .info-text {
  font-style: italic;
}

@keyframes blink {
  0%, 50% {
    opacity: 1;
  }
  51%, 100% {
    opacity: 0;
  }
}
.blog-post-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
  padding: 2rem 1rem;
  font-family: "Georgia", "Times New Roman", serif;
  color: #ffffff;
}
.blog-post-page .blog-content-container {
  max-width: 1200px;
  margin: 0 auto;
  background: rgba(26, 26, 26, 0.95);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.blog-post-page .blog-header {
  background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
  padding: 2rem;
  border-bottom: 2px solid #ff0080;
}
.blog-post-page .blog-header .back-button {
  background: transparent;
  border: 2px solid #ff0080;
  color: #ff0080;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  font-family: "Fira Code", "JetBrains Mono", "Courier New", monospace;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 2rem;
}
.blog-post-page .blog-header .back-button:hover {
  background: #ff0080;
  color: #000011;
  text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
}
.blog-post-page .blog-header .post-meta .post-title {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 1rem 0;
  color: #ffffff;
  font-family: "Georgia", serif;
}
.blog-post-page .blog-header .post-meta .post-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
  font-size: 1rem;
  color: #999999;
}
.blog-post-page .blog-header .post-meta .post-info .author {
  color: #ff0080;
  font-weight: 500;
}
.blog-post-page .blog-header .post-meta .post-info .date-separator {
  margin: 0 0.5rem;
  color: #666666;
}
.blog-post-page .blog-header .post-meta .post-info .date {
  color: #999999;
}
.blog-post-page .blog-header .post-meta .post-info .date.updated {
  font-style: italic;
}
.blog-post-page .blog-header .post-meta .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.blog-post-page .blog-header .post-meta .tags .tag {
  background: rgba(0, 255, 0, 0.1);
  color: #ff0080;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.85rem;
  border: 1px solid rgba(0, 255, 0, 0.3);
  font-family: "Fira Code", "JetBrains Mono", "Courier New", monospace;
}
.blog-post-page .blog-header-image {
  padding: 0;
  margin: 0;
}
.blog-post-page .blog-header-image .header-image {
  width: 100%;
  height: auto;
  max-height: 400px;
  object-fit: cover;
  display: block;
  border-bottom: 2px solid #ff0080;
}
.blog-post-page .blog-content {
  padding: 3rem 4rem;
}
.blog-post-page .blog-content .content-text {
  font-size: 1.125rem;
  line-height: 1.8;
  color: #e0e0e0;
}
.blog-post-page .blog-content .content-text p {
  margin: 0 0 1.5rem 0;
  text-align: justify;
}
.blog-post-page .blog-content .content-text h1, .blog-post-page .blog-content .content-text h2, .blog-post-page .blog-content .content-text h3, .blog-post-page .blog-content .content-text h4, .blog-post-page .blog-content .content-text h5, .blog-post-page .blog-content .content-text h6 {
  color: #ffffff;
  margin: 2rem 0 1rem 0;
  font-family: "Georgia", serif;
}
.blog-post-page .blog-content .content-text h1:first-child, .blog-post-page .blog-content .content-text h2:first-child, .blog-post-page .blog-content .content-text h3:first-child, .blog-post-page .blog-content .content-text h4:first-child, .blog-post-page .blog-content .content-text h5:first-child, .blog-post-page .blog-content .content-text h6:first-child {
  margin-top: 0;
}
.blog-post-page .blog-content .content-text h1 {
  font-size: 2.25rem;
}
.blog-post-page .blog-content .content-text h2 {
  font-size: 1.875rem;
}
.blog-post-page .blog-content .content-text h3 {
  font-size: 1.5rem;
}
.blog-post-page .blog-content .content-text h4 {
  font-size: 1.25rem;
}
.blog-post-page .blog-content .content-text strong {
  color: #ff0080;
  font-weight: 600;
}
.blog-post-page .blog-content .content-text em {
  color: #ffff00;
  font-style: italic;
}
.blog-post-page .blog-content .content-text code {
  background: rgba(0, 255, 0, 0.1);
  color: #ff0080;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  font-family: "Fira Code", "JetBrains Mono", "Courier New", monospace;
  font-size: 0.9em;
}
.blog-post-page .blog-content .content-text pre {
  background: #000011;
  color: #ff0080;
  padding: 1.5rem;
  border-radius: 8px;
  overflow-x: auto;
  margin: 1.5rem 0;
  border: 1px solid rgba(0, 255, 0, 0.3);
}
.blog-post-page .blog-content .content-text pre code {
  background: none;
  padding: 0;
}
.blog-post-page .blog-content .content-text blockquote {
  border-left: 4px solid #ff0080;
  padding-left: 1.5rem;
  margin: 1.5rem 0;
  font-style: italic;
  color: #999999;
  background: rgba(0, 255, 0, 0.05);
  padding: 1rem 1.5rem;
  border-radius: 0 8px 8px 0;
}
.blog-post-page .blog-content .content-text .content-image {
  margin: 2rem 0;
  text-align: center;
}
.blog-post-page .blog-content .content-text .content-image .inline-image {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(0, 255, 0, 0.2);
  transition: all 0.3s ease;
}
.blog-post-page .blog-content .content-text .content-image .inline-image:hover {
  border-color: #ff0080;
  box-shadow: 0 6px 20px rgba(0, 255, 0, 0.2);
}
.blog-post-page .blog-content .content-text .content-image .image-caption {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: #999999;
  font-style: italic;
  font-family: "Fira Code", "JetBrains Mono", "Courier New", monospace;
}
.blog-post-page .blog-content .content-text ul, .blog-post-page .blog-content .content-text ol {
  margin: 1rem 0;
  padding-left: 2rem;
}
.blog-post-page .blog-content .content-text ul li, .blog-post-page .blog-content .content-text ol li {
  margin: 0.5rem 0;
  color: #e0e0e0;
}
.blog-post-page .blog-content .content-text a {
  color: #ff0080;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 255, 0, 0.3);
  transition: all 0.3s ease;
}
.blog-post-page .blog-content .content-text a:hover {
  border-bottom-color: #ff0080;
  text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
}
.blog-post-page .loading-content, .blog-post-page .error-content {
  padding: 4rem 2rem;
  text-align: center;
}
.blog-post-page .loading-content .loading-indicator h2, .blog-post-page .loading-content .error-message h2, .blog-post-page .error-content .loading-indicator h2, .blog-post-page .error-content .error-message h2 {
  color: #ff0080;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  font-family: "Fira Code", "JetBrains Mono", "Courier New", monospace;
}
.blog-post-page .loading-content .loading-indicator p, .blog-post-page .loading-content .error-message p, .blog-post-page .error-content .loading-indicator p, .blog-post-page .error-content .error-message p {
  color: #999999;
  font-size: 1rem;
  margin: 0.5rem 0;
}
.blog-post-page .loading-content .error-message h2, .blog-post-page .error-content .error-message h2 {
  color: #ff6b6b;
}
@media (max-width: 768px) {
  .blog-post-page {
    padding: 1rem 0.5rem;
  }
  .blog-post-page .blog-content-container {
    margin: 0;
    border-radius: 0;
  }
  .blog-post-page .blog-header {
    padding: 1.5rem;
  }
  .blog-post-page .blog-header .post-meta .post-title {
    font-size: 1.875rem;
  }
  .blog-post-page .blog-content {
    padding: 2rem 1.5rem;
  }
  .blog-post-page .blog-content .content-text {
    font-size: 1rem;
    line-height: 1.7;
  }
}