@font-face {
      font-family: FFFORWA;
      src: url(../font/FFFFORWA.ttf);
      font-size: 1rem;
      /* main titles */
      font-size: 0.75rem;
      /* button labels and paragraph lines */
      line-height: 1.2;
      letter-spacing: 0.5px;
  }

  @font-face {
      font-family: AlienS;
      src: url(../font/Alien_S.ttf);
  }

  @font-face {
      font-family: agsfnt0;
      src: url(../font/agsfnt0.ttf);
  }

  @font-face {
      font-family: ka1;
      src: url(../font/ka1.ttf);
  }

  @font-face {
      font-family: press2p;
      src: url(../font/PressStart2P-Regular.ttf);
  }

  @font-face {
      font-family: tjbitmap;
      src: url(../font/TheJewishBitmap.ttf);
  }

  @font-face {
      font-family: blox2;
      src: url(../font/Blox2.ttf);
  }

  /* Base layout using CSS Grid. Mobile-first styles apply up to 600px */
  html, body {
      height: 100%;
      margin: 0;
      padding: 0;
  }

  body {
      margin: 0;
      padding: 0;
      background-color: #0000aa;
      font-family: FFFORWA;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      position: relative;
      cursor: url(../img/cursor2.png), auto;
  }

  body::after {
      content: '';
      pointer-events: none;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 2;

      background: repeating-linear-gradient(to bottom,
              rgba(0, 0, 0, 0.2) 0,
              rgba(0, 0, 0, 0.2) calc(0.2vh),
              transparent calc(0.2vh),
              transparent calc(0.4vh));

      mix-blend-mode: multiply;
      opacity: 0.5;
      animation: scan-drift 2s linear infinite;
  }

  #bootsplash {
      position: fixed;
      inset: 0;
      background: #191b1b;
      color: #fff;
      font-family: 'Courier New', Courier, monospace;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      z-index: 9999;
  }

  #bootsplash::after {
      content: '';
      pointer-events: none;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: repeating-linear-gradient(to bottom,
              rgba(0, 0, 0, 0.2) 0,
              rgba(0, 0, 0, 0.2) calc(0.2vh),
              transparent calc(0.2vh),
              transparent calc(0.4vh));
      z-index: 2;
  }

  .boottext {
      font-size: 1.2rem;
      margin: 8px 0;
      text-shadow: 0 0 3px #0f0;
  }

  .article-overlay {
      width: 70.0%;
      height: 90%;
      background-image: url("../img/screen-trans.png");
      background-repeat: repeat;
      background-size: contain;
      background-color: #03010465;
      border-top: 4px solid #11f099;
      border-bottom: 1px solid #11f099;
      display: flex;
      visibility: hidden;
      box-shadow: 5px 10px 6px #11f099;
      transform: translate(41%, -65%);
      overflow: hidden;
      padding-bottom: 10px;
  }

  #mainFrame {
      display: grid;
      grid-template-rows: auto 1fr auto;
      box-sizing: border-box;
      gap: 1rem;
      width: 100%;
      max-width: 600px;
      background: #55ffff;
      box-shadow: 0 0 0 3px #000;
      padding: 1rem;
      height: 100%;

  }

  header {
      text-align: center;
  }

  .retro-title {
      display: flex;
      color: #ffffff;
      transition: all 0.3s ease-in-out;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      letter-spacing: 0.2em;
  }

  .retro-title-purple {
      color: #55ff55;
      font-size: 2.5rem;
      font-family: FFFORWA, monospace;
      color: #55ff55;
      transform: perspective(200px) scaleY(1.5) rotateX(30deg);
      text-shadow: 0px 6px #00aaaa;
  }

  .retro-title-red:hover {
    color: #fc9393;
    animation: neonFlickerPink 0.6s ease-out 1 forwards;
}

.retro-title-purple:hover {
    color: #a7ffa7;
    animation: neonFlickerPink 0.6s ease-out 1 forwards;
}



.glitch-alien::before,
.glitch-alien::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    width: 100%;
    background: inherit;
    overflow: hidden;
    color: inherit;
    text-shadow: 0 0 2px #ff00cc;
    pointer-events: none;
}

.glitch-alien {
   
    color: #55ff55;
    text-shadow: 0 0 22px #ff00cc;
    
}

.glitch-alien::before {
    animation: glitch-anim-1 0.5s 2 linear infinite;
}

