html {
  --cp-red: #d0011b;
  --cp-red-trans-dark: rgba(208, 1, 27, 0.6);
  --cp-blue: #09438f;
  --cp-blue-trans: rgba(16, 78, 151, 0.1);
  --cp-blue-trans-dark: rgba(16, 78, 151, 0.6);
  --cp-darkgray: #747374;
  --cp-lightgray: #d0cfd0;
  --cp-light-green: #efffde;
  --cp-orange: rgb(245, 152, 35);
  --cp-green: rgb(84, 157, 0);
  --cp-green-trans: rgba(84, 157, 0, 0.1);

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

  --cp-font-size-xsmall: 12px;
  --cp-font-size-small: 14px;
  --cp-font-size-normal: 16px;
  --cp-font-size-medium: 22px;

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

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

* {
  box-sizing: border-box;
}

h1,
h2 {
  margin: 0;
}

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

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

a {
  text-decoration: none;
  color: var(--cp-green);
}
a:visited {
  color: var(--cp-orange);
}
a:hover {
  text-decoration: underline;
  background: var(--cp-green-trans);
}
a.small-link {
  color: var(--cp-blue);
  font-weight: 400;
  font-size: var(--cp-font-size-xsmall);
}

.container {
  max-width: var(--cp-container-max-width);
  margin: 0 auto;
  padding: var(--cp-unit-2);
  position: relative;
}

.share {
  position: absolute;
  right: 3px;
  top: 3px;

  display: flex;
  align-content: space-between;
}
.share > *:not(:first-child) {
  margin-left: 3px;
}
@media (min-width: 900px) {
  .share {
    right: 20px;
    top: 25px;
  }
}

ul.main-selector {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
ul.main-selector .selected {
  color: var(--cp-red);
  border-bottom: solid 2px var(--cp-red);
}
ul.main-selector a {
  color: var(--cp-red-trans-dark);
}
ul.main-selector li:not(:first-child) {
  margin-left: var(--cp-space);
}

.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(--cp-space);
}
.articles .selector a {
  color: var(--cp-blue-trans-dark);
}
.articles .selector .selected {
  color: var(--cp-blue);
  border-bottom: solid 2px var(--cp-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(--cp-unit-2);
  }
  .articles .side .item {
    font-size: var(--cp-font-size-small);
  }
  .articles .side .item-title {
    font-size: var(--cp-font-size-normal);
  }
  .articles .side img {
    width: 120px;
  }
  .articles .side .heading a {
    color: var(--cp-blue);
  }

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

.header {
  padding: var(--cp-space) 0 var(--cp-unit) 0;
  background-color: var(--cp-light-green);
  border-bottom: 3px solid var(--cp-green);
  position: relative;
}
.header .nav {
  position: absolute;
  right: 0;
  bottom: 0;
  background-color: var(--cp-green);
  padding: 0 6px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 16px;
}
.header .nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.header .nav a {
  font-size: var(--cp-font-size-xsmall);
  color: white;
  height: 15px;
}
.header .logo {
  position: relative;
}
.header .logo img {
  background-color: var(--cp-light-green);
  z-index: 1;
}
.header .logo::after {
  content: "beta";
  font-size: 11px;
  color: var(--cp-green);
  position: absolute;
  right: 10px;
  top: 15px;
}
.header .slogan {
  font-weight: var(--cp-font-weight-bold);
  color: var(--cp-red);
  white-space: nowrap;
}
.header .datetime {
  font-weight: var(--cp-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(--cp-red);
  width: 100%;
}
.header .header-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  padding: 0 var(--cp-unit);
  margin: 0 auto;
  max-width: var(--cp-header-max-width);
}
.header .header-container .datetime {
  margin-top: var(--cp-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(--cp-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;
  }
}

.item {
  padding: var(--cp-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(--cp-lightgray);
}
.item a.show-more {
  display: inline-block;
  margin-top: 3px;
}
.item-source {
  color: var(--cp-darkgray);
  font-weight: var(--cp-font-weight-bold);

  position: relative;
}
.item-source .article-share {
  display: flex;
  align-items: center;
  position: absolute !important;
  top: 0;
  right: 0;
}
.item-source .article-share > *:not(:first-child) {
  margin-left: 3px;
}
.item-title {
  color: var(--cp-blue);
  font-size: var(--cp-font-size-medium);
  font-weight: var(--cp-font-weight-bold);
  margin: var(--cp-unit-half) 0;
}
.item-description {
  color: var(--cp-darkgray);
}
.item-others {
  padding-left: var(--cp-unit);
  margin-top: var(--cp-unit-half);
  border-left: 2px solid var(--cp-blue);
}
.item-related {
  margin-left: 1em;
  text-indent: -1em;
}
.item-related-hidden {
  display: none;
}
.item-others-title {
  color: var(--cp-blue);
  margin-top: var(--cp-unit);
}
.item-img-preview {
  float: right;
  width: 160px;
  padding-left: var(--cp-unit);
}
@media (min-width: 481px) {
  .item-img-preview {
    max-width: 240px;
    max-height: 160px;
    width: auto;
    height: auto;
  }
}

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