/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
@import url('https://fonts.googleapis.com/css2?family=Jacquard+12&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

@font-face {
  font-family: "Medodica";
  src: url("/Assets/MedodicaRegular.otf");
}

@font-face {
  font-family: "Belanidi";
  src: url("Assets/BelanidiSerif-Regular.otf");
}

@font-face {
  font-family: "Emoji";
  src: url("Assets/Emojifont.ttf");
}

:root {
  --typing-speed-ms: 80; /* lower = faster */
  --cursor-width: 0.08em;
}

body {
  margin: 48px;
  background-color: #faf6ec;
  color: #222426;
  font-family: "Medodica", sans-serif;
  font-size: 16px;
  letter-spacing: 0.05em;
  display: flex;
  justify-content: center;
  font-smooth: never; /* doesn't work outside macOS */
  -webkit-font-smoothing: none; /* doesn't work outside macOS */
  image-rendering: crisp-edges; /* doesn't affect fonts */
}

h1, h2, h3, h4 {
  font-family: "Belanidi", system-ui;
  font-weight: 400;
  font-style: normal;
  margin: 0px;
  padding: 0px;
  font-smooth: never; /* doesn't work outside macOS */
  -webkit-font-smoothing: none; /* doesn't work outside macOS */
  image-rendering: crisp-edges; /* doesn't affect fonts */
}

h1 {
  font-size: 32px;
  line-height: 36px;
}

h4 {
  font-size: 16px;
}

h4:first-letter {
  text-transform: capitalize;
}

.main-content {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  align-self: stretch;
  max-width: 1200px;
}

.leftbar {
  display: flex;
  align-items: stretch;
  flex-direction: column;
  gap: 8px;
  min-width: 300px;
}

.rightbar {
  display: flex;
  align-items: stretch;
  flex-direction: column;
  gap: 8px;
}

.stamp-box {
  padding: 1rem;
  background: #f8f9fa;
  background-clip: padding-box;
  
  /* You MUST have a visible border for border-image to render into */
  border: 10px solid transparent;          /* 20 = how thick you want it on the page */

  /* Your 30×30 (3×10) PNG — adjust path exactly */
  border-image-source: url("https://cafecoileain.neocities.org/Assets/stamp-border-v2.png");

  /* Tell the browser how to slice the source image: 10px from each side */
  border-image-slice: 10;

  /* Use the element’s border width (20px above) */
  border-image-width: 1;

  /* Tile edges; avoid half tiles */
  border-image-repeat: round;

  /* Keep pixels crisp (optional) */
  image-rendering: pixelated;
}

.sitting-girl {
  display: flex;
  justify-content: flex-end;
  margin-bottom: -64px;
  margin-right: 2px;
  z-index: 1000;
}

.content-stamp {
  width: fit-content;
}

    h1.typewriter {
      position: relative; /* anchor the absolutely-positioned typing layer */
    }

/* The invisible “ghost” text that reserves final size to prevent layout shift */
.typewriter .ghost {
  visibility: hidden; /* occupies space but not visible */
}

/* The actual typing layer sits on top */
.typewriter .type {
  position: absolute;
  inset: 0 0 auto 0; /* top & left aligned */
  white-space: normal; /* respect spaces if any */
}

/* Blinking caret as a pseudo-element so it stays at the end of typed text */
.typewriter .type::after {
  content: "";
  display: inline-block;
  width: var(--cursor-width);
  height: 0.85em;
  translate: 0 0.15em; /* nudge down to sit on baseline */
  background: currentColor;
  animation: blink 1s steps(1, end) infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

/* Respect reduced motion preferences: skip animation, show full text immediately */
@media (prefers-reduced-motion: reduce) {
  .typewriter .type::after { animation: none; }
}

@media only screen and (max-width: 600px) {
  body {
    margin: 24px;
  }

  .leftbar {
    min-width: 0;
  }
  
  .main-content {
    flex-direction: column;
    align-items: stretch;
}
}