@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; /* Other possibilities: 1.067, 1.125, 1.2, 1.333, 1.414, 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', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  /* ----------------------------------------------------------------------------------------
  // Layout
  // ---------------------------------------------------------------------------------------- */
  --sectionGap: calc(4 * var(--leading));
  --gutter: 2.4rem;
  /* ----------------------------------------------------------------------------------------
  // Colors
  // ---------------------------------------------------------------------------------------- */
  --mainColor: transparent; /* 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: #F4F2F0;
}

/* ----------------------------------------------------------------------------------------
// LANDING PAGES
// ----------------------------------------------------------------------------------------*/
:not(.home) h1,
:not(.home) p {
  background-color: white;
}

:not(.home) h1 {
  font-family: var(--headingFonts);
  font-weight: normal;
}

:not(.home) h1 + * {
  margin-top: calc(.5 * var(--leading));
}

.shadowed {
  box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, .4);
}

.hero img {
  max-width: none;
}

/* ----------------------------------------------------------------------------------------
// WD101
// ---------------------------------------------------------------------------------------- */
#fullPackage {
  > figure {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
}

.productCover {
  display: block;
  width: 50%;
  margin: var(--leading) auto;
  transform: perspective(1200px) rotateY(-30deg);
  border-right: .5rem solid #fff;
  box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, .4);
}

#videoCover {
  width: 38%;
  position: absolute;
  top: $leading;
  left: 55%;
  box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, .4);
}

#videoCover + .productCover {
  position: relative;
  margin-left: var(--gutter);
}