<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2, user-scalable=no" />
  <meta name="description" content="A simple app that shows what NationStates World Assembly votes would be if Delegates only got one vote each" />
  <meta name="keywords" content="NationStates" />
  <meta name="theme-color" content="#ffffff" />
  <title>REAL VOTES</title>
  <link rel="stylesheet" href="scripts/semantic-ui-css/semantic.min.css" type="text/css" />
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500&display=swap" rel="stylesheet">
  <style type="text/css">
    html {
      position: relative;
      min-height: 100%;
      height: unset;
    }

    body {
      padding-bottom: 14px;
      margin-bottom: 60px;
      -webkit-font-smoothing: antialiased;
      -moz-font-smoothing: grayscale;
    }

    .ui.container h1.ui.huge.header {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-weight: 500;
      margin-top: 40px;
      font-size: 4.5em;
      text-align: center;
    }
    .ui.container h2.ui.tagline.header {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-weight: 300;
      font-size: 2em;
      text-align: center;
    }
    .ui.container h3.ui.subtitle.header {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-weight: 300;
      font-size: 1.5em;
      text-align: center;
    }

    .ui.basic.table td.statistic.number {
      font-family: 'Playfair Display', serif;
      font-size: 3.5em;
      text-align: right;
    }
    .ui.basic.table td.statistic.text {
      font-size: 1.5em;
      text-align: left;
    }

    .highlight {
	    display: inline-block;
      padding: 0 10px;
	  }
    a.highlight.red {
      color: #fff;
      background-color: #db2828;
    }
    a.highlight.red:hover {
      background-color: #FFF;
      color: #db2828;
    }
    span.highlight.yellow {
      color: #fff;
      background-color: #FFD700;
    }
    a.highlight.blue {
      color: #fff;
      background-color: #0E6EB8;
    }
    a.highlight.blue:hover {
      background-color: #FFF;
      color: #0E6EB8;
    }
    footer {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 60px;
      padding-top: 20px;
      padding-bottom: 20px;
      background-color: #f5f5f5;
      margin-top: 0;
      margin-bottom: 0;
    }

    footer p {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      color: #777777;
    }
  </style>
</head>

<body>
    <div class="ui stackable two column grid centered container">
      <div class="column">
        <h1 class="ui huge header">REAL VOTES</h1>
      </div>
      <%- include('./partials/' + page); %>
    </div>
  <footer>
    <div class="ui container">
      <p>Licensed <a href="https://opensource.org/licenses/AGPL-3.0">AGPL 3.0</a> - <a href="https://github.com/hierocles/ns-realvotes">GitHub</a>. <a href="https://nationstates.net">NationStates</a> and related concepts &copy; <a href="https://maxbarry.com">Max Barry</a>.</p>
    </div>
  </footer>
</body>

</html>