/* ========================= */
/* Reset */
/* ========================= */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden; /* prevents scrollbar causing off-center */
}

/* ========================= */
/* Background */
/* ========================= */
.bg {
  position: fixed;
  inset: 0;
  background-image: url("images/deceived_1_sp.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: contrast(1.15) saturate(1.05);
  z-index: 0;
}

.bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.15);
}

/* ========================= */
/* Base */
/* ========================= */
body {
  color: #39ff14; /* neon green */
}

/* ========================= */
/* Main layout: PERFECT center */
/* ========================= */
.wrap {
  position: fixed;
  inset: 0;           /* full viewport */
  z-index: 1;

  display: flex;
  align-items: center;     /* vertical center */
  justify-content: center; /* horizontal center */

  text-align: center;
  padding: 20px;
}

/* Single centered block */
.center {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: calc(100vw - 40px);
}

/* ========================= */
/* Name */
/* ========================= */
.name {
  font-family: "Courier New", Courier, monospace;
  font-weight: 600;
  font-size: clamp(36px, 6vw, 42px);
  letter-spacing: 1px;
  line-height: 1;
  text-shadow: 0 0 12px rgba(57,255,20,0.4);
}

/* ========================= */
/* Email */
/* ========================= */
.email {
  margin-top: 18px;

  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 14px;
  font-weight: 600;

  color: #39ff14;
  text-decoration: none;
  transition: color 0.2s ease;
}

.email:hover {
  color: #c300ff; /* neon purple */
}

/* ========================= */
/* Footer: ALWAYS centered */
/* ========================= */
.copyright {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;

  text-align: center;
  padding: 0 20px;

  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 14px;
  font-weight: 600;
  opacity: 0.9;
}

/* ========================= */
/* Mobile */
/* ========================= */
@media (max-width: 768px) {
  .name { font-size: clamp(28px, 7vw, 44px); }
  .email { font-size: 13px; }
  .copyright { bottom: 14px; font-size: 12px; }
}

/* ========================= */
/* Landscape phones */
/* ========================= */
@media (max-width: 932px) and (orientation: landscape) {
  .name { font-size: clamp(24px, 5vw, 40px); }
  .email { font-size: 12px; }
  .copyright { bottom: 10px; font-size: 12px; }
}
