/* ==========================================================================
   TERMINAL THEME — Retro 1980s CRT Terminal Interface
   A phosphor-green-on-black theme with scanlines, flicker, and glow
   ========================================================================== */

/* — Fonts — */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

@font-face {
  font-family: "ohgodno";
  src: url("/fonts/Pixeboy.ttf") format("truetype");
  font-display: swap;
}

/* — Color Variables — */
:root {
  --bg:              #0a0a0a;
  --fg:              #33ff33;
  --fg-dim:          #1a9e1a;
  --fg-bright:       #66ff66;
  --fg-glow:         rgba(51, 255, 51, 0.4);
  --fg-glow-strong:  rgba(51, 255, 51, 0.7);
  --amber:           #ffb000;
  --amber-dim:       #996a00;
  --comment:         #1a661a;
  --border:          #1a9e1a;
  --link:            #44ff44;
  --link-hover:      #88ff88;
  --code-bg:         rgba(0, 10, 0, 0.8);
  --code-border:     rgba(51, 255, 51, 0.2);
  --scanline:        rgba(0, 0, 0, 0.15);
  --phosphor-filter: sepia(100%) saturate(400%) hue-rotate(70deg) brightness(0.7);
}

/* — Keyframe Animations — */

/* CRT screen flicker */
@keyframes flicker {
  0%   { opacity: 0.97; }
  5%   { opacity: 0.95; }
  10%  { opacity: 0.98; }
  15%  { opacity: 0.96; }
  20%  { opacity: 0.99; }
  50%  { opacity: 0.96; }
  80%  { opacity: 0.98; }
  90%  { opacity: 0.95; }
  100% { opacity: 0.98; }
}

/* Blinking cursor */
@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* Text glow pulse on headings */
@keyframes glowPulse {
  0%   { text-shadow: 0 0 4px var(--fg-glow), 0 0 10px var(--fg-glow); }
  50%  { text-shadow: 0 0 8px var(--fg-glow-strong), 0 0 20px var(--fg-glow), 0 0 30px var(--fg-glow); }
  100% { text-shadow: 0 0 4px var(--fg-glow), 0 0 10px var(--fg-glow); }
}

/* Scanline scroll */
@keyframes scanlines {
  0%   { background-position: 0 0; }
  100% { background-position: 0 4px; }
}

/* Boot-up text typing */
@keyframes typeIn {
  from { width: 0; }
  to   { width: 100%; }
}

/* — Reset & Base — */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-size: 16px;
  line-height: 1.6;
  font-family: 'VT323', 'Courier New', 'Lucida Console', Monaco, monospace;
  letter-spacing: 0.03em;
  animation: flicker 0.3s infinite alternate;
  text-shadow: 0 0 3px var(--fg-glow);
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
}

/* Scanline overlay on the entire page */
body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    var(--scanline) 2px,
    var(--scanline) 4px
  );
  animation: scanlines 0.5s linear infinite;
}

/* Subtle vignette around edges (CRT curvature illusion) */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9998;
  background: radial-gradient(
    ellipse at center,
    transparent 60%,
    rgba(0, 0, 0, 0.5) 100%
  );
}

::selection {
  background: var(--fg);
  color: var(--bg);
}

/* — Layout — */
.container {
  width: 90%;
  max-width: 960px;
  margin: 0 auto;
}

section {
  display: block;
  margin: 0 0 20px 0;
}

#wrapper {
  min-height: calc(100vh - 100px);
}

/* — Typography — */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 20px;
  font-weight: normal;
  font-family: 'VT323', 'Courier New', monospace;
  color: var(--fg-bright);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  animation: glowPulse 3s ease-in-out infinite;
}

h1::before, h2::before, h3::before {
  content: "> ";
  color: var(--fg-dim);
}

/* Prevent double prompts when headings are inside list items */
li h1::before, li h2::before, li h3::before,
li h4::before, li h5::before, li h6::before {
  content: none;
}

p {
  margin: 0 0 16px 0;
}

/* Blinking cursor at the end of paragraphs */
article p:last-of-type::after,
.terminal-block p:last-of-type::after {
  content: "█";
  animation: blink 1s step-end infinite;
  color: var(--fg);
  margin-left: 2px;
}

