:root{
  --base:#24273a;
  --surface:#494d64;
  --text:#cad3f5;
  --sub:#a5adcb;
  --heading:#6e738d;
  --quote:#8087a2;
  --link:#8aadf4;
  --list:#a6da95;
  --mauve:#c6a0f6;
  --maroon:#ee99a0;
  --teal:#8bd5ca;
  --yellow:#eed49f;
  --pink:#f5bde6;
}

html,body{
  margin:0;
  padding:0;
  background:var(--base);
  color:var(--text);
}

body{
  font-family:"Liberation Mono", ui-monospace, monospace;
  line-height:1.55;
  max-width:78ch;
  margin:0 auto;
  padding:2.2rem 1.1rem;
}

a{
  color:var(--link);
  text-decoration:none;
}

a:hover{
  text-decoration:underline;
}

h1,
h2,
h3,
h4,
h5,
h6{
   color:var(--heading);
}

ul,
li{
    color:var(--list);
}

img{
  max-width:100%;
  height:auto;
}

blockquote{
  font-style:italic;
  font-size:1.1rem;
  text-align:center;
  margin:1.5rem auto;
  max-width:60ch;
  color:var(--quote);
  padding:0.5rem 0;
  border:none;
}

/* The prompt line */
.prompt{
  white-space:nowrap;
  overflow:hidden;
  margin:0 0 1rem 0;
  font-size:1.2rem;
}

.promptlink{
  color:var(--mauve);
}

/* Cursor span after the prompt text */
.cursor{
  display:inline-block;
  width:0.7ch;
  height:1.3em;
  margin-left:0.15ch;
  border-right:0.3ch solid var(--text);
  vertical-align:top;

  /* blink for 5 cycles (~5s), then stop and stay visible */
  animation: blink 1s steps(1,end) 5 forwards;
}

/* On the typing version, start cursor blinking after typing finishes */
.typing .cursor{
  animation-delay:1.6s; /* same as typing duration */
}

/* Cursor blink keyframes: end in the "visible" state */
@keyframes blink{
  0%, 49% { border-color: var(--text); }
  50%, 99% { border-color: transparent; }
  100%    { border-color: transparent; }
}

/* Typing animation only on index (we apply .typing there) */
.typing .promptlink{
  display:inline-block;
  overflow:hidden;
  white-space:nowrap;
  width:0ch;
  /* "atyh@atyh.net ~ $" is 17 characters in monospace */
  animation: typing 1.5s steps(15,end) 1 forwards;
}

/* Typing keyframes: reveal up to 17ch of text */
@keyframes typing{
  to { width:15ch; }
}

/* Vertical menu list */
.menu{
  margin:0 0 2rem 0;
  display:flex;
  flex-direction:column;
  gap:0.12rem;
}

.menulink{
  color:var(--link);
}