html {
  --mp-red: #d0011b;
  --mp-red-trans-dark: rgba(208, 1, 27, 0.6);
  --mp-blue: #09438f;
  --mp-blue-trans: rgba(16, 78, 151, 0.1);
  --mp-blue-trans-dark: rgba(16, 78, 151, 0.6);
  --mp-blue-trans-darker: rgba(16, 78, 151, 0.9);
  --mp-darkgray: #747374;
  --mp-lightgray: #d0cfd0;
  --mp-yellow: #fffdd9;

  --mp-font-weight-regular: 400;
  --mp-font-weight-bold: 700;

  --mp-font-size-xxsmall: 11px;
  --mp-font-size-xsmall: 12px;
  --mp-font-size-small: 14px;
  --mp-font-size-normal: 16px;
  --mp-font-size-medium: 22px;

  --mp-unit: 10px;
  --mp-unit-2: 20px;
  --mp-unit-half: 5px;
  --mp-space: 16px;
  --mp-space-half: 8px;

  --mp-container-max-width: 1000px;
  --mp-header-max-width: 950px;
}

* {
  box-sizing: border-box;
}

h1,
h2 {
  margin: 0;
}

.page-title {
  margin-top: 1.5rem;
  margin-bottom: 1.25rem;
}

.bold {
  font-weight: var(--mp-font-weight-bold);
}

body {
  color: var(--mp-darkgray);
  font-family: "PT Serif", serif;
  font-weight: var(--mp-font-weight-regular);
  font-size: var(--mp-font-size-normal);
  margin: 0;
}

a {
  text-decoration: none;
  color: var(--mp-blue);
}
a:visited {
  color: var(--mp-red);
}
a.small-link {
  color: var(--mp-blue);
  font-weight: 400;
  font-size: var(--mp-font-size-xsmall);
}

.container {
  max-width: var(--mp-container-max-width);
  margin: 0 auto;
  padding: 10px var(--mp-unit);
  position: relative;
}
@media (min-width: 900px) {
  .container {
    padding: 10px var(--mp-unit-2);
  }
}

.share {
  position: absolute;
  right: var(--mp-unit);
  top: 0;

  display: flex;
  align-content: space-between;
}
.share > *:not(:first-child) {
  margin-left: 3px;
}

ul.main-selector {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;

  overflow-x: auto;
  overflow-y: hidden;
}
ul.main-selector a {
  color: var(--mp-red);
}
ul.main-selector .selected {
  color: var(--mp-red);
  border-bottom: 2px solid var(--mp-red);
}
ul.main-selector a:hover {
  color: var(--mp-red-trans-dark);
  border-bottom: 2px solid var(--mp-red-trans-dark);
}
ul.main-selector li:not(:first-child) {
  margin-left: var(--mp-space);
}
ul.main-selector li {
  /* Need this otherwise border bottom missing. */
  height: 35px;
}
ul.main-selector .new::after {
  content: "New!";
  position: relative;
  top: -10px;
  right: 0px;
  font-size: 12px;
  color: var(--mp-blue);
}

.articles .side {
  display: none;
}
.articles h3.heading {
  margin-bottom: 0;
}
.articles ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
.articles ul.selector li:not(:first-child) {
  margin-left: var(--mp-space);
}
.articles .selector a {
  color: var(--mp-blue);
}
.articles .selector a:hover {
  color: var(--mp-blue-trans-dark);
  border-bottom: 2px solid var(--mp-blue-trans-dark);
}
.articles .selector .selected {
  color: var(--mp-blue);
  border-bottom: 2px solid var(--mp-blue);
}
.articles .standalone {
  display: none;
}
@media (min-width: 900px) {
  .articles {
    display: flex;
  }
  .articles .main {
    flex-basis: 66.666%;
    flex-grow: 2;
    flex-shrink: 2;
  }
  .articles .side {
    display: block;
    min-width: 33.3333%;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 33.3333%;
    padding-left: var(--mp-unit-2);
  }
  .articles .side .item {
    font-size: var(--mp-font-size-small);
  }
  .articles .side .item-title {
    font-size: var(--mp-font-size-normal);
  }
  .articles .side img {
    width: 120px;
  }
  .articles .side .heading a {
    color: var(--mp-blue);
  }

  .articles .standalone {
    display: block;
  }
  .articles .selector {
    display: none;
  }
}

