{% include 'includes/head.twig' with {'pageTitle': nation.name} %}

{% include 'includes/hero.twig' %}

{% include 'includes/nav.twig' with {'page': 'nation'} %}

<main class="pageContent container">
  <div class="nationLayout">
    <div class="nationCoreInfo">
      <h1 style="margin: 0"> {{ nation.name }} </h1>
      <p style="font-family:monospace"> {{ nation.short }} </p>
      <h2> Flag </h2>
      <img class="nationFlag" src="{{ nation.flag }}" alt="{{ nation.name }}'s flag." />
    </div>
    <div class="nationCoreInfo">
      <h2 style="margin: 0"> Description </h2>
      <p> {{ nation.description }} </p>
      <h2> Leader </h2>
      <p> {{ nation.leader }} </p>
    </div>
  </div>
</main>

<style>
/* TCF PLEASE MOVE THIS TO THE CORRECT CSS FILE, I AM TOO LAZY */
  
@media (max-width: 700px) {
  .nationLayout {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
}

@media (min-width: 701px) {
  .nationLayout {
    display: flex;
    flex-direction: row;
    gap: 3rem;
  }
}

p, h1, h2, h3 {
  margin: 0;
}

.nationFlag {
  border-radius: 12px;
}

.nationCoreInfo {
  flex-grow: 1;
  flex-basis: 250px;
  gap: 1rem;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

</style>

{% include 'includes/footer.twig' %}
{% include 'includes/foot.twig' %}