:root {
  color-scheme: dark;
  --primary: #573cfa;
  --secondary: #fb8d1a;
  --danger: #e8083e;
  --success: #02864a;
  --neutral: #1c1a27;

  --bg: var(--neutral);
  --text: var(--danger);
  --muted: var(--secondary);
  --card: var(--primary);
  --cardText: var(--neutral);
  --ring: var(--danger);
  --shadow: 0 10px 30px var(--success);
  --radius: 16px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 32px 20px;
  font-family: Arial, sans-serif;
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

body > * {
  max-width: 980px;
  margin-inline: auto;
}

p {
  color: var(--neutral);
  font-size: 1.05rem;
}

.blink { animation: blinker 1s linear infinite; }

@keyframes blinker {
  50% { opacity: 0; }
}

ul {
  background-color: var(--neutral);
  color: var(--secondary);
}

.cards {
  list-style: none;
  margin: 0;
  padding: 1px;
  border-radius: var(--radius);
  box-shadow: var(--success);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.card {
  margin: 0;
  background-color: var(--secondary);
  color: var(--neutral);
  border-radius: var(--radius);
  padding: 16px 16px;
}

.card--text { grid-column: 1; }
.card--image { grid-column: 2; }

.framed-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: calc(var(--radius) - 6px);
}

@media (max-width: 720px) {
  .cards { grid-template-columns: 1fr; }
  .card--text,
  .card--image { grid-column: 1; }
}

.city-title {
  color: var(--danger);
  font-size: 48px;
}

h3 {
  margin-top: 34px;
  margin-bottom: 12px;
}

marquee {
  display: block;
  margin-top: 28px;
  background-color: var(--secondary);
  color: var(--neutral);
  padding: 14px 16px;
  border-radius: var(--radius);
  box-shadow: var(--success);
}


.landmarks {
  color: var(--neutral);
  background-color: var(--secondary);
  font-family: "Courier New", Courier, monospace;
  border-radius: var(--radius);
  padding: 18px 22px;
  box-shadow: var(--success);
}