@import url('https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre&display=swap');

html {
  /* colors */
  --bgc: #000000;
  --overlay: rgba(0, 0, 0, 0.65);
  --tc: #fffdf5;   /* brighter text */
  --lc: #ffe66d;   /* brighter link yellow */

  background-color: var(--bgc);
  color: var(--tc);
  font-family: 'Frank Ruhl Libre', system-ui, serif;
  text-align: center;

  /* scale text with viewport height */
  font-size: 2.4vh;
}

body {
  margin: 0;
  min-height: 100vh;

  /* background image + stronger overlay for contrast */
  background-image:
    linear-gradient(var(--overlay), var(--overlay)),
    url("bg10.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* main content wrapper */
.wrapper {
  margin: 0 auto;
  padding: 18vh 2rem 4rem;
  max-width: 70rem;
}

/* title */
h1 {
  font-weight: 700;
  font-size: 5vh;
  margin: 0 0 4vh 0;  /* was 2vh */
  text-shadow:
    0 0 1vh #000,
    0 0 2vh #000;
}

/* link rows */
p {
  margin: 1vh 0;
  font-size: 2.4vh;
  text-shadow:
    0 0 0.8vh #000,
    0 0 1.4vh #000; /* brighten text edges */
}

/* links */
a {
  color: var(--lc);
  text-decoration: none;
  font-weight: 600; /* a bit bolder so it stands out */
}

a:hover {
  text-decoration: underline;
}

/* admin layout: columns on desktop, stacked on small screens */
.admin-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3vh 5vw;
}

.admin-section {
  min-width: 18rem;
}

/* On narrow screens, force vertical stacking */
@media (max-width: 700px) {
  .admin-grid {
    flex-direction: column;
    align-items: center;
  }

  .admin-section {
    min-width: 0;
  }
}