@import url('font.css');

:root {
  --bg:      #000;
  --fg:      #00ff00;
  --fg-dim:  #008800;
  --bright:  #fff;
  --accent:  #ffff00;
  --warn:    #f00;
  --muted:   #555;
  --prompt:  #888;
  --surface-1: #111;
  --font:    'IBM VGA', 'Courier New', Courier, monospace;
  --size:    16px;
  --marker:  '# ';
  --width:   800px;
  --bg-image: none;
}

body {
    color: var(--fg);
    font-family: var(--font);
    font-size: var(--size);
    margin: 0;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    background: var(--bg) var(--bg-image); 
  }

#wrap {
  padding: 20px;
  width: 100%;
  max-width: var(--width);
  background: var(--bg);
}

.borderwrap {
  background: var(--bg);
  border: 2px solid #2a2c2e;
  box-shadow:
    0 0 0 3px  #929292,
    0 0 0 4px  #373c44,
    0 0 0 12px #56585a,
    0 0 0 13px #2a2c2e;
  padding: 20px;
  width: 100%;
  max-width: var(--width);
}

#wrap.wide { max-width: 1700px; }

  a              { color: var(--fg); }
  a:visited      { color: var(--fg-dim); }
  a:hover        { color: var(--bright); background: var(--fg-dim); }

  hr             { border: none; border-top: 1px solid var(--fg); margin: 16px 0; }

  h1, h2         { font-size: 1em; font-weight: normal; margin: 0 0 4px; }
  h1             { color: var(--bright); }
  h2, summary    { color: var(--accent); margin-top: 14px; }
  p              { margin: 4px 0; }

  .flesh         {color:#b85b5b;text-shadow: 1px 0 #f00}
  .dream         {color:#a26ce9; text-shadow: 1px 0 blue}
  .machine       {color:#ebbb6a; text-shadow: 1px 0 #00ff00}

  .prompt        { color: var(--prompt); }
  
  .warnsmall, .muted  { font-size: 0.8em;}
  .warnsmall          { color: var(--warn); }
  .warn               { color: var(--warn); }

  .muted         { color: var(--muted); }
  .amber         { color: #ffb000; }
  .yellow        { color: var(--accent); }

  ul             { margin: 4px 0; padding-left: 20px; }
  li             { margin: 2px 0; }

.lies { 
  color: #f00; 
  display: inline-block;
  animation: lies 6s infinite; }
@keyframes lies {
  90%,100%  { text-shadow: -0.6px 0 rgb(0, 0, 255); transform: none; }
  91%          { text-shadow: 2px 0 cyan, -2px 0 blue; transform: none; }
  92%          { text-shadow: -2px 0 cyan, 2px 0 blue; transform: none; }
  93%          { text-shadow: 0; transform: none; }
}

.text-flicker { animation: textFlickerGlitch 0.12s steps(2); }
@keyframes textFlickerGlitch {
  0%   { text-shadow: 2px 0 cyan, -2px 0 red; transform: skewX(-3deg); opacity: 0.65; }
  50%  { text-shadow: -2px 0 cyan, 2px 0 red; transform: skewX(3deg); opacity: 0.9; }
  100% { text-shadow: none; transform: none; opacity: 1; }
}



  .blink { animation: blink 1s step-end infinite; }
  @keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }

  audio { display: none; }

  button {
    background: none;
    border: 1px solid var(--fg);
    color: var(--fg);
    font-family: inherit;
    font-size: inherit;
    padding: 1px 8px;
    cursor: pointer;
  }

  buttonmuted {
    background: none;
    border: 1px solid var(--muted);
    color: var(--muted);
    font-family: inherit;
    font-size: inherit;
    padding: 1px 8px;
    cursor: pointer;
  }

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

  /* some misc */
  li::marker { content: var(--marker);}
  summary { list-style: none; }          /* kill that ugly triangle. ew. */
  summary::before { content: '[+] '; color: var(--accent); }
  summary.muted::before { color: inherit; }
  details > summary::before { content: "[+] "; }
  details[open] > summary::before { content: "[-] "; }
  summary::-webkit-details-marker { display: none; }

  /* CRT effect - i dont use this anymore but lets comment it out incase i ever decide i want it again.
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(
      0deg,
      rgba(0,0,0,0.13) 0px, rgba(0,0,0,0.13) 1px,
      transparent      1px, transparent      3px
    ); 
    pointer-events: none;
    z-index: 9999;
  }*/

/* footer - webring containment. because they are MISBEHAVING. */
.footer-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* tux gets his beautiful white card because he is beautiful. */
#linuxring { background: #fff; padding: 4px 8px; display: inline-flex; align-items: center; }

/* gcp dot */
iframe[title="global consciousness dot"] {
  border: none;
  width: 50px;
  height: 50px;
}

  /* tw box etc - is this even used anymore? */
  #content-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.226);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
  }

  #content-box {
    max-width: 500px;
    width: 100%;
    padding: 28px 32px;
    background: var(--bg);
    margin: auto;
  }

  #content-box p {
    line-height: 1.7;
    margin: 0 0 24px;
  }

  #content-ok {
    background: none;
    border: none;
    color: var(--fg);
    font-family: var(--font);
    font-size: 1em;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
  }
  #content-ok:hover { color: var(--bright); }


/* quick and dirty mobile fix, who knows if this even works? */
  @media (max-width: 768px) {
    :root { --size: 24px; }
  }