/* General styles */

:root {
  /* Define a variable for the margin of the overlay, ~70px at 1080p */
  --margin: 3.65vmax;
}

.line {
  /* Define padding relative to the font size */
  padding: 0.1em 0.4em;
  /* Prevent text wrapping and hide overflow */
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}

.line:empty {
  /* Hide empty line, both first or second */
  display: none;
}

/* Namnplanscher */

.namn {
  opacity: 0;
  transition: opacity .5s;
  position: absolute;
  top: calc(10 * var(--margin));
  /* Set a max-width to prevent going over the right margin at 100% - 2 * margin, 1728px at 1080p */
  max-width: calc(100vw - 2 * var(--margin));
}

.namn_vanster {
  left: var(--margin);
}

.namn_hoger {
  right: var(--margin);
  text-align: right;
}

.namn #f0 {
  font-family: 'Yle Black';
  font-size: 0.75rem;
  color: var(--black-color);
  background-color: var(--white-color);
  letter-spacing: -1px;
}

.namn #f0:before {
  content: '';
  background-color: var(--main-color);
  width: 1.8em;
  display: inline-block;
  top: 0;
  bottom: 0;
  position: absolute;
}

.namn #f1 {
  font-family: 'Yle Medium';
  line-height: 1.4;
  font-size: 0.65rem;
  color: var(--white-color);
  background-color: var(--dark-color);
}

.namn_vanster #f0 {
  padding-left: calc(2em / 0.75);
}

.namn_vanster #f0:before {
  left: 0;
}

.namn_vanster #f1 {
  padding-left: calc(2em / 0.65);
}

.namn_hoger #f0 {
  padding-right: calc(2em / 0.75);
}

.namn_hoger #f0:before {
  right: 0;
}

.namn_hoger #f1 {
  padding-right: calc(2em / 0.65);
}

/* Direktplansch */

.direkt {
  opacity: 0;
  transition: opacity .5s;
  position: absolute;
  top: var(--margin);
  /* Set a max-width to prevent going over the right margin at 100% - 2 * margin, 1728px at 1080p */
  max-width: calc(100vw - 2 * var(--margin));
  right: var(--margin);
  text-align: right;
}

.direkt #f0 {
  font-family: 'Yle Black';
  font-size: 0.75rem;
  color: var(--black-color);
  background-color: var(--white-color);
  padding-right: calc(2em / 0.75);
}

.direkt #f0:before {
  content: '';
  background-color: var(--main-color);
  width: 2em;
  display: inline-block;
  top: 0;
  bottom: 0;
  right: 0;
  position: absolute;
}

.direkt #f1 {
  font-family: 'Yle Medium';
  line-height: 1.2;
  font-size: 0.7rem;
  color: var(--white-color);
  background-color: var(--dark-color);
  padding-right: calc(2em / 0.7);
}