/* ========== RESET (keeps things consistent) ========== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ========== ROOT VARIABLES (easy theme changes) ========== */
:root {
  --font-main: "Noto Sans Mono", serif;
  --font-titles: "Fleur De Leah", cursive;
  --color-bg: #f7f7f7;
  --color-text: #222;
  --color-primary: #3b82f6;
  --color-radius: 8px;
}

/* ========== GLOBAL STYLES ========== */
body {
  font-family: var(--font-main);
  color: var(--color-text);
  line-height: 1.6;
  padding: 20px;
}

/* Headings */
h1{
    font-family: var(--font-titles);
	background: linear-gradient(
    to right,
    #d3b58e,
	#b79e72,
	#978358,
	#b3ab80,
	#e2c3a3,
	#b3ab80,
	#978358,
	#b79e72,
	#d3b58e
  );
  -webkit-background-clip: text; /* makes the gradient visible only on text */
  color: transparent;             /* hides the original color */
  font-weight: 400;
  font-style: normal;
  font-size: clamp(3rem, 5vw, 5rem);
}

h2{
    font-family: var(--font-titles);
	background: linear-gradient(
    to right,
    #d3b58e,
	#b79e72,
	#978358,
	#b3ab80,
	#e2c3a3,
	#b3ab80,
	#978358,
	#b79e72,
	#d3b58e
  );
  -webkit-background-clip: text; /* makes the gradient visible only on text */
  color: transparent;             /* hides the original color */
  margin-bottom: 0.5em;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight:400;
  text-shadow: 0 0 15px rgba(0,0,0,0.2);
}

/* Paragraphs */
p {
  font-size: clamp(1rem, 3.5vw, 1.4rem);
}

/* Links */
a {
	background: linear-gradient(
    to right,
    #d3b58e,
	#b79e72,
	#978358,
	#b3ab80,
	#e2c3a3,
	#b3ab80,
	#978358,
	#b79e72,
	#d3b58e
  );
  -webkit-background-clip: text; /* makes the gradient visible only on text */
  color: transparent;             /* hides the original color */
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Buttons */
.btn {
  font-family: var(--font-titles);
  padding: 0.6em 1.2em;
  border: none;
  border-radius: var(--color-radius);
  background: linear-gradient(
    to right,
    #d3b58e,
	#b79e72,
	#978358,
	#b3ab80,
	#e2c3a3,
	#b3ab80,
	#978358,
	#b79e72,
	#d3b58e
  );
  color: black;
  font-size: clamp(2rem, 5vw, 3rem);
  cursor: pointer;
}

.btn:hover {
  opacity: 0.9;
}

/* Simple container */
.container {
  max-width: 800px;
  margin: 0 auto;
}

/* Background */
.page-bg {
  position: absolute;   /* stays at the top, like a background */
  top: 0;
  left: 0;

  width: 100%;       /* fill width */
  height: auto;      /* keep A4 proportions */
  
  z-index: -1;       /* put it BEHIND the page */
  pointer-events: none; /* image won’t block clicks */
}

/* Content */
.content {
  position: relative;
  z-index: 1;        /* make sure it's above the image */
  padding: 20px;

  max-width: 75%;
  margin: 13% auto;     /* centers horizontally */
  text-align: center;
}

/* Utility classes */
.text-center {
  text-align: center;
}

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 2rem; }