:root{
--accent:#c1121f; /* blood */
--line:#2a2a2d; /* hairline borders */
--box:#202020; /* opaque box (with alpha) */
--wallpaper:url('resources/img/wallpaper.jpg'); /* replace with your PNG/GIF */
--fg:#e7e7e7;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0; color:var(--fg); background:#000; font-family:'Roboto Mono', monospace;
display:grid; place-items:center; overflow:hidden;
}
/* wallpaper + grain */
.wall{
position:fixed; inset:0; background-image:var(--wallpaper);
background-size:cover; background-position:center; filter:contrast(1) brightness(.8) saturate(.9);
}
.veil{position:fixed; inset:0; background:radial-gradient(80vw 55vh at 50% 40%, rgba(0,0,0,.25), rgba(0,0,0,.85)), linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.65));}
.grain::before{
content:''; position:fixed; inset:0; pointer-events:none; opacity:.12; mix-blend-mode:overlay;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABcElEQVR42u3SQQrCMBQF0f//z6qE3eWw1h1m8d9f8J8WPKn5mRkC3mD7R8G7w2w2w2w2w2w2w2xjv7v3q2xGgqfblmWm0gWq3kYb9j4p7b9ZxW8n3g9w3j7d9g8c4j3g9w3j7d9g8c4j3g9w3j7d9g8c4j3g9w3j7d9g8c4j3g9w3j7d9g8c4Pe5w4d8v+Qv1pQ2K7sR6OqXwWmJX3y3G3u+qYwXU9b3x6z8r3yQb2j2o9rN0b8qvC0YH8G7w2w2w2w2w2w2w2w2w2w2w2w2w2w2w2w2w2w2w2w2w2w2w2w2w2w2x8C8l1v1fKp5bQAAAABJRU5ErkJggg==');
}


/* center box */
.center{
position:relative; z-index:10; width:min(90vw, 800px); max-width:800px;
padding:1.25rem; display:flex; flex-direction:column; align-items:center; gap:1rem;
background:var(--box); border:1px solid var(--line); border-radius:14px;
box-shadow:0 0 .75rem rgba(193,18,31,.25);
backdrop-filter:saturate(1.1) blur(2px);
}
.brand{ display:flex; align-items:center; gap:.6rem; }
.sigil{ font-family:'UnifrakturMaguntia', cursive; font-size:2.2rem; color:var(--accent); filter:drop-shadow(0 0 .55rem rgba(193,18,31,.35)); }
h1{ font-size:1rem; margin:0; letter-spacing:.08em; text-transform:uppercase }
p{ margin:.25rem 0; line-height:1.5 }


/* cross-frame corners */
.frame{ position:relative; }
.frame .corner{ position:absolute; width:22px; height:22px; }
.corner::before, .corner::after{ content:""; position:absolute; background:var(--accent); }
/* horizontal + vertical hairlines */
.corner::before{ left:0; right:0; top:50%; height:2px; transform:translateY(-50%); }
.corner::after{ top:0; bottom:0; left:50%; width:2px; transform:translateX(-50%); }
.corner.tl{ top:-11px; left:-11px; }
.corner.tr{ top:-11px; right:-11px; }
.corner.bl{ bottom:-11px; left:-11px; }
.corner.br{ bottom:-11px; right:-11px; }


.cta{
display:flex; gap:.6rem; margin-top:.25rem; flex-wrap:wrap; justify-content:center;
}
.btn{ text-decoration:none; color:#fff; background:#141418; border:1px solid var(--line); padding:.6rem 1rem; border-radius:10px; transition:transform .08s, background .15s; }
.btn:hover{ transform:translateY(-1px); background:#17171d }
.btn.accent{ border-color:var(--accent); box-shadow:0 0 .5rem rgba(193,18,31,.25) inset; }
.tiny{ color:var(--muted); font-size:.85rem; opacity:.95 }


.disclaimer{ display:grid; gap:.25rem; margin-top:.25rem; }
.disclaimer span{ color:var(--muted) }


/* mini status row */
.status {
    display:flex; gap:1rem; flex-wrap:wrap; align-items:center; justify-content: center;
}
.status span { color: var(--fg); }
.status b { color: #fff;}

/* audio hint */
.sound-hint{ color:var(--muted); font-size:.85rem; }


@media (max-width:600px){
.center{ padding:1rem; border-radius:12px }
.frame .corner{ width:18px; height:18px }
}

/* === CRT OVERLAY + GLITCH POP ========================================== */
:root{
  --crt-scan-opacity: .12;   /* scanline strength */
  --crt-vignette: .24;       /* edge darkening */
  --crt-flicker: .035;       /* subtle brightness wobble */
  --crt-aberration: .06;     /* RGB fringe for selected text */
}

/* full-screen overlay above everything */
.crt-overlay{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  /* occasional jitter */
  animation: crt-pop 12s infinite steps(1, end);
}

/* scanlines + faint global flicker */
.crt-overlay::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(rgba(255,255,255,0.03), rgba(0,0,0,0.03)) 0 0 / 100% 100%,
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255, var(--crt-scan-opacity)) 0 1px,
      rgba(0,0,0,0) 1px 3px
    );
  mix-blend-mode: overlay;
  animation: crt-flicker 5s infinite steps(60);
}

/* vignette / slight contrast */
.crt-overlay::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at center,
      rgba(0,0,0,0) 40%,
      rgba(0,0,0,var(--crt-vignette)) 100%);
  filter: blur(.4px) contrast(1.02) saturate(1.02);
}

/* optional: add to headings for RGB fringe */
.crt-aberration{
  text-shadow:
    1px 0 0 rgba(255,0,0, var(--crt-aberration)),
   -1px 0 0 rgba(0,255,255, var(--crt-aberration));
}

/* tiny brightness wobble */
@keyframes crt-flicker{
  0%,100% { opacity: 1 }
  45%     { opacity: 1 }
  46%     { opacity: calc(1 - var(--crt-flicker)) }
  47%     { opacity: 1 }
  82%     { opacity: calc(1 - var(--crt-flicker) * .6) }
}

/* jitter “glitch-pop” */
@keyframes crt-pop{
  0%, 95%, 100% { transform: none; }
  96% { transform: translateX(1px) skewX(1deg); }
  97% { transform: translateX(-1px) skewX(-1deg); }
  98% { transform: translateY(1px); }
  99% { transform: none; }
}

/* accessibility */
@media (prefers-reduced-motion: reduce){
  .crt-overlay::before{ animation: none; }
  .crt-overlay{ animation: none; }
}
.cd-row {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin: 2rem 0;
}

.cd {
  position: relative;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  overflow: hidden;
  animation: spin 6s linear infinite;
  border: 2px solid var(--line);
  box-shadow: 0 0 .6rem rgba(193,18,31,.35);
}

.cd img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* CD hole in the center */
.cd::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;      /* size of hole */
  height: 26px;
  background: #000; /* or transparent if you want page bg to show through */
  border: 2px solid #555;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: inset 0 0 4px rgba(0,0,0,.6);
}


@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

<h2 id="about me">The Webmaster</h2>

<!-- selfie placeholder -->
<div class="selfie-wrap">
  <div class="selfie-rotator">
    <img src="resources/" alt="selfie placeholder">
  </div>
</div>

body {
  cursor: url('resources/cursors/postal.cur'), auto;
}