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

/* Base scaling variable */
:root {
  /* Button width scales with viewport but stays within min/max limits */
  --scale-width: clamp(200px, 50vw, 320px); /* tweak min/max as needed */
}

body {
  font-family: 'normal', sans-serif;
  margin: 0;
  padding: 5vh 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  min-height: 10vh;

  /* Background with brightness overlay */
  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;
}

.page-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--scale-width) / 16); /* spacing proportional to button width */
  width: 90vw;           
  max-width: 4000px;      /* cap container width */
}

/* Title scales proportionally to buttons */
.title-image {
  width: calc(var(--scale-width) * 1.75); /* 400px / 320px base ratio */
  max-width: 100000%;
  height: auto;
}

/* Button container */
.button-container {
  display: flex;
  flex-direction: column;
  gap: calc(var(--scale-width) / 26.6); /* proportional spacing */
  width: 100%;
  align-items: center;
}

/* Buttons scale uniformly using variable */
.custom-button {
  width: var(--scale-width);
  aspect-ratio: 5 / 1;              /* preserves 320x64 ratio */
  font-family: 'normal';
  font-size: calc(var(--scale-width) / 13.3); /* proportional font: 320px / 24px */
  color: #ffffff;
  background-color: #2f2f2f;
  background-image: url('button.png');
  background-repeat: repeat;
  background-size: cover;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: color 0.2s;
}

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

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