:root {
  --bg: #0f172a; /* slate-900 */
  --card: #111827; /* gray-900 */
  --text: #e5e7eb; /* gray-200 */
  --muted: #94a3b8; /* slate-400 */
  --accent: #22d3ee; /* cyan-400 */
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
  /* Parrakkaan miehen kuva taustalle, koko ruudun kokoisena */
  background: url('https://images.unsplash.com/photo-1600803925764-1a2dff089e1f?q=80&w=2650&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') center center / cover no-repeat fixed;
  /* Voit vaihtaa yllä olevan URL:n haluamaasi parrakkaan miehen kuvaan */
  color: var(--text);
  position: relative;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 30, 0.65);
  z-index: 0;
  pointer-events: none;
}

main.center {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  position: relative;
  z-index: 1;
}
/* Jokainen linkki ja teksti omassa pystysuunnassa keskitettynä */
.linkblock {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 24px; /* lisää väliä painikeblokkien väliin */
}

.linkdesc {
  font-size: 1.08rem;
  color: #e0e0e0;
  margin-bottom: 12px; /* enemmän väliä tekstin ja painikkeen välillä */
  text-align: center;
  text-shadow: 0 1px 8px rgba(0,0,0,0.7);
}

h1 {
  font-size: clamp(28px, 5vw, 40px);
  margin: 0;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  text-shadow: 0 2px 16px rgba(0,0,0,0.7), 0 1px 0 #222;
}

nav.links {
  display: flex;
  flex-direction: column; /* aina päällekkäin, myös leveällä näytöllä */
  gap: 12px; /* enemmän väliä painikkeiden välillä, otsikko pysyy kiinni */
  width: min(92vw, 560px);
  align-items: center; /* keskittää painikkeet pystysuunnassa */
  margin-top: 0; /* varmistetaan ettei nav lisää väliä otsikon alle */
}

nav.links a {
  text-decoration: none;
  color: #fff;
  background: linear-gradient(180deg, rgba(34,34,44,0.92), rgba(0,0,0,0.82));
  border: 2px solid #22d3ee;
  padding: 16px 22px;
  border-radius: 14px;
  text-align: center;
  font-weight: 700;
  font-size: 1.08rem;
  letter-spacing: 0.01em;
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  text-shadow: 0 2px 12px rgba(0,0,0,0.7);
}

nav.links a:hover,
nav.links a:focus-visible {
  outline: none;
  transform: translateY(-2px) scale(1.04);
  border-color: #fff;
  box-shadow: 0 16px 40px rgba(34, 211, 238, 0.22);
}

@media (min-width: 560px) {
  /* Ei muuteta flex-suuntaa leveällä näytöllä, pysyy päällekkäin */
}