.glitch-alien::after {
    animation: glitch-anim-2 0.9s 2 linear alternate;
}

.retro-title-red:hover {
    color: #fc9393;
    animation: neonFlickerPink 0.6s ease-out 1 forwards;
}

.retro-title-purple:hover {
    color: #a7ffa7;
    animation: neonFlickerPink 0.6s ease-out 1 forwards;
}

.neon-glow-red {
    color: #ffc6c6;
    animation: neonFlickerPink 0.6s ease-out 1 infinite alternate;
}

.neon-glow-purple {
    color: #ffa4ff;
    animation: neonFlickerPink 1.6s ease-out 1 infinite alternate;
}

/* start animations */

@keyframes neonFlickerPink {
    0% {
        text-shadow:
            0 0 1px #ff99cc,
            0 0 2px #ff66cc,
            0 0 4px #ff3399,
            0 0 8px #ff3399;
        opacity: 0.8;
    }

    50% {
        text-shadow:
            0 0 2px #ff66cc,
            0 0 5px #ff66cc,
            0 0 10px #ff3399,
            0 0 15px #ff3399;
        opacity: 1;
    }

    100% {
        text-shadow:
            0 0 4px #ff99cc,
            0 0 8px #ff66cc,
            0 0 12px #ff33cc,
            0 0 20px #ff00cc;
        opacity: 1;
    }
}


@keyframes glitch-anim-1 {
    0% {
        clip-path: inset(0 0 90% 0);
        transform: translate(-2px, -2px);
    }

    20% {
        clip-path: inset(10% 0 70% 0);
        transform: translate(4px, 2px);
    }

    40% {
        clip-path: inset(30% 0 50% 0);
        transform: translate(-1px, 1px);
    }

    60% {
        clip-path: inset(40% 0 40% 0);
        transform: translate(1px, -3px);
    }

    80% {
        clip-path: inset(60% 0 20% 0);
        transform: translate(-2px, 2px);
    }

    100% {
        clip-path: inset(80% 0 0 0);
        transform: translate(0, 0);
    }
}

