body {
  font-family: "LR Mono", system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.4;
}

h1, h2 {
  font-family: "LR Mono", system-ui, sans-serif;
  font-weight: 700;
}

.logo {
  display: block;       /* ensures margin works correctly */
  margin: 1.5rem auto;    /* pushes logo down and centers it */
  width: 300px;         /* or whatever fits your design */
  height: auto;
}

.site-header {
  display: flex;
  flex-direction: column;
  align-items: center;   /* horizontal */
  text-align: center;
}

@font-face {
  font-family: "LR Mono";
  src: url("/Fonts/LRMono-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "LR Mono";
  src: url("/Fonts/LRMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "LR Mono";
  src: url("/Fonts/LRMono-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

  .logo {
  margin-top: 2rem;    /* pushes logo downward */
}

.copyright {
  margin-bottom: 1rem;  /* creates space below text */
}

.neocities-badge {
  display: block;
  margin: 0 auto;
}

.logo {
    /* Initial state before animation starts (hidden and slightly up) */
    opacity: 0;
    transform: translateY(-20px); 
    
    /* Apply the animation */
    animation-name: fadeInDown;
    animation-duration: 0.5s;        /* Duration of the animation */
    animation-timing-function: ease-out; /* Makes the movement smoother */
    animation-fill-mode: forwards;   /* Ensures the logo stays in its final state */
    animation-delay: 0.5s;           /* Optional: A short delay before it starts */
}
/* Define the keyframes for the animation */
@keyframes fadeInDown {
    from {
        opacity: 0; /* Start completely transparent */
        transform: translateY(-20px); /* Start 20 pixels above its final position */
    }
    to {
        opacity: 1; /* End fully visible */
        transform: translateY(0); /* End at its natural position (moved down) */
    }
}



.content-border {
  max-width: 900px;
  margin: 40px auto;
  padding: 4px; /* border thickness */
  border-radius: 18px;

  background: linear-gradient(
    135deg,
    var(--lr-gradient-start),
    var(--lr-gradient-mid),
    var(--lr-gradient-end)
  );
}

/* Inner content background */
.content-inner {
  background-color: #ffffff; /* or #000 if dark theme */
  border-radius: 14px;
  padding: 32px;
}

:root {
  --lr-gradient-start: #E713A6;
  --lr-gradient-mid:   #7346D2;
  --lr-gradient-end:   #0078FF;
}