@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.414; /* 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: 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;
}

/* ----------------------------------------------------------------------------------------
// HOME
// ----------------------------------------------------------------------------------------*/
img[src*="moi"] { // my pic
  width: 96px;
  height: 96px;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
}

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

#logo + h3,
h1,
h2 {
  font-family: var(--headingFonts);
  font-weight: normal;
}

h2 {
  background-color: #000;
  color: #fff;
}

h2 + h3 {
  margin-top: calc(.5 * var(--leading));
}

p {
  background-color: rgba(255, 255, 255, 1);
}

.defaultFont {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.lfbLogo {
  height: calc(2*var(--leading));
  width: auto;
  margin-bottom: calc(-.5*var(--leading));
}

/* ----------------------------------------------------------------------------------------
// WALLPAPERS
// ----------------------------------------------------------------------------------------*/
#wallpapers .samples {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
  overflow: hidden;
}

#wallpapers .samples img {
  margin-top: 0;
  margin-left: var(--gutter);
  flex: 1 0 25%;
  width: 25%;
  width: calc((100%-var(--gutter)-var(--gutter))/3);
}

#wallpapers .samples img:first-of-type {
  margin-left: 0;
}

#wallpapers .samples + .cta {
  margin-top: var(--leading);
}

/* ----------------------------------------------------------------------------------------
// PROMO CODE
// ----------------------------------------------------------------------------------------*/
#promoCode span {
  font-weight: bold;
  display: inline-block;
  border: 1px solid var(--textColor);
  padding: 0 calc(.5 * var(--gutter));
  margin-left: calc(.5 * var(--gutter));
}