@keyframes glitch-anim-2 {
    0% {
        clip-path: inset(80% 0 0 0);
        transform: translate(2px, 2px);
    }

    20% {
        clip-path: inset(60% 0 20% 0);
        transform: translate(-2px, -1px);
    }

    40% {
        clip-path: inset(40% 0 40% 0);
        transform: translate(2px, 1px);
    }

    60% {
        clip-path: inset(30% 0 50% 0);
        transform: translate(-1px, -2px);
    }

    80% {
        clip-path: inset(10% 0 70% 0);
        transform: translate(3px, 1px);
    }

    100% {
        clip-path: inset(0 0 90% 0);
        transform: translate(0, 0);
    }
}
/* end animations */

  .retro-red-block {
      display: flex;
      flex-direction: column;
      margin: 0.95rem;
  }

  .retro-title-red {

      font-size: 2rem;
      color: #ff5555;
      font-family: FFFORWA;
      transform: skewX(-25deg) rotate(-25deg);
      letter-spacing: 0.15em;

      text-shadow: -7px 4px 0px #aa0000;
  }

  #contentSection {
      overflow-y: auto;
      padding-right: 0.4rem;
  }

  .content-tabs-shell {
      margin-bottom: 0.9rem;
  }

  .content-tabs {
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
  }

  .content-tab {
      font-family: FFFORWA, monospace;
      letter-spacing: 0.12em;
      border: 2px solid #000;
      outline: 1px solid #000;
      background: #fff;
      color: #000;
      box-shadow: 3px 3px 0 #000;
      padding: 0.45rem 0.8rem;
      cursor: pointer;
      font-size: 0.75rem;
      transition: transform 0.12s ease, box-shadow 0.12s ease;
  }

  .content-tab:hover {
      transform: translateY(-1px);
      box-shadow: 4px 4px 0 #000;
  }

  .content-tab.is-active {
      background: #ff5555;
      color: #fff;
      box-shadow: inset 0 0 0 2px #aa0000, 3px 3px 0 #000;
  }

  .content-tab-link {
      text-decoration: none;
  }

  .tab-pane[hidden] {
      display: none;
  }

  .tab-pane.is-active {
      display: block;
  }

  .card-container {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1rem;
  }

  .project-entry {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 0.85rem;
      padding: 0.65rem;
      cursor: pointer;
      background: #fff;
      border: 2px solid red;
      box-shadow: 2px 12px 0 #000;
      border-radius: 4px;
  }

  .project-entry-thumb {
      width: 120px;
      min-width: 120px;
      aspect-ratio: 1 / 1;
      overflow: hidden;
      border: 2px solid #000;
      box-shadow: 2px 2px 0 #000;
      background: #fff;
  }

  .project-entry-thumb img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      image-rendering: pixelated;
  }

  .project-entry-body {
      min-width: 0;
      flex: 1 1 auto;
  }

  .project-section-label {
      font-size: 0.72rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: #aa0000;
      margin-bottom: 0.45rem;
  }

  .project-entry-head {
      display: flex;
      justify-content: space-between;
      align-items: start;
      gap: 0.8rem;
      margin-bottom: 0.45rem;
  }

  .project-entry-head h1 {
      margin: 0.1rem 0 0.55rem;
      min-width: 0;
      font-size: 1rem;
      line-height: 1.3rem;
      overflow-wrap: anywhere;
  }

  .project-entry-toggle {
      flex: 0 0 auto;
      border: 1px solid #000;
      background: #55ffff;
      color: #000;
      box-shadow: 2px 2px 0 #000;
      font-family: FFFORWA, monospace;
      font-size: 0.68rem;
      letter-spacing: 0.08em;
      padding: 0.3rem 0.55rem;
      text-transform: uppercase;
      cursor: pointer;
  }

  .project-entry-copy p {
      margin: 0 0 0.35rem;
      font-size: 0.82rem;
      line-height: 1.6;
  }

  .project-entry:nth-child(odd) {
      background: #ffffff;
  }

  .project-entry:nth-child(even) {
      background: #d8d8d8;
  }

  .references-shell {
      border: 2px solid #f00;
      outline: 1px solid #000;
      box-shadow: 2px 12px 0 #000;
      background: #fff;
      padding: 0.6rem;
  }

  .references-meta {
      color: #122;
      background: rgba(85, 255, 255, 0.45);
      border: 1px solid #053838;
      padding: 0.45rem 0.55rem;
      margin-bottom: 0.55rem;
      font-size: 0.75rem;
      display: flex;
      gap: 0.8rem;
      flex-wrap: wrap;
  }

  .references-muted {
      opacity: 0.82;
  }

  .references-controls {
      display: grid;
      grid-template-columns: repeat(3, minmax(180px, 1fr));
      gap: 0.5rem;
      margin-bottom: 0.75rem;
  }

  .references-controls select,
  .references-controls input {
      border: 2px solid #001;
      background: #000;
      color: #7dff9a;
      padding: 0.5rem;
      font-size: 0.75rem;
      outline: none;
      font-family: press2p, monospace;
  }

  .references-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
      gap: 0.6rem;
      overflow: visible;
  }

  .references-card {
      background: rgba(1, 8, 13, 0.84);
      border: 1px solid #17f59c;
      box-shadow: 0 0 8px rgba(23, 245, 156, 0.25);
      cursor: pointer;
      transition: transform 0.14s ease, box-shadow 0.14s ease;
  }

  .references-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 0 14px rgba(255, 95, 143, 0.45);
  }

  .references-card img {
      width: 100%;
      display: block;
      image-rendering: pixelated;
      background: #000;
      aspect-ratio: 4 / 3;
      object-fit: cover;
  }

  .references-card-text {
      padding: 0.4rem;
      font-size: 0.65rem;
      line-height: 1.35;
      color: #a8fef9;
  }

  .references-tag {
      color: #ffb7ca;
  }

  #referencesDialog {
      width: min(1100px, 95vw);
      border: 2px solid #17f59c;
      background: #01080d;
      color: #ddfff0;
      box-shadow: 0 0 28px rgba(23, 245, 156, 0.4);
      max-width: none;
      height: auto;
  }

  .ref-viewer-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 0.75rem;
      font-size: 0.75rem;
      margin-bottom: 0.6rem;
  }

  .ref-viewer-actions {
      display: flex;
      gap: 0.35rem;
  }

  .ref-viewer-actions button {
      border: 1px solid #17f59c;
      background: #02131a;
      color: #a3ffd4;
      padding: 0.35rem 0.55rem;
      cursor: pointer;
      font-family: press2p, monospace;
      font-size: 0.65rem;
  }

  .ref-viewer-img {
      width: 100%;
      max-height: 78vh;
      object-fit: scale-down;
      image-rendering: pixelated;
      background: #000;
      border: 1px solid #145;
      display: block;
  }

  .ref-viewer-meta {
      margin-top: 0.55rem;
      font-size: 0.68rem;
      color: #9ed9d4;
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
  }

  .ref-viewer-meta a {
      color: #7dff9a;
  }

  .article-dialog,
  .microblog-dialog {
      width: min(980px, 94vw);
      max-width: none;
      height: min(88vh, 900px);
      border: 2px solid #ff5555;
      background: #061117;
      color: #d8fff2;
      box-shadow: 0 0 0 3px #000, 0 0 36px rgba(0, 0, 0, 0.6);
      padding: 0;
  }

  .article-dialog::backdrop,
  .microblog-dialog::backdrop {
      background: rgba(0, 0, 0, 0.8);
  }

  .article-dialog > .closeBtn,
  .microblog-dialog > .closeBtn {
      display: none;
  }

  .article-dialog-shell,
  .microblog-dialog-shell {
      display: grid;
      grid-template-rows: auto 1fr;
      height: 100%;
  }

  .article-dialog-head,
  .microblog-dialog-head {
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      align-items: start;
      padding: 1rem 1rem 0.75rem;
      border-bottom: 1px solid #184851;
      background: linear-gradient(180deg, rgba(3, 20, 25, 0.96) 0%, rgba(5, 31, 39, 0.96) 100%);
  }

  .article-dialog-head > div,
  .microblog-dialog-head > div {
      min-width: 0;
      flex: 1 1 auto;
  }

  .article-section-label,
  .microblog-section-label {
      font-size: 0.72rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: #aa0000;
  }

  .article-dialog-head h2,
  .microblog-dialog-head h2 {
      margin: 0.3rem 0 0;
      font-size: clamp(1.15rem, 2.4vw, 1.8rem);
      line-height: 1.2;
      color: #f3fff9;
      overflow-wrap: anywhere;
  }

  .article-dialog-close,
  .microblog-dialog-close {
      flex: 0 0 auto;
      border: 1px solid #000;
      background: #55ffff;
      color: #000;
      box-shadow: 2px 2px 0 #000;
      font-family: FFFORWA, monospace;
      font-size: 0.72rem;
      letter-spacing: 0.08em;
      padding: 0.45rem 0.7rem;
      text-transform: uppercase;
      cursor: pointer;
  }

  .article-dialog-body,
  .microblog-dialog-body {
      overflow-y: auto;
      padding: 1.2rem 1.4rem 1.5rem;
      column-width: 22rem;
      column-gap: 2.2rem;
      column-rule: 1px solid rgba(138, 247, 193, 0.18);
  }

  .article-dialog-body p,
  .microblog-dialog-body p {
      margin: 0 0 0.85rem;
      font-size: 0.92rem;
      line-height: 1.55;
      max-width: none;
      text-align: justify;
      text-wrap: pretty;
      break-inside: avoid;
      font-family: agsfnt0, monospace;
      color: #dfffee;
      text-shadow:
          0 0 1px rgba(125, 255, 154, 0.95),
          0 0 3px rgba(125, 255, 154, 0.45),
          0 0 6px rgba(39, 214, 123, 0.22);
  }

  .article-dialog-figure,
  .microblog-dialog-figure {
      margin: 0 0 1.1rem;
      break-inside: avoid;
  }

  .article-dialog-figure img,
  .microblog-dialog-figure img {
      width: 100%;
      display: block;
      border: 1px solid #1f5d54;
      box-shadow: 0 0 0 2px #000;
      background: #000;
      image-rendering: pixelated;
  }

  .card {
      display: flex;
      flex-direction: column;
      background: #fff;
      border: 2px solid red;
      box-shadow: 2px 12px 0 #000;
      border-radius: 4px;
      padding: 0.1rem;
  }

  .card:hover {
      transform: translateY(-2px);
        color: #00ff37;
    animation: neonFlickerPink 0.6s ease-out 1 forwards;
}
   

  .footermenuItem {
      gap: 1rem;
      container-type: inline-size;
  }


  .card-text {
       font-size: clamp(0.75rem, 4cqi, 1.4rem);
                /* ^ 4 % of the container’s width  */
    line-height: 1.4;
  }

  .card-text h1 {
      font-size: 1.2rem;
      margin: 0 0 0.5rem 0;
  }

    .card-text p {
      font-size: 0.75rem;
      margin: 0 0 0.5rem 0;
  }

  /* Portrait orientation: stack generic cards vertically */
  @media (orientation: portrait) {
      .card {
          flex-direction: column;
      }
  }

footer nav{
    display:grid;
    gap:1.25rem 2rem;
    grid-template-columns:repeat(auto-fit,minmax(80px,1fr));
    justify-items:center;             /* centre each column                */
    align-items:start;
}

    .social-title {
    grid-column:1/-1;                 /* span the whole row */
    font-size:clamp(0.6rem,4vw,0.8rem);
    color:#000000;
    letter-spacing:.15em;
    text-align:center;
    margin-bottom:.5rem;
}

  .footermenuItem img {
      width: 100%;
      height: auto;
      display: block;
  }


  .social-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 64px;
  }

  .social-item span,          /* or .social-item p – whatever you use */
.nav-button::after {        /* if you inject labels with ::after   */
    font-size: clamp(0.6rem, 3cqi, 1rem);
}

.nav-button:hover {
    transform: scale(1.1);
    box-shadow: 5px 5px 0 #000;
    transition: transform 0.12s ease-in-out;

}

 .nav-button{
    width:clamp(64px,6vw,96px);
    height:clamp(64px,6vw,96px);

    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;

    background-color:#fff;
    border:2px solid red;
    box-shadow:3px 3px 0 #000;
    outline:1px solid #000;
    cursor:pointer;

    transition:.12s transform;
 }

  .logo-fb {
      background-image: url('../img/fb-logo-xs.png');
  }

  .logo-tw {
      background-image: url('../img/tw-logo-xs2.png');
  }

  .logo-it {
      background-image: url('../img/itch-logo-xs2.png');
  }

  .logo-ig {
      background-image: url('../img/ig-logo-xs2.png');
  }

  .logo-tk {
      background-image: url('../img/tk-logo-xs.png');
  }

  .logo-yt {
      background-image: url('../img/yt-logo-xs.png');
  }

  .logo-bs {
      background-image: url('../img/bs-logo-xs.png');
  }

  .logo-tb {
      background-image: url('../img/tb-logo-xs.png');
  }

  .logo-bc {
      background-image: url('../img/bc-logo-xs.png');
  }

  dialog {
      width: 90%;
      max-width: 600px;
      height: 80vh;
      border: 4px solid #55ffff;
      background: #ffffff url('../img/screen-trans.png') repeat;
      box-shadow: 0 0 6px #000;
      padding: 1rem;
  }

  /* Medium screens: widen layout and icons */
  @media (min-width: 601px) {

      /* Tablet and small desktop */
      #mainFrame {
          max-width: 900px;
      }

      .nav-button {
          width: 2.0rem;
          height: 2.0rem;
      }

      .card-text {
          font-size: 1rem;
      }

      .card-text h1 {
          font-size: 1.4rem;
      }

      .content-tab {
          font-size: 0.85rem;
      }
  }

  @media (max-width: 720px) {
      .references-controls {
          grid-template-columns: 1fr;
      }

      .project-entry {
          gap: 0.7rem;
      }

      .project-entry-thumb {
          width: 72px;
          min-width: 72px;
      }

      .project-entry-head {
          flex-direction: column;
      }

      .article-dialog,
      .microblog-dialog {
          width: 100vw;
          height: 100vh;
      }

      .article-dialog-head,
      .microblog-dialog-head {
          padding: 0.85rem 0.85rem 0.7rem;
      }

      .article-dialog-head h2,
      .microblog-dialog-head h2 {
          font-size: 1.1rem;
      }

      .article-dialog-body,
      .microblog-dialog-body {
          padding: 0.9rem;
          column-width: auto;
          column-gap: 0;
          column-rule: 0;
      }
  }

  /* Large screens: maximum width and larger icons */
  @media (min-width: 1024px) {

      /* Desktop and above */
      #mainFrame {
          max-width: 1200px;
      }

      .nav-button {
          width: 3.5rem;
          height: 3.5rem;
      }

      .card-text {
          font-size: 1.1rem;
      }

      .card-text h1 {
          font-size: 1.6rem;
      }
  }