:root {
  /* ----------------------------------------------------------------------------------------
  // Theme
  // ---------------------------------------------------------------------------------------- */
  --theme: scrapbook;
  --palette: classic-fire;
  /* ----------------------------------------------------------------------------------------
  // Basics
  // ---------------------------------------------------------------------------------------- */
  --pageAlignment: 'center';
  --buttonRoundness: 'round';
  --underlineThickness: 'thickline';
  /* ----------------------------------------------------------------------------------------
  // Typography
  // ---------------------------------------------------------------------------------------- */
  --feel: 'modern';
  --baseFontSize: 18px;
  --scaleRatio: 1.414;
  --leading: calc(var(--scaleRatio) * var(--baseFontSize));
  /* ----------------------------------------------------------------------------------------
  // Layout
  // ---------------------------------------------------------------------------------------- */
  --sectionGap: calc(4 * var(--leading));
  --gutter: 24px;
  /* ----------------------------------------------------------------------------------------
  // Colors
  // ---------------------------------------------------------------------------------------- */
  --mainColor: #fbf6f4;
  --subColor: #F37E4F;
  --accentColor: #EF4E00;
  --textColor: black;
  --backgroundColor: var(--mainColor);
  /* ----------------------------------------------------------------------------------------
  // Page Type
  // ---------------------------------------------------------------------------------------- */
  --pageType: 'brochure';
}

body.spacePink {
  --mainColor: black;
  --subColor: #F1D04F;
  --accentColor: #D41D4C;
  --textColor: white;
  --backgroundColor: var(--mainColor);
}

* {
  transition: .3s all;
}

.cta {
  cursor: pointer;
}

[src*="magic"] {
  width: 25%;
}

[src*="Mio"] {
  width: 50%;
}

#clickedSpacePinkMsg {
  display: none;
}

#classicFireNoMamaMsg {
  display: block;
}

.spacePink #clickedSpacePinkMsg {
  display: block;
}

.spacePink #classicFireNoMamaMsg {
  display: none;
}

.availabilityLabel {
  background-color: var(--textColor);
  color: var(--backgroundColor);
  padding: calc(.25 * var(--leading)) ;
  width: auto;
  margin-top: calc(.5 * var(--leading));
}

.variation {
  font-size: calc(var(--scaleRatio) * var(--baseFontSize));
}

#slogan {
  margin-top: calc(.25 * var(--leading));
  font-weight: normal; /* Bebas Neue needs to be 400, or it will look ugly on iOS */
}

#slogan i {
  font-style: normal;
  display: inline-block;
}

#slogan i:first-of-type { /* 'F' */
  transform: rotate(-15deg);
  color: #F94273;
  margin-left: 1px;
}

#slogan i:nth-of-type(2) { /* 'U' */
  color: #00A040;
  transform: translateX(1px) translateY(-2px);
}

#slogan i:nth-of-type(3) { /* 'N' */
  transform: translateX(2px) translateY(-1px) rotate(12deg);
  color: blue;
}

#slogan i:nth-of-type(4) { /* '.' */
  transform: translateX(2px);
}

.wideSpacing {
  --sectionGap: calc(8 * var(--leading));
}