/* -------------------------- /
#18 Accent color
/-----------------------------*/

:root {
  --accent:#E30079;
  --contrast: #bada55;
  --copy: #fff;
  --light-on-dark: #a3f784;
  --is-white: #fff;
  --is-dark: #222;
}

.page-number {
    top:0;
    bottom:initial;
}
h1,
h2,
h3
{
    color:var(--accent);
}

h1:is(.editor-wrap) {
    color:var(--accent);
}

a {
    color: var(--accent);
}
/* ----------------------------/
             COVER
/------------------------------*/
.cover-img {
  background-image: url(../img/cover.webp);
}

/* ----------------------------/
    column header image
/------------------------------*/

.flex-container {
  display: flex;
  width: auto;
  flex-direction: column;
  min-height: 360px;
}

.flex-container div {
  width: 40%;
  font-style: oblique;
  font-size: 1.2rem;
}

@media screen and (min-width: 600px) {
  .flex-container {
    flex-direction: row;
  }
}


/* contents */

:is(.article-a, .article-b, .article-c, .article-d, .article-e, .feature-b ) {
  background-color: var(--accent);
  color: var(--is-white);
}

.feature-a {
  background-color: var(--contrast);
  
}

.feature-a h3 {
  color: var(--is-dark);
}

.config a:not(.config.--three a) {
  color:var(--is-white);
}



.feature-a p {
  color: var(--is-dark);
}

.split-left {
  margin-bottom:.35em;
}

.split-right {
  margin: auto;
}