/* Import custom font */
@font-face {
  font-family: "normal";
  src: url("Mojangles.ttf") format("truetype");
}

/* Base scaling variable */
:root {
  --scale-width: clamp(200px, 50vw, 320px);
}

body {
  font-family: 'normal', sans-serif;
  margin: 0;

  /* background scrolling normally */
  background-image:
    linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)),
    url("background.png");
  background-repeat: repeat;
  background-size: 50px 50px;
  image-rendering: pixelated;
}

/* FIXED TITLE BAR (stays at top, has its own background) */
.title-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;

  background: #1a1a1a;       /* title bar's OWN background */
  padding: 2vh 0;

  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;

  /* separator line */
  border-bottom: 4px solid rgba(255, 255, 255, 0.25);
}

/* Make the rest of the page scroll under the fixed title */
.page-container {
  padding-top: 20vh;   /* leave space so content isn't behind title */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--scale-width) / 16);
  width: 100%;
}

/* Title image scaling */
.title-image {
  width: calc(var(--scale-width) * 1.25);
  height: auto;
}

/* Scrollable content section */
.scroll-list {
  max-height: 60vh;
  overflow-y: auto;
  width: 100%;
}

/* Buttons scale with viewport */
.custom-button {
  width: var(--scale-width);
  aspect-ratio: 5 / 1;
  font-family: 'normal';
  font-size: calc(var(--scale-width) / 13.3);
  color: #ffffff;
  background-color: #2f2f2f;
  background-image: url('button.png');
  background-repeat: repeat;
  background-size: cover;
  border: none;
  cursor: pointer;
  transition: color 0.2s;
}

.custom-button:hover {
  color: #fff7a3;
}

.button-link {
  text-decoration: none;
  display: block;
}