li {
  line-height: 1.5;
}

ul li {
  list-style: none;
  position: relative;
  padding-left: 4px;
}

ul li::before {
  content: ">";
  color: var(--fg-dim);
  position: absolute;
  left: -16px;
  font-family: 'VT323', monospace;
}

ol li::marker {
  color: var(--fg-dim);
}

dt {
  font-style: italic;
  font-weight: bold;
  color: var(--fg-bright);
}

strong, b {
  color: var(--fg-bright);
  text-shadow: 0 0 5px var(--fg-glow);
}

em, i {
  color: var(--fg);
  font-style: italic;
}

/* — Header — */
header {
  background: rgba(0, 10, 0, 0.6);
  border-bottom: 1px solid var(--border);
  padding: 20px;
  margin: 0 0 40px 0;
  position: relative;
}

/* Top bar: simulates terminal title bar */
header::before {
  content: "╔══════════════════════════════════════════════════════════╗";
  display: block;
  text-align: center;
  color: var(--fg-dim);
  font-size: 10px;
  line-height: 1;
  margin-bottom: 8px;
  overflow: hidden;
  white-space: nowrap;
}

header::after {
  content: "╚══════════════════════════════════════════════════════════╝";
  display: block;
  text-align: center;
  color: var(--fg-dim);
  font-size: 10px;
  line-height: 1;
  margin-top: 8px;
  overflow: hidden;
  white-space: nowrap;
}

header h1 {
  font-size: 22px;
  line-height: 1.5;
  margin: 0;
  text-align: center;
  font-weight: bold;
  color: var(--fg-bright);
  letter-spacing: 2px;
  text-transform: uppercase;
  animation: glowPulse 3s ease-in-out infinite;
}

header h1::before {
  content: "$ ";
  color: var(--fg-dim);
}

header h1 a {
  color: inherit;
  text-decoration: none;
}

header h1 a:hover {
  text-decoration: none;
  text-shadow: 0 0 10px var(--fg-glow-strong), 0 0 20px var(--fg-glow);
}

.header-links {
  text-align: center;
  margin-top: 10px;
}

.header-link {
  display: inline-block;
  padding: 3px 8px;
  font-family: 'VT323', monospace;
  font-size: 22px;
  color: var(--fg);
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.1s ease;
}

/* Terminal bracket style for nav items */
.header-link::before {
  content: "[ ";
  color: var(--fg-dim);
}
.header-link::after {
  content: " ]";
  color: var(--fg-dim);
}

.header-link:hover {
  color: var(--bg);
  background-color: var(--fg);
  text-shadow: none;
}

.header-link:hover::before,
.header-link:hover::after {
  color: var(--bg);
}

/* — Main Content — */
#main_content {
  width: 100%;
  -webkit-font-smoothing: none;
}

section img {
  max-width: 100%;
  filter: var(--phosphor-filter);
  border: 1px solid var(--border);
  transition: filter 0.3s ease;
}

section img:hover {
  filter: none;
}

#main_content h1 { font-size: 28px; }
#main_content h2 { font-size: 22px; }
#main_content h3 { font-size: 18px; }
#main_content h4 { font-size: 16px; }
#main_content h5 {
  font-size: 14px;
  text-transform: uppercase;
  margin: 0 0 5px 0;
}
#main_content h6 {
  font-size: 12px;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin: 0 0 5px 0;
}

/* — Blockquotes — terminal comment style */
blockquote {
  color: var(--comment);
  padding: 10px 15px;
  margin: 10px 0;
  border: none;
  border-left: 2px solid var(--fg-dim);
  background: rgba(0, 20, 0, 0.3);
  position: relative;
}

blockquote::before {
  content: "/* ";
  color: var(--fg-dim);
  font-family: 'VT323', monospace;
}

blockquote::after {
  content: " */";
  color: var(--fg-dim);
  font-family: 'VT323', monospace;
}

/* — Code — */
pre {
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  padding: 12px;
  font-size: 15px;
  color: var(--fg);
  border-radius: 0;
  text-wrap: normal;
  overflow: auto;
  overflow-y: hidden;
  position: relative;
}