.header {
  padding: var(--mp-space) 0 var(--mp-unit) 0;
  background-color: var(--mp-yellow);
  /* border-bottom: 3px solid var(--mp-darkgray); */
  position: relative;
}
.header .nav {
  position: absolute;
  right: 0;
  bottom: 0;
  background-color: var(--mp-darkgray);
  padding: 0 6px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 16px;
}
.header .nav ul,
.header .nav-top ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.header .nav a {
  font-size: var(--mp-font-size-xsmall);
  color: white;
  height: 15px;
}
.header .nav-top {
  position: absolute;
  right: 0;
  top: 0;
  background-color: transparent;
  color: white;
  border-left: 1px solid var(--mp-blue);
  border-bottom: 1px solid var(--mp-blue);

  display: flex;
  justify-content: center;
}
.header .nav-top ul {
  display: flex;
}
.header .nav-top ul li {
  display: flex;
  align-items: center;
  justify-content: center;
}
.header .nav-top a {
  font-family: Arial, Helvetica, sans-serif;
  font-size: var(--mp-font-size-xxsmall);
  color: var(--mp-blue);
  padding: 4px 6px 3px 6px;
}
.header .nav-top li.selected {
  background-color: var(--mp-blue);
}
.header .nav-top li.selected a {
  color: white;
}
.header a.logo {
  /* Fix for FF. */
  width: 370px;
}
.header .logo img {
  background-color: var(--mp-yellow);
  z-index: 1;
  position: relative;
}
.header .slogan {
  font-weight: var(--mp-font-weight-bold);
  color: var(--mp-red);
  white-space: nowrap;
}
.header .datetime {
  font-weight: var(--mp-font-weight-bold);
}
.header .banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: scale(0.8);

  position: relative;
}
.header .header-line {
  height: 2px;
  background-color: var(--mp-red);
  width: 100%;
}
.header .header-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  padding: 2px var(--mp-unit);
  margin: 0 auto;
  max-width: var(--mp-header-max-width);
}
.header .header-container .datetime {
  margin-top: var(--mp-unit);
}
@media (min-width: 360px) and (max-width: 899px) {
  .header .banner {
    transform: scale(0.9);
  }
}
@media (min-width: 900px) {
  .header .banner {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    transform: scale(1);
  }
  .header .slogan {
    margin-left: var(--mp-unit-2);
  }
  .header .header-line {
    position: absolute;
    width: 570px;
    left: -10px;
    bottom: 10px;
  }
  .header .header-container {
    flex-direction: row;
  }
  .header .header-container .datetime {
    margin-top: 0;
  }
}
.sticker {
  padding: 3px 0;
  background-color: var(--mp-blue-trans-darker);
  text-align: center;
}
.sticker a {
  font-size: var(--mp-font-size-small);
  color: white;
  text-decoration: underline;
}

.item {
  padding: var(--mp-space) 0;
  position: relative;
  clear: both;
}
@media (min-width: 481px) {
  .item.has-img {
    min-height: 220px;
  }
}
.item:not(:last-child) {
  border-bottom: 1px solid var(--mp-lightgray);
}
.item a.show-more {
  display: inline-block;
  margin-top: 3px;
}
.item a:hover {
  text-decoration: underline;
  background: var(--mp-blue-trans);
}
.item-source {
  color: var(--mp-darkgray);
  font-weight: var(--mp-font-weight-bold);
  position: relative;
  display: flex;
  justify-content: space-between;
}
.item-source .article-share {
  display: flex;
  align-items: center;
}
.item-source .article-share > *:not(:first-child) {
  margin-left: 3px;
}
.item-title {
  color: var(--mp-blue);
  font-size: var(--mp-font-size-medium);
  font-weight: var(--mp-font-weight-bold);
  margin: var(--mp-unit-half) 0;
}
.item-description {
  color: var(--mp-darkgray);
}
.item-others {
  padding-left: var(--mp-unit);
  margin-top: var(--mp-unit-half);
  border-left: 2px solid var(--mp-blue);
}
.item-related {
  margin-left: 1em;
  text-indent: -1em;
}
.item-related-hidden {
  display: none;
}
.item-others-title {
  color: var(--mp-blue);
  margin-top: var(--mp-unit);
}
.item-img-preview {
  float: right;
  width: 160px;
  padding-left: var(--mp-unit);
}
@media (min-width: 481px) {
  .item-img-preview {
    max-width: 240px;
    max-height: 160px;
    width: auto;
    height: auto;
  }
}

.footer {
  padding: var(--mp-unit-2) 0;
  text-align: center;
  font-size: var(--mp-font-size-small);
}
.footer a {
  color: var(--mp-darkgray);
  text-decoration: underline;
}
.footer a:not(:first-child) {
  margin-left: var(--mp-unit);
}
.footer .links {
  margin-top: var(--mp-unit);
}

/* Ads */
.mobile-ad,
.desktop-ad {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 5px 0 5px 0;
}
.desktop-ad {
  display: none;
}
@media (min-width: 401px) {
  .mobile-ad {
    display: none;
  }
  .desktop-ad {
    display: flex;
  }
}