
:root{
  --bg:#0b0f10;
  --text:#33ff5a; /* bright green for terminal */
  --sub:#9aa0a6;  /* gray */
  --mono: 'Fira Mono', 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;background:linear-gradient(180deg,#050708 0%,var(--bg) 100%);font-family:var(--mono);color:var(--text)}

/* Centered terminal window */
.terminal{
  width:min(1100px,94%);
  max-width:1100px;
  margin:5vh auto;
  padding:3rem;
  background:rgba(0,0,0,0.35);
  border-radius:10px;
  box-shadow:0 20px 60px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.02);
  position:relative;
  min-height:360px;
  overflow:hidden;
  display:flex;
  align-items:flex-start;
  gap:2rem;
}

/* Big terminal text */
.big-text{
  font-size:6.5rem;
  line-height:1;
  color:var(--text);
  font-weight:700;
  letter-spacing:6px;
  text-shadow:0 6px 18px rgba(51,255,90,0.06);
  white-space:nowrap;
}

/* Subtext under the big banner */
.subtext{
  color:var(--sub);
  font-size:1.05rem;
  margin-top:0.6rem;
  margin-left:2px;
}

/* Layout: text on left, small pony to the right */
.pony-area{
  margin-left:auto;
  display:flex;
  align-items:flex-end;
  gap:0.6rem;
  padding-bottom:6px;
}

/* The embedded pony */
.pony-svg{
  width:160px;
  height:160px;
  filter: drop-shadow(0 20px 30px rgba(0,0,0,0.6));
  transform-origin: center bottom;
  transform: translateY(8px) scale(1);
  opacity:0;
  animation: ponyPop 800ms cubic-bezier(.2,.9,.3,1) 600ms forwards;
}

@keyframes ponyPop{
  0%{transform: translateY(30px) scale(.8); opacity:0}
  60%{transform: translateY(-6px) scale(1.05); opacity:1}
  100%{transform: translateY(0) scale(1); opacity:1}
}

/* responsive */
@media (max-width:720px){
  .big-text{font-size:3.2rem; letter-spacing:2px}
  .pony-svg{width:100px;height:100px}
  .terminal{padding:1.6rem;flex-direction:column;align-items:flex-start}
  .pony-area{margin-left:0; width:100%; justify-content:flex-end}
}