/* Terminal prompt decoration on code blocks */
pre::before {
  content: "┌─[ output ]";
  display: block;
  color: var(--fg-dim);
  font-size: 12px;
  margin-bottom: 8px;
  letter-spacing: 1px;
}

pre::after {
  content: "└─────────────";
  display: block;
  color: var(--fg-dim);
  font-size: 12px;
  margin-top: 8px;
  letter-spacing: 1px;
}

code {
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  padding: 1px 4px;
  margin: 0;
  color: var(--fg-bright);
  border-radius: 0;
  font-family: 'VT323', 'Courier New', monospace;
}

pre code {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  color: inherit;
}

/* — Tables — */
table {
  width: 100%;
  margin: 0 0 20px 0;
  border-collapse: collapse;
  border: 1px solid var(--border);
}

th {
  text-align: left;
  border-bottom: 1px solid var(--fg);
  padding: 5px 10px;
  color: var(--fg-bright);
  text-transform: uppercase;
  background: rgba(0, 20, 0, 0.3);
}

td {
  padding: 5px 10px;
  border-bottom: 1px solid var(--code-border);
}

/* — Horizontal Rule — terminal style */
hr {
  height: 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  color: var(--fg-dim);
  margin: 24px 0;
  position: relative;
  overflow: visible;
}

hr::after {
  content: "────────────────────────────────────────";
  position: absolute;
  top: -8px;
  left: 0;
  color: var(--fg-dim);
  font-size: 12px;
  letter-spacing: 2px;
}

/* — Links — */
a {
  color: var(--link);
  text-shadow: 0 0 5px var(--fg-glow);
  text-decoration: none;
  transition: all 0.1s ease;
}

a:hover {
  color: var(--link-hover);
  text-shadow: 0 0 10px var(--fg-glow-strong);
  text-decoration: underline;
}

a:active, a:focus {
  outline: 0;
  border: none;
}

/* — Buttons — */
.btn {
  display: inline-block;
  background: transparent;
  padding: 6px 16px;
  border: 1px solid var(--fg);
  border-radius: 0;
  color: var(--fg);
  font-family: 'VT323', monospace;
  font-size: 16px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.1s ease;
}

.btn:hover {
  background: var(--fg);
  color: var(--bg);
  text-shadow: none;
  text-decoration: none;
}

/* — Homepage — */
.home-skull {
  float: left;
  height: 250px;
  width: 250px;
  filter: var(--phosphor-filter);
  border: 1px solid var(--border);
}

.latest-title {
  font-family: 'VT323', monospace;
  font-size: 36px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 3px;
}

.latest-title::before {
  content: "# ";
  color: var(--fg-dim);
}

.post-list-title {
  font-family: 'VT323', monospace;
  font-size: 28px;
}

.post-list-item {
  font-family: 'VT323', monospace;
}

.post-list-item a {
  font-weight: bold;
}

.post-list-item time {
  color: var(--fg-dim);
  font-size: 14px;
}

/* — Post / Article — */
article {
  position: relative;
}

article h2 {
  font-size: 26px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
}

article .by-line {
  display: block;
  color: var(--fg-dim);
  margin-bottom: 20px;
  font-size: 16px;
}

/* Terminal-style metadata comment block for posts */
article .by-line::before {
  content: "/* date: ";
  color: var(--comment);
}
article .by-line::after {
  content: " */";
  color: var(--comment);
}

.post-meta {
  color: var(--fg-dim);
  margin-bottom: 20px;
}

.post-meta time {
  font-style: normal;
}

/* — Pagination — */
.pagination {
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 20px 0;
}

.pagination a,
.pagination span {
  padding: 0 8px;
  font-family: 'VT323', monospace;
  font-size: 18px;
}

.page-item {
  display: inline-block;
  padding: 0 8px;
}

.page-item:hover {
  background: var(--fg);
  color: var(--bg);
  text-shadow: none;
}

/* — Footer — */
footer {
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-top: 1px solid var(--border);
  margin-top: 40px;
  color: var(--fg-dim);
  font-size: 14px;
}

footer::before {
  content: "/* ";
  color: var(--comment);
}

footer::after {
  content: " */";
  color: var(--comment);
}

footer a {
  color: var(--fg-dim);
  text-decoration: none;
}

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

/* — Image Gallery (trophies) — */
.image-gallery {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  justify-content: center;
  padding: 4px;
  gap: 4px;
}

.box {
  flex-basis: 25%;
  width: 100%;
  padding: 8px;
  margin: 2px;
  border: 1px solid var(--code-border);
  background: rgba(0, 10, 0, 0.3);
  transition: border-color 0.2s ease;
}

.box:hover {
  border-color: var(--fg);
}

.box h3 {
  font-family: 'VT323', monospace;
  font-size: 14px;
  text-transform: uppercase;
  color: var(--fg-dim);
  text-align: center;
  animation: none;
}

.box h3::before {
  content: "";
}

.img-gallery {
  width: 100%;
  height: 180px;
  object-fit: cover;
  transform: scale(1);
  transition: all 0.3s ease-in-out;
  filter: var(--phosphor-filter);
  border: 1px solid var(--code-border);
}

.img-gallery:hover {
  transform: scale(1.03);
  filter: none;
}

/* — Category listing — */
.category-section h2 {
  font-family: 'VT323', monospace;
  font-size: 22px;
}

.category-title {
  font-family: 'VT323', monospace;
  font-size: 32px;
  letter-spacing: 3px;
}

/* — Terminal Containers — */
.terminal-window {
  border: 1px solid var(--border);
  background: rgba(0, 10, 0, 0.3);
  margin: 20px 0;
  padding: 0;
}

.terminal-titlebar {
  background: rgba(0, 20, 0, 0.5);
  padding: 4px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.terminal-titlebar::before {
  content: "■ ";
  color: var(--fg);
}

.terminal-body {
  padding: 12px;
}

/* — CRT Power-on Effect (optional class for body) — */
.crt-on {
  animation: flicker 0.15s 1;
}

/* — Scrollbar — */
::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar {
  width: 8px;
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background-color: var(--fg-dim);
  border: 1px solid var(--bg);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--fg);
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--fg-dim) var(--bg);
}

/* — Clearfix — */
.cf::before, .cf::after {
  content: "";
  display: table;
}
.cf::after {
  clear: both;
}

/* — Syntax Highlighting (base16 snazzy dark — full color) — */
.highlight .hll { background-color: #34353e }
.highlight      { background: #282a36; color: #e2e4e5 }
.highlight .c   { color: #78787e } /* Comment */
.highlight .k   { color: #ff6ac1 } /* Keyword */
.highlight .l   { color: #ff9f43 } /* Literal */
.highlight .n   { color: #e2e4e5 } /* Name */
.highlight .o   { color: #ff6ac1 } /* Operator */
.highlight .p   { color: #e2e4e5 } /* Punctuation */
.highlight .ch  { color: #78787e } /* Comment.Hashbang */
.highlight .cm  { color: #78787e } /* Comment.Multiline */
.highlight .cp  { color: #78787e } /* Comment.Preproc */
.highlight .cpf { color: #78787e } /* Comment.PreprocFile */
.highlight .c1  { color: #78787e } /* Comment.Single */
.highlight .cs  { color: #78787e } /* Comment.Special */
.highlight .gd  { color: #ff5c57 } /* Generic.Deleted */
.highlight .gi  { color: #5af78e } /* Generic.Inserted */
.highlight .gs  { font-weight: bold } /* Generic.Strong */
.highlight .gu  { color: #57c7ff } /* Generic.Subheading */
.highlight .kc  { color: #ff6ac1 } /* Keyword.Constant */
.highlight .kd  { color: #ff6ac1 } /* Keyword.Declaration */
.highlight .kn  { color: #ff6ac1 } /* Keyword.Namespace */
.highlight .kp  { color: #ff6ac1 } /* Keyword.Pseudo */
.highlight .kr  { color: #ff6ac1 } /* Keyword.Reserved */
.highlight .kt  { color: #9aedfe } /* Keyword.Type */
.highlight .ld  { color: #5af78e } /* Literal.Date */
.highlight .m   { color: #ff9f43 } /* Literal.Number */
.highlight .s   { color: #5af78e } /* Literal.String */
.highlight .na  { color: #57c7ff } /* Name.Attribute */
.highlight .nb  { color: #e2e4e5 } /* Name.Builtin */
.highlight .nc  { color: #f3f99d } /* Name.Class */
.highlight .no  { color: #ff5c57 } /* Name.Constant */
.highlight .nd  { color: #57c7ff } /* Name.Decorator */
.highlight .ni  { color: #e2e4e5 } /* Name.Entity */
.highlight .ne  { color: #ff5c57 } /* Name.Exception */
.highlight .nf  { color: #57c7ff } /* Name.Function */
.highlight .nl  { color: #e2e4e5 } /* Name.Label */
.highlight .nn  { color: #f3f99d } /* Name.Namespace */
.highlight .nx  { color: #57c7ff } /* Name.Other */
.highlight .py  { color: #e2e4e5 } /* Name.Property */
.highlight .nt  { color: #ff6ac1 } /* Name.Tag */
.highlight .nv  { color: #ff5c57 } /* Name.Variable */
.highlight .ow  { color: #ff6ac1 } /* Operator.Word */
.highlight .w   { color: #e2e4e5 } /* Text.Whitespace */
.highlight .mb  { color: #ff9f43 } /* Literal.Number.Bin */
.highlight .mf  { color: #ff9f43 } /* Literal.Number.Float */
.highlight .mh  { color: #ff9f43 } /* Literal.Number.Hex */
.highlight .mi  { color: #ff9f43 } /* Literal.Number.Integer */
.highlight .mo  { color: #ff9f43 } /* Literal.Number.Oct */
.highlight .sa  { color: #5af78e } /* Literal.String.Affix */
.highlight .sb  { color: #5af78e } /* Literal.String.Backtick */
.highlight .sc  { color: #5af78e } /* Literal.String.Char */
.highlight .dl  { color: #5af78e } /* Literal.String.Delimiter */
.highlight .sd  { color: #5af78e } /* Literal.String.Doc */
.highlight .s2  { color: #5af78e } /* Literal.String.Double */
.highlight .se  { color: #ff9f43 } /* Literal.String.Escape */
.highlight .sh  { color: #5af78e } /* Literal.String.Heredoc */
.highlight .si  { color: #e2e4e5 } /* Literal.String.Interpol */
.highlight .sx  { color: #5af78e } /* Literal.String.Other */
.highlight .sr  { color: #5af78e } /* Literal.String.Regex */
.highlight .s1  { color: #5af78e } /* Literal.String.Single */
.highlight .ss  { color: #5af78e } /* Literal.String.Symbol */
.highlight .bp  { color: #e2e4e5 } /* Name.Builtin.Pseudo */
.highlight .fm  { color: #57c7ff } /* Name.Function.Magic */
.highlight .vc  { color: #ff5c57 } /* Name.Variable.Class */
.highlight .vg  { color: #ff5c57 } /* Name.Variable.Global */
.highlight .vi  { color: #ff5c57 } /* Name.Variable.Instance */
.highlight .vm  { color: #ff5c57 } /* Name.Variable.Magic */
.highlight .il  { color: #ff9f43 } /* Literal.Number.Integer.Long */

/* — Responsive — */
@media (max-width: 768px) {
  .home-skull {
    float: none;
    display: block;
    margin: 0 auto 20px;
    height: 180px;
    width: 180px;
  }

  .container {
    width: 95%;
  }

  .image-gallery {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }

  header::before,
  header::after {
    display: none;
  }

  .header-link {
    font-size: 18px;
    padding: 2px 4px;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 14px;
  }

  header h1 {
    font-size: 16px;
  }

  .header-link {
    font-size: 16px;
    padding: 2px 3px;
  }

  .home-skull {
    height: 130px;
    width: 130px;
  }

  .latest-title {
    font-size: 24px;
  }

  .post-list-title {
    font-size: 22px;
  }

  .category-title {
    font-size: 24px;
  }
}