:root {
  --bg-start: #0f3151;
  --bg-end: #73b6e7;
  --card-bg: rgba(255, 255, 255, 0.88);
  --title: #0d2d4a;
  --text: #1f3f5a;
  --btn: #1373d2;
  --btn-hover: #0c5eb0;
  --btn-ped: #0d8992;
  --btn-ped-hover: #086a72;
  --btn-santa: #ce2169;
  --btn-santa-hover: #991a4f;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
  color: var(--text);
  background:
    linear-gradient(135deg, rgba(8, 43, 75, 0.84), rgba(57, 159, 220, 0.48)),
    url("../bg.jpg") center center / cover no-repeat fixed;
  display: grid;
  place-items: center;
  padding: 24px;
}

.wrap {
  width: min(740px, 100%);
  background: var(--card-bg);
  border-radius: 20px;
  padding: 34px 30px;
  box-shadow: 0 24px 48px rgba(9, 38, 65, 0.26);
  backdrop-filter: blur(2px);
}

h1 {
  color: var(--title);
  font-size: clamp(1.8rem, 2.3vw, 2.55rem);
  text-align: center;
  margin-bottom: 14px;
  letter-spacing: 0.2px;
}

.subtitle {
  text-align: center;
  font-size: 1.08rem;
  margin-bottom: 28px;
  font-weight: 700;
}

.links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.link-btn {
  text-decoration: none;
  text-align: center;
  font-weight: 700;
  font-size: 1.1rem;
  color: #fff;
  background: var(--btn);
  border-radius: 12px;
  padding: 16px 10px;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
  box-shadow: 0 10px 20px rgba(9, 63, 112, 0.26);
}

.link-btn:hover {
  background: var(--btn-hover);
  transform: translateY(-1px);
}

.link-btn.ped {
  grid-column: span 1;
  background: var(--btn-ped);
}

.link-btn.ped:hover {
  background: var(--btn-ped-hover);
}

.link-btn.santa {
  grid-column: span 1;
  background: var(--btn-santa);
}

.link-btn.santa:hover {
  background: var(--btn-santa-hover);
}

@media (max-width: 700px) {
  .wrap {
    padding: 26px 18px;
    border-radius: 16px;
  }

  .links {
    grid-template-columns: 1fr;
  }

  .link-btn.ped {
    grid-column: span 1;
  }
}