/* ================================================
   REGRETTABLE SOLUTIONS
   Best viewed in Internet Explorer 6.0 at 800x600
   ================================================ */

*, *::before, *::after { box-sizing: border-box; }

::selection { background: #FF00FF; }

html { height: 100%; }

body {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  font-size: 11pt;
  font-family: 'Fira Code', 'Courier New', monospace;
  color: #FFFF00;
  background-color: #000033;
}

a         { color: #FF00FF; text-decoration: none; }
a:hover   { color: #FFFF00; text-decoration: underline; }
a:visited { color: #FF6600; }

/* ---- Marquee ---- */
.top-marquee {
  display: block;
  flex-shrink: 0;
  background-color: #000033;
  color: #FFFF00;
  font-family: 'Comic Sans MS', cursive, sans-serif;
  font-weight: bold;
  font-size: 11pt;
  border-top: 2px solid #00FFFF;
  border-bottom: 2px solid #00FFFF;
  padding: 3px 0;
}

/* ---- Page layout ---- */
.page-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.header-cell {
  flex-shrink: 0;
  background-color: #000033;
  text-align: center;
  padding: 10px 8px;
  border-bottom: 3px solid #00FFFF;
}

.main-row {
  display: flex;
  flex: 1;
  min-height: 0;
  align-items: stretch;
}

/* ---- Header ---- */
.site-title {
  font-family: 'Comic Sans MS', Impact, cursive;
  color: #FF00FF;
  font-size: clamp(16pt, 3vw, 26pt);
  margin: 4px 0;
  letter-spacing: 3px;
  position: relative;
  animation: glitch-skew 4s infinite linear alternate-reverse;
}

.site-title::before,
.site-title::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  font: inherit;
  letter-spacing: inherit;
}

.site-title::before {
  color: #00FFFF;
  text-shadow: 3px 0 #00FFFF;
  animation: glitch-top 2.5s infinite steps(1);
}

.site-title::after {
  color: #FF0066;
  text-shadow: -3px 0 #FF0066;
  animation: glitch-bot 2.5s infinite steps(1);
}

@keyframes glitch-skew {
  0%,100%  { transform: skewX(0deg); }
  5%       { transform: skewX(-2deg); }
  6%       { transform: skewX(3deg); }
  7%       { transform: skewX(-1.5deg); }
  8%       { transform: skewX(0deg); }
  20%      { transform: skewX(0deg); }
  21%      { transform: skewX(1deg); }
  22%      { transform: skewX(0deg); }
  55%      { transform: skewX(0deg); }
  56%      { transform: skewX(-2.5deg); }
  57%      { transform: skewX(2deg); }
  58%      { transform: skewX(0deg); }
  80%      { transform: skewX(0deg); }
  81%      { transform: skewX(1.5deg); }
  82%      { transform: skewX(0deg); }
}

@keyframes glitch-top {
  0%,100%  { clip-path: inset(0 0 100% 0); transform: translate(0); }
  5%       { clip-path: inset(5%  0 70% 0); transform: translate(-8px, -2px); }
  6%       { clip-path: inset(30% 0 45% 0); transform: translate(7px,   0);   }
  7%       { clip-path: inset(60% 0 15% 0); transform: translate(-6px,  2px); }
  8%       { clip-path: inset(15% 0 65% 0); transform: translate(8px,  -1px); }
  9%       { clip-path: inset(0   0 100% 0); transform: translate(0);         }
  20%      { clip-path: inset(0   0 100% 0); transform: translate(0);         }
  21%      { clip-path: inset(40% 0 35% 0); transform: translate(-5px, 0);    }
  22%      { clip-path: inset(0   0 100% 0); transform: translate(0);         }
  55%      { clip-path: inset(0   0 100% 0); transform: translate(0);         }
  56%      { clip-path: inset(10% 0 55% 0); transform: translate(9px,  -2px); }
  57%      { clip-path: inset(50% 0 20% 0); transform: translate(-7px,  1px); }
  58%      { clip-path: inset(75% 0 5%  0); transform: translate(5px,   0);   }
  59%      { clip-path: inset(0   0 100% 0); transform: translate(0);         }
  80%      { clip-path: inset(0   0 100% 0); transform: translate(0);         }
  81%      { clip-path: inset(25% 0 50% 0); transform: translate(-4px, 0);    }
  82%      { clip-path: inset(0   0 100% 0); transform: translate(0);         }
}

@keyframes glitch-bot {
  0%,100%  { clip-path: inset(100% 0 0 0); transform: translate(0); }
  5%       { clip-path: inset(70% 0 5%  0); transform: translate(8px,   2px); }
  6%       { clip-path: inset(45% 0 30% 0); transform: translate(-7px,  0);   }
  7%       { clip-path: inset(15% 0 60% 0); transform: translate(6px,  -2px); }
  8%       { clip-path: inset(65% 0 15% 0); transform: translate(-8px,  1px); }
  9%       { clip-path: inset(100% 0 0 0); transform: translate(0);           }
  20%      { clip-path: inset(100% 0 0 0); transform: translate(0);           }
  21%      { clip-path: inset(35% 0 40% 0); transform: translate(5px,  0);    }
  22%      { clip-path: inset(100% 0 0 0); transform: translate(0);           }
  55%      { clip-path: inset(100% 0 0 0); transform: translate(0);           }
  56%      { clip-path: inset(55% 0 10% 0); transform: translate(-9px,  2px); }
  57%      { clip-path: inset(20% 0 50% 0); transform: translate(7px,  -1px); }
  58%      { clip-path: inset(5%  0 75% 0); transform: translate(-5px,  0);   }
  59%      { clip-path: inset(100% 0 0 0); transform: translate(0);           }
  80%      { clip-path: inset(100% 0 0 0); transform: translate(0);           }
  81%      { clip-path: inset(50% 0 25% 0); transform: translate(4px,  0);    }
  82%      { clip-path: inset(100% 0 0 0); transform: translate(0);           }
}

.site-subtitle {
  color: #00FFFF;
  font-style: italic;
  font-size: 10pt;
  margin: 0;
}

/* ---- Sidebars ---- */
.sidebar {
  width: 180px;
  min-width: 180px;
  flex-shrink: 0;
  background-color: #000018;
  padding: 4px;
  overflow-y: auto;
}

.sidebar-left  { border-right: 1px solid #003344; }
.sidebar-right { border-left:  1px solid #003344; }

.sidebar-box {
  border: 1px solid #00AAAA;
  margin-bottom: 6px;
  background-color: #00001e;
}

.sidebar-box.centered { text-align: center; }

.sidebar-title {
  background-color: #000055;
  color: #00FFFF;
  font-weight: bold;
  font-size: 7.5pt;
  text-align: center;
  padding: 2px 4px;
  border-bottom: 1px solid #00AAAA;
  letter-spacing: 1px;
}

.sidebar-content {
  padding: 5px 6px;
  font-size: 8.5pt;
  color: #BBBBBB;
  line-height: 1.5;
}

.sidebar-content.small   { font-size: 8pt; }
.sidebar-content.online  { font-size: 8.5pt; line-height: 1.8; }
.sidebar-content.awards  { text-align: center; font-size: 9pt; line-height: 1.8; }
.sidebar-content.music   { font-size: 8pt; color: #FF66FF; line-height: 1.7; }
.sidebar-content.webring { font-size: 8pt; text-align: center; }
.sidebar-content.quotes  { font-size: 8pt; color: #FFFF00; font-style: italic; line-height: 1.6; }
.sidebar-content.ie      { font-size: 7pt; color: #777; line-height: 1.7; text-align: center; }

/* ---- Visitor counter ---- */
.counter {
  font-family: 'Courier New', monospace;
  background-color: #000000;
  color: #FF2200;
  padding: 2px 6px;
  border: 2px inset #555555;
  letter-spacing: 3px;
  font-size: 11pt;
  font-weight: bold;
}

/* ---- Status dots ---- */
.dot-on  { color: #00FF00; }
.dot-off { color: #333; }

/* ---- Blink variants ---- */
.blink-danger { color: #FF0000; font-weight: bold; }
.hl           { color: #FFFF00; }
.muted        { color: #888; }

/* ---- Main / terminal area ---- */
.main-content {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: #000033;
}

.terminal-header {
  flex-shrink: 0;
  background-color: #000033;
  color: #00FFFF;
  font-size: 8.5pt;
  text-align: center;
  padding: 4px 8px;
  border-bottom: 1px solid #00AAAA;
  letter-spacing: 1px;
}

#container {
  flex: 1;
  overflow-y: auto;
  padding: .1em 1em 1em 1em;
}

#container output {
  display: block;
  width: 100%;
}

#container output pre { margin: 0; }

.terminal-footer {
  flex-shrink: 0;
  background-color: #00001a;
  color: #555;
  font-size: 7.5pt;
  text-align: center;
  padding: 3px 6px;
  border-top: 1px solid #003333;
}

.cmd-hint { color: #00FFFF; }

/* ---- Input line ---- */
.input-line {
  display: flex;
  align-items: center;
}

.input-line > div:last-child { flex: 1; }

/* ---- Powerline prompt ---- */
.prompt {
  display: inline-flex;
  align-items: stretch;
  white-space: nowrap;
  user-select: none;
  margin-right: 8px;
  font-size: 10pt;
  --arrow: 0.6em;
}

.pl-seg {
  display: flex;
  align-items: center;
  font-weight: bold;
}

.pl-seg1 {
  background: #AF00D7;
  color: #fff;
  padding: 3px calc(var(--arrow) + 8px) 3px 10px;
  clip-path: polygon(0 0, calc(100% - var(--arrow)) 0, 100% 50%, calc(100% - var(--arrow)) 100%, 0 100%);
  z-index: 2;
}

.pl-seg2 {
  background: #003A9A;
  color: #00FFFF;
  margin-left: calc(-1 * var(--arrow));
  padding: 3px calc(var(--arrow) + 8px) 3px calc(var(--arrow) + 8px);
  clip-path: polygon(0 0, calc(100% - var(--arrow)) 0, 100% 50%, calc(100% - var(--arrow)) 100%, 0 100%);
  z-index: 1;
}

.pl-hash {
  display: flex;
  align-items: center;
  color: #FF00FF;
  font-weight: bold;
  margin-left: calc(-1 * var(--arrow));
  padding: 3px 8px 3px calc(var(--arrow) + 8px);
}

.cmdline {
  outline: none;
  background-color: transparent;
  margin: 0;
  width: 100%;
  font: inherit;
  border: none;
  color: #FFFF00;
  caret-color: #FFFF00;
}

.ls-files { column-width: 120px; }

/* ---- Terminal init banner ---- */
.term-banner { overflow: hidden; margin-bottom: 8px; }
.term-banner img { float: left; padding: 0 10px 20px 0; }
.term-banner h2 { color: #FF00FF; letter-spacing: 4px; margin: 0 0 6px 0; }
.term-banner .banner-date { color: #00FFFF; margin: 4px 0; }
.term-banner .banner-help { color: #FFFF00; margin: 4px 0; }

/* ---- Footer ---- */
.footer-cell {
  flex-shrink: 0;
  background-color: #000033;
  text-align: center;
  padding: 6px;
  border-top: 3px solid #00FFFF;
  color: #888;
  font-size: 9pt;
}

.footer-meta { color: #444; }

.retro-hr {
  border: 0;
  border-top: 1px solid #00FFFF;
  margin: 5px 0 8px 0;
}

/* ---- Blink ---- */
.blink, .blink-danger {
  animation: blink-anim 1s step-end infinite;
}

@keyframes blink-anim {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .main-row { flex-direction: column; }

  .sidebar {
    width: 100%;
    min-width: 0;
    overflow-y: visible;
  }

  .sidebar-left  { border-right: none; border-bottom: 2px solid #003344; }
  .sidebar-right { border-left:  none; border-top:    2px solid #003344; }

  .site-title { font-size: clamp(14pt, 5vw, 22pt); letter-spacing: 1px; }
}

@media (max-width: 480px) {
  .top-marquee { font-size: 9pt; }

  .sidebar { padding: 3px; }

  .sidebar-box {
    display: inline-block;
    width: calc(50% - 8px);
    vertical-align: top;
    margin: 3px;
  }
}