:root {
  --line-height: 1.5;
  --space: calc(var(--line-height) * 1em);
  --space-sm: calc(0.75 * var(--space));
  --space-xs: calc(0.5 * var(--space));
  --space-xxs: calc(0.25 * var(--space));
  --space-lg: calc(1.25 * var(--space));

  --font-size: 100%;
  --font-size-lg: 1.15rem;

  --color-bg: rgb(0, 39, 64);
  --color-bg-subtle: rgb(251, 253, 255);
  --color-text: rgb(30, 30, 30);
  --color-text-muted: rgb(90, 90, 100);
  --color-border: rgb(230, 230, 255);

  --color-for: rgb(8, 157, 133);;
  --color-against: rgb(204, 17, 0);;
  --color-abstention: rgb(0, 118, 191);
  --color-did-not-vote: var(--color-text-muted);

  --radius: 5px;

  --font-default: Roboto, system-ui;
  --font-display: Roboto Slab, system-ui;
}

* {
  margin: 0;
  padding: 0;
}

body {
  padding-block: var(--space-lg);
  padding-inline: var(--space-sm);

  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-default);
  font-size: var(--font-size);
  line-height: var(--line-height);
}

strong {
  font-weight: 500;
}

.ep-wrapper {
  max-width: 42rem;
  margin: auto;
}

.ep-header {
  margin-bottom: var(--space-lg);
  text-align: center;
}

.ep-header a {
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.95em;
}

.ep-content {
  background-color: #fff;
  border-radius: var(--radius);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.ep-content__intro {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space) var(--space-sm);
  margin-bottom: var(--space-xs);
  box-shadow: 0 0 2px rgba(0, 0, 0, .25), 0 0 15px rgba(0, 0, 0, 0.1);
  font-size: var(--font-size-lg);
}

.ep-content__body {
  padding: var(--space-sm);
}

.ep-alpha,
.ep-beta {
  font-family: var(--font-display);
  color: rgb(0, 0, 0);
  line-height: 1.25;
}

.ep-alpha {
  font-size: 1.85rem;
  font-weight: 500;
}

.ep-mep-list,
.ep-vote-list {
  list-style: none;
}

.ep-mep-list > li + li,
.ep-vote-list > li + li {
  padding-top: var(--space-sm);
  margin-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
}

.ep-vote-list > li > a {
  display: block;
  color: var(--color-text);
  font-weight: 500;
  margin-bottom: var(--space-xxs);
}

.ep-meta {
  color: var(--color-text-muted);
}

.ep-facts {
  margin-left: var(--space-sm);
}

.ep-facts > ul > li + li {
  margin-top: var(--space-xxs);
}

.ep-mep-list > li {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "name position" "meta position";
}

.ep-mep-list__name {
  grid-area: name;
}

.ep-mep-list__meta {
  grid-area: meta;
}

.ep-mep-list__position {
  grid-area: position;
  align-self: center;

  padding: 0.125em 0.5em;
  border-radius: var(--radius);

  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;

  color: #fff;
}

.ep-mep-list__position--for {
  background-color: var(--color-for);
}

.ep-mep-list__position--against {
  background-color: var(--color-against);
}

.ep-mep-list__position--abstention {
  background-color: var(--color-abstention);
}

.ep-mep-list__position--did-not-vote {
  border: 1px solid var(--color-did-not-vote);
  color: var(--color-did-not-vote);
}