/* Catppuccin Mocha Theme
 * https://catppuccin.com/palette/mocha
 *
 * Backgrounds
 *   Base     → #1e1e2e    (main background)
 *   Mantle   → #181825    (slightly darker - optional use)
 *   Crust    → #11111b    (darkest - very subtle accents)
 *
 * Text
 *   Text          → #cdd6f4    (main text)
 *   Subtext1      → #bac2de    (secondary / dim text)
 *   Subtext0      → #a6adc8    (even dimmer)
 *   Overlay2      → #9399b2    (muted / borders)
 *
 * Accents (common choices for links, highlights, prompts)
 *   Mauve         → #cba6f7    (purple - great for prompts/important)
 *   Blue          → #89b4fa    (blue links)
 *   Lavender      → #b4befe    (soft purple-blue)
 *   Peach         → #fab387    (warm accent)
 *   Green         → #a6e3a1    (success/positive)
 *   Red           → #f38ba8    (errors/warning)
 *   Rosewater     → #f5e0dc    (very soft, good for subtle highlights)
 */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,700;1,400&display=swap');

* {
  background: #0e111a;          /* base */
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
  color: #cdd6f4;               /* text */
}

body {
  min-height: 95vh;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  font-size: 1rem;
}

h3 {
  display: inline-block;
  font-size: inherit;
  padding: 0 0.5em;
  margin-bottom: 0;
  background-color: #cba6f7;    /* mauve – nice vibrant heading */
  color: #1e1e2e;               /* dark text on accent for contrast */
}

a {
  color: #89b4fa;               /* blue – classic link color */
  text-decoration: none;
}

a:hover {
  color: #b4befe;               /* lavender – subtle hover lift */
  text-decoration: underline;
}

footer {
  color: #bac2de;               /* subtext1 – softer footer */
  margin-top: auto;
}

.text-background {
  color: #bac2de;               /* subtext1 */
}

.text-secondary {
  color: #ffeb3b;               /* blue – or try #b4befe / lavender */
}

.twitch:hover   { color: #cba6f7; }  /* mauve */
.youtube:hover  { color: #f38ba8; }  /* red */
.twitter:hover  { color: #89b4fa; }  /* blue */
.bluesky:hover  { color: #89dce8; }  /* sky (closest match) */
.instagram:hover{ color: #f5c2e7; }  /* pink */
.github:hover   { color: #a6e3a1; }  /* green */
.charm:hover    { color: #cba6f7; }  /* mauve */

.cursor {
  color: #fab387;               /* peach – warm cursor */
}

.output {
  width: 100%;
  max-width: 80ch;
  animation: fade 5s;
}

.typeme {
  width: 30ch;
  animation: typing 2s steps(25), blink .5s step-end infinite alternate;
  white-space: nowrap;
  overflow: hidden;
  border-right: 10px solid #fab387;   /* peach cursor bar */
}

/* animation */
@keyframes fade {
  0%   { opacity: 0 }
  50%  { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes typing {
  0%   { width: 0; }
  100% { width: 30ch; }
}

@keyframes blink {
  50% { border-color: transparent; }
}

/* dynamic resizing */
@media (min-width: 600px) {
  body {
    font-size: 1.25rem;
  }
}