:root {
      --bg:#0f1724;
      --card:#0b1320;
      --muted:#9aa7c7;
      --text:#e6eef8;
      --accent:#F2F2F2;
      --glass: rgba(255,255,255,0.03);
      --radius:12px;
      --maxwidth:1100px;
      --gap:1rem;
      font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    }

    *{box-sizing:border-box}
    html,body{
      height:100%;
      margin:0;
      padding:0;
      background:linear-gradient(180deg,#041126,#071225 60%);
      color:var(--text);
    }
    body{
      display:flex;
      justify-content:center;
      align-items:flex-start;
      padding:40px 20px;
      line-height:1.6;
    }

    .container {
      width:100%;
      max-width:var(--maxwidth);
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:1.4rem;
      text-align:center;
    }

    /* Banner */
    header.hero {
      width:100%;
      text-align:center;
      margin-bottom:10px;
    }

    header.hero h1 {
      font-family: 'Cinzel Decorative', serif;
      font-size:3rem;
      letter-spacing:0.03em;
      margin:0;
      color:var(--text);
      font-weight:600;
      text-shadow: 0 0 18px rgba(11,92,255,0.3);
    }

    header.hero h1 span.decorative {
      color:var(--accent);
      font-size:3.3rem;
      display:inline-block;
      vertical-align:baseline;
    }

    header.hero p {
      color:var(--muted);
      font-size:1.1rem;
      margin-top:8px;
      letter-spacing:0.01em;
    }

    /* Image links */
    .sections {
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
      gap:28px;
      width:100%;
    }

    .section-card {
      background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));
      border-radius:var(--radius);
      padding:12px;
      box-shadow:0 6px 18px rgba(0,0,0,0.4);
      transition:transform 0.25s ease, box-shadow 0.25s ease;
    }

    .section-card:hover {
      transform:translateY(-4px);
      box-shadow:0 10px 26px rgba(11,92,255,0.15);
    }

    .section-card img {
      width:100%;
      aspect-ratio:4/3;
      object-fit:cover;
      border-radius:10px;
      display:block;
      box-shadow:0 4px 14px rgba(0,0,0,0.35);
    }

    .section-card h2 {
      font-size:1.3rem;
      margin:12px 0 4px;
      color:var(--text);
    }

    .section-card p {
      color:var(--muted);
      font-size:0.95rem;
      margin:0 0 10px;
    }

    .section-card a {
      text-decoration:none;
      color:inherit;
    }

		/* Links box */
    .link-boxes {
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
      gap:28px;
      width:100%;
    }

    .link-box {
      background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));
      border-radius:var(--radius);
      padding:12px;
      box-shadow:0 6px 18px rgba(0,0,0,0.4);
      transition:transform 0.25s ease, box-shadow 0.25s ease;
    }

    .link-box:hover {
      transform:translateY(-4px);
      box-shadow:0 10px 26px rgba(11,92,255,0.15);
    }

    .link-box p {
      color:var(--muted);
      font-size:0.8rem;
      margin:0 0 10px 12px;
			text-align:left;
    }

    .link-box a {
      text-decoration:none;
      color:inherit;
    }

		

    /* Footer */
    footer {
      margin-top:32px;
      color:var(--muted);
      font-size:0.9rem;
      max-width:800px;
    }

    footer p {
      margin-bottom:10px;
    }

    footer a {
      color:var(--accent);
      text-decoration:none;
      font-size:0.85rem;
      margin:0 6px;
    }

    footer a:hover {
      text-decoration:underline;
    }
		footer div:nth-of-type(2) {
  		margin: 20px 0; /* adds vertical space above and below the link line */
		}
		.footer-links {
  		margin: 24px 0; /* adjust for more or less spacing */
		}

		
    @media(max-width:700px){
      header.hero h1{font-size:2.6rem;}
      header.hero h1 span.decorative{font-size:3.4rem;}
    }