@font-face {
  font-family: 'Bebas Neue';
  src: url('/fonts/BebasNeue.woff2') format('opentype');
  font-style: normal;
  font-weight: normal;
}

:root {
  /* ----------------------------------------------------------------------------------------
  // Typography
  // ---------------------------------------------------------------------------------------- */
  --baseFontSize: 18px;
  --scaleRatio: 1.5; /* Possible values: 1.067, 1.125, 1.2, 1.333, 1.414, 1.5, 1.618 */
  --leading: calc(var(--scaleRatio) * var(--baseFontSize));
  --defaultFonts: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --headingFonts: 'Bebas Neue';
  /* ----------------------------------------------------------------------------------------
  // Layout
  // ---------------------------------------------------------------------------------------- */
  --sectionGap: calc(4 * var(--leading));
  --gutter: 24px;
  /* ----------------------------------------------------------------------------------------
  // Colors
  // ---------------------------------------------------------------------------------------- */
  --mainColor: white; /* Ideally takes up 60% of design */
  --subColor: #ffc821; /* Ideally takes up 30% of design */
  --accentColor: #C9165A; /* Ideally takes up 10% of your design; often the default color for buttons & links */
  --textColor: black;
  --backgroundColor: var(--mainColor);
}

html, body {
  background: #F4F2F0 url(./pics/texture.png);
}

/* ----------------------------------------------------------------------------------------
// COVERS
// ----------------------------------------------------------------------------------------*/
.logo + svg {
  margin-top: calc(.5 * var(--leading));
  color: var(--textColor);
}

.logo + svg + p {
  margin-top: calc(.5 * var(--leading));
}

#covers small {
  display: none;
}

#covers small + * {
  margin-top: 0;
}

#covers.loading {
  position: relative;
  text-align: center;
}

#covers.loading::after {
  content: 'Loading journal covers...';
  display: block;
  width: 100%;
  font-size: calc((1 / var(--scaleRatio)) * var(--baseFontSize)); /* <small> size */
  text-transform: uppercase;
  padding: var(--leading) 0; 
}

#covers a {
  display: inline-block;
  max-width: 300%;
  overflow: hidden;
  display: inline-flex;
  flex-flow: column nowrap;
  align-items: center;
}

@media screen and (min-width: 480px) {
  #covers a {
    max-width: 240px; // if below full width, JS handles it
  }
}

#covers a img {
  max-width: 300%;
}

#covers a:nth-child(n+11) {
  display: none;
}