<main class="main">
      <header class="header">
        <img class="header__logo_sm" alt="Creativity Logo small" src="https://www.michaelschneider.io/misc/fcc/rwd/01-tribute-page/img/tribute-page_logo_sm.svg">
        <img class="header__logo_lg" alt="Creativity Logo large" src="https://www.michaelschneider.io/misc/fcc/rwd/01-tribute-page/img/tribute-page_logo_lg.svg">
        <h1 class="header__title" id="title">A tribute to John Cleese</h1>
        <div class="header__intro">
          <p><span class="header__intro_highlight">How to be creative?</span> Essentially, there are
            two modes
            and
            you want to be in the 'open mode'. Read on for a short summary of Cleese's <a href="https://vimeo.com/176474304" target="_blank" id="tribute-link">great speech.</a></p>
        </div>
      </header>

      <div class="modes">
        <img class="mode-open__svg" src="https://www.michaelschneider.io/misc/fcc/rwd/01-tribute-page/img/tribute-page_mode_open.svg" alt="Pinada Illustration">
        <div class="mode-open__txt">
          <h2 class="h2">Open Mode</h2>
          <ul class="mode__list">
            <li><span class="mode-open__li_highlight">• not under pressure to get a</span></li>
            <li>specific thing done quickly</li>
            <li><span class="mode-open__li_highlight">• curiosity for its own sake</span></li>
            <li>• more inclined to humor</li>
            <li><span class="mode-open__li_highlight">• less purposeful mode</span></li>
            <li>• more contemplative</li>
            <li><span class="mode-open__li_highlight">• wider perspective</span></li>
            <li>• more playful</li>
            <li><span class="mode-open__li_highlight">• expansive</span></li>
            <li>• relaxed</li>
          </ul>
        </div>
        <img class="mode-closed__svg" src="https://www.michaelschneider.io/misc/fcc/rwd/01-tribute-page/img/tribute-page_mode_closed.svg" alt="Lock Illustration">
        <div class="mode-closed__txt">
          <h2 class="h2 mode-close__txt_h2">Closed Mode</h2>
          <ul class="mode__list">
            <li><span class="mode-closed__li_highlight">• a little impatient w/ ourselves</span></li>
            <li>• active (somewhat anxious)</li>
            <li><span class="mode-closed__li_highlight">• can get very stressful</span></li>
            <li>• getting things done</li>
            <li><span class="mode-closed__li_highlight">• a little tension in it</span></li>
            <li>• not much humor</li>
            <li><span class="mode-closed__li_highlight">• very purposeful</span></li>
            <li>• not creative</li>
            <li><span class="mode-closed__li_highlight">• work mode</span></li>
          </ul>
        </div>
      </div>

      <div class="five-steps">
        <h2 class="h2 five-steps__headline">Conditions for the open mode:</h2>

        <!-- Step 1 - Astronaut -->
        <div id="bm-astronaut" class="five-steps__step-1_illu"></div>

        <div class="five-steps__box five-steps__step-1_box">
          <h3 class="five-steps__box_headline">
            <span class="five-steps__box_number-label five-steps__step-1_box_number-label">1</span>
            Space
          </h3>
          <ul class="five-steps__box_list">
            <li>No usual pressures</li>
            <li>Create space away from those demands!</li>
            <li>Quiet and undisturbed</li>
          </ul>
        </div>

        <!-- Step 2 - Pomodoro Timer -->
        <svg class="five-steps__step-2_illu" viewBox="0 0 175 147" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <defs>
            <filter x="-2.3%" y="-2.6%" width="104.6%" height="105.2%" filterUnits="objectBoundingBox" id="filter-1">
              <feOffset dx="-1" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
              <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.15 0" type="matrix" in="shadowOffsetOuter1" result="shadowMatrixOuter1"></feColorMatrix>
              <feMerge>
                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
                <feMergeNode in="SourceGraphic"></feMergeNode>
              </feMerge>
            </filter>
            <style type="text/css">
              @import url('https://fonts.googleapis.com/css?family=Montserrat:600');
            </style>
          </defs>
          <g transform="translate(-164.000000, -1214.000000)">
            <g transform="translate(163.397705, 1205.225633)">
              <g filter="url(#filter-1)" transform="translate(0.000000, 0.972656)">
                <ellipse fill="#FE5B47" fill-rule="nonzero" cx="88.6233216" cy="96.5009775" rx="70.3772279" ry="56.1939785"></ellipse>
                <g transform="translate(0.775665, 59.694956)">
                  <rect fill="#FE5B47" fill-rule="nonzero" x="0.940142168" y="0.389805856" width="173.01" height="74.8" rx="13"></rect>
                  <rect fill="#000000" fill-rule="nonzero" x="7.94014217" y="7.69683709" width="76.7072068" height="60.7999964" rx="9.59999943">
                  </rect>
                  <rect fill="#000000" fill-rule="nonzero" x="90.2448248" y="7.69683709" width="76.7072068" height="60.7999964" rx="9.59999943">
                  </rect>
                  <text font-family="Helvetica, Arial" font-size="51.1999969" font-weight="600" fill="#FFF67E">
                    <tspan x="17.5" y="55.8273242">00</tspan>
                  </text>
                  <text font-family="Helvetica, Arial" font-size="51.1999969" font-weight="600" fill="#FFF67E">
                    <tspan id="pomodoro" x="100" y="55.8273242">25</tspan>
                  </text>
                  <path d="M7.94014217,38.3954683 L84.647349,38.3954683" stroke="#000000" stroke-width="7" fill-rule="nonzero"></path>
                  <path d="M90.2448248,38.3954683 L166.952032,38.3954683" stroke="#000000" stroke-width="7" fill-rule="nonzero"></path>
                </g>
                <g transform="translate(92.425565, 40.037027) rotate(-23.000000) translate(-92.425565, -40.037027) translate(61.925565, 10.537027)" fill="#8BD5D1" fill-rule="nonzero">
                  <path d="M39.7388172,59.7556255 C35.084161,55.019433 32.2129407,48.5248466 32.2129407,41.3596507 C32.2129407,34.1944548 35.084161,27.6998683 39.7388172,22.9636758 C44.3934733,27.6998683 47.2646936,34.1944548 47.2646936,41.3596507 C47.2646936,48.5248466 44.3934733,55.019433 39.7388172,59.7556255 Z" transform="translate(39.738817, 41.359651) rotate(130.000000) translate(-39.738817, -41.359651) ">
                  </path>
                  <path d="M41.1666463,36.9499883 C36.3894992,32.0891592 33.4427205,25.4236625 33.4427205,18.0699088 C33.4427205,10.7161551 36.3894992,4.0506585 41.1666463,-0.81017065 C45.9437934,4.0506585 48.8905722,10.7161551 48.8905722,18.0699088 C48.8905722,25.4236625 45.9437934,32.0891592 41.1666463,36.9499883 Z" transform="translate(41.166646, 18.069909) rotate(50.000000) translate(-41.166646, -18.069909) ">
                  </path>
                  <path d="M16.4851975,35.6349858 C12.2319476,31.3072311 9.60833439,25.372722 9.60833439,18.8254352 C9.60833439,12.2781484 12.2319476,6.34363935 16.4851975,2.0158846 C20.7384474,6.34363935 23.3620607,12.2781484 23.3620607,18.8254352 C23.3620607,25.372722 20.7384474,31.3072311 16.4851975,35.6349858 Z" transform="translate(16.485198, 18.825435) rotate(-40.000000) translate(-16.485198, -18.825435) ">
                  </path>
                </g>
              </g>
            </g>
          </g>
        </svg>

        <div class="five-steps__box five-steps__step-2_box">
          <h3 class="five-steps__box_headline">
            <span class="five-steps__box_number-label five-steps__step-2_box_number-label">2</span>
            Time
          </h3>
          <ul class="five-steps__box_list">
            <li>Specific period</li>
            <li>Play is distinct from ordinary life.</li>
            <li>Main characteristic: its secludedness, its limitedness;</li>
          </ul>
        </div>

        <div id="bm-mug" class="five-steps__step-3_illu"></div>
        <div class="five-steps__box five-steps__step-3_box">
          <h3 class="five-steps__box_headline">
            <span class="five-steps__box_number-label five-steps__step-3_box_number-label">3</span>
            Time
          </h3>
          <ul class="five-steps__box_list">
            <li>Tolerate pondering!</li>
            <li>Ask: "When does this decision have to be taken?"</li>
            <li>Defer the decision until then!</li>
          </ul>
        </div>

        <div id="bm-peacock" class="five-steps__step-4_illu"></div>
        <div class="five-steps__box five-steps__step-4_box">
          <h3 class="five-steps__box_headline">
            <span class="five-steps__box_number-label five-steps__step-4_box_number-label">4</span>
            Confidence
          </h3>
          <ul class="five-steps__box_list">
            <li>Nothing is wrong.</li>
            <li>To play is to experiment: "What happens if I do this?”</li>
            <li>The very essence of playfulness is an openness to anything.</li>
          </ul>
        </div>

        <div id="bm-hat" class="five-steps__step-5_illu"></div>
        <div class="five-steps__box five-steps__step-5_box">
          <h3 class="five-steps__box_headline">
            <span class="five-steps__box_number-label five-steps__step-5_box_number-label">5</span>
            Humor
          </h3>
          <ul class="five-steps__box_list">
            <li>Serious doesn't equal solemn.</li>
            <li>Serious matters can be laughed about.</li>
            <li>But solemnity? It serves pomposity.</li>
          </ul>
        </div>
      </div>

      <div class="footer">
        <p class="footer__star">*</p>
        <p class="footer__paragraph">
          You can't guarantee anything will occur. You might sit around for hours
          as I did last Tuesday, and nothing. Zilch. Bupkis. Not a sausage.
        </p>
      </div>
    </main>

/* RESET */
html {
  box-sizing: border-box;
  font-size: 16px;
}

:root {
  --primary: #fe5b47;
  --primary-light: #ff8e73;
  --primary-dark: #c4231d;

  --secondary: #8bd5d1;
  --secondary-light: #bdffff;
  --secondary-dark: #5aa3a0;

  --tertiary: #fff67e;
  --tertiary-light: #ffffb0;
  --tertiary-dark: #cac34e;

  --grey: #b6b6b6;
  --grey-light: #dfdfdf;
  --black: #000;
  --white: #fff;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul {
  margin: 0;
  padding: 0;
  font-family: Montserrat;
  font-weight: 700;
}

ol,
ul {
  list-style-type: none;
  position: relative;
  display: inline-block;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
/* -------------- */

html,
body {
  height: 100%;
}

@media screen and (min-width: 870px) {
  body {
    padding-top: 1.5rem;
    background-image: url(https://www.michaelschneider.io/misc/fcc/rwd/01-tribute-page/img/tribute-page_bg_2.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 1540px 1200px;
    background-attachment: fixed;
  }
}

a {
  color: #1a7bc2;
}

.h2 {
  font-weight: 900;
  font-size: 2.2rem;
  text-align: center;
}

.bg {
  display: none;
}

/* MAIN box-style container */
@media screen and (min-width: 870px) {
  .main {
    border: 7px solid var(--black);
    border-radius: 2rem;
    box-shadow: -15px 22px 0 0 #fe5b47;
    background-color: var(--white);
    padding: 0 1.2rem;
    max-width: 44rem;
    margin: 0 auto 3rem;
  }
}

/* HEADER */
.header {
  margin: 0 5% 1.5rem;
  text-align: center;
}

.header__intro {
  font-size: 1rem;
  margin: 1rem auto 0;
  color: var(--black);
  padding: 0 5%;
  max-width: 700px;
}

.header__intro_highlight {
  color: var(--primary);
}

.header__logo_sm {
  max-width: 460px;
}

.header__logo_lg {
  display: none;
}

@media screen {
  .header__title {
    display: none;
  }
}

@media screen and (min-width: 720px) {
  .header {
    margin: 0 9% 2.5rem;
  }
}

@media screen and (min-width: 870px) {
  .header__logo_lg {
    display: initial;
    margin-top: 2.2rem;
  }

  .header__logo_sm {
    display: none;
  }
}

/* MODES (closed & open) */
.modes {
  display: grid;
  margin: 0 5% 2rem;
  grid-template-rows: 13.5rem 20rem 13.5rem 20rem;
  grid-template-areas:
    "aimg"
    "atxt"
    "bimg"
    "btxt";
}

.mode__list {
  text-align: center;
  line-height: 1.8em;
}

.mode-closed__svg {
  display: block;
  grid-area: bimg;
  justify-self: center;
  align-self: end;
  margin-bottom: 1.1rem;
  width: 125px;
}

.mode-closed__txt {
  justify-self: center;
  grid-area: btxt;
}

.mode-closed__li_highlight {
  padding: 0.07rem 0.4rem;
  border-radius: 1rem;
  background-color: var(--grey-light);
}

.mode-open__svg {
  width: 160px;
  justify-self: center;
  align-self: end;
  grid-area: aimg;
  margin-bottom: 1.1rem;
}

.mode-open__txt {
  justify-self: center;
  grid-area: atxt;
}

.mode-open__li_highlight {
  padding: 0.07rem 0.4rem;
  border-radius: 1rem;
  background-color: var(--tertiary);
}

@media screen and (min-width: 440px) {
  .modes {
    margin: 0 auto 2.5rem;
    max-width: 28.5rem;
    grid-template-rows: 20rem 20rem;
    grid-template-areas:
      "atxt aimg"
      "btxt bimg";
  }

  .mode-closed__svg,
  .mode-open__svg {
    align-self: center;
  }
}

@media screen and (min-width: 440px) and (max-width: 475px) {
  .modes {
    padding: 0 1.5rem;
  }
}

@media screen and (min-width: 440px) and (max-width: 595px) {
  .mode-closed__txt,
  .mode-open__txt {
    font-size: 90%;
  }
}

@media screen and (min-width: 596px) {
  .modes {
    grid-row-gap: 3rem;
  }
}

@media screen and (min-width: 720px) {
  .mode-open__svg {
    transform: scale(1.18);
  }

  .mode-closed__svg {
    transform: scale(1.18) translateX(-12px);
  }

  .modes {
    max-width: 35rem;
    grid-column-gap: 4rem;
  }
}

/* FIVE-STEPS */
.five-steps {
  margin: 0 auto 3.75rem;
  padding: 0 1.5rem;
  display: grid;
  place-items: center center;
  grid-gap: 3rem;
  max-width: max-content;
}

.five-steps__headline {
  margin-bottom: -1rem;
}

.five-steps__box {
  border: 7px solid var(--black);
  border-radius: 1rem;
  background-color: var(--white);
  box-shadow: -7px 14px 0 0 rgba(0, 0, 0, 0.15);
  padding: 0.9rem 1.2rem 1rem;
  max-width: 300px;
  position: relative;
}

.five-steps__box_number-label {
  background-color: grey;
  color: white;

  height: 2rem;
  width: 2rem;
  padding-top: 0.25rem;
  margin-right: 0.2rem;
  text-align: center;
  display: inline-block;
  border-radius: 100%;

  font-weight: 700;
  font-size: 1.2rem;
}

.five-steps__box_headline {
  font-size: 1.4em;
  font-weight: 800;
  margin-bottom: 0.5rem;
}

.five-steps__box_list {
  list-style-type: disc;
  list-style-position: outside;
  margin-left: 1rem;
  color: var(--black);
}

.five-steps__box_list > li {
  margin-bottom: 0.3rem;
}

.five-steps__step-1_illu,
.five-steps__step-2_illu,
.five-steps__step-3_illu,
.five-steps__step-4_illu,
.five-steps__step-5_illu {
  width: 192px;
  margin-bottom: -1rem;
}

.five-steps__step-1_box,
.five-steps__step-3_box,
.five-steps__step-5_box {
  border-color: var(--secondary-dark);
  box-shadow: -7px 14px 0 0 var(--tertiary);
}

.five-steps__step-2_box,
.five-steps__step-4_box {
  border-color: var(--primary);
  box-shadow: -7px 14px 0 0 var(--tertiary);
}

.five-steps__step-1_box_number-label,
.five-steps__step-3_box_number-label,
.five-steps__step-5_box_number-label {
  background-color: var(--secondary-dark);
}

.five-steps__step-2_box_number-label,
.five-steps__step-4_box_number-label {
  background-color: var(--primary);
}

@media screen and (min-width: 640px) {
  .five-steps .h2 {
    grid-column-start: 1;
    grid-column-end: 3;
  }

  .five-steps__box {
    max-width: 350px;
  }

  .five-steps__step-1_illu,
  .five-steps__step-2_illu,
  .five-steps__step-3_illu,
  .five-steps__step-4_illu,
  .five-steps__step-5_illu {
    width: 185px;
  }
}

@media screen and (min-width: 800px) {
  .five-steps {
    grid-gap: 4rem;
  }

  .five-steps__step-1_illu,
  .five-steps__step-2_illu,
  .five-steps__step-3_illu,
  .five-steps__step-4_illu,
  .five-steps__step-5_illu {
    width: 190px;
  }
}

/* FOOTER */
.footer {
  margin: 0 auto 3rem;
  padding: 0 1.5rem;
  max-width: 31rem;
  font-size: 1rem;
  display: flex;
}

.footer__star {
  color: var(--primary);
  font-size: 4rem;
  font-weight: 900;
  line-height: 2.6rem;
}

.footer__paragraph {
  align-self: center;
  padding: 0 10px;
  color: var(--grey);
}

@media screen and (min-width: 540px) {
  .footer {
    padding: 0 1rem;
  }
}

@media screen and (min-width: 800px) {
  .footer {
    margin: 0 auto 4rem;
  }
}

// ANIMATIONS
// Pomodoro
let pomTimings = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10",
  "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22",
  "23", "24", "25"];
let pomCounter = 0;
var setPomTime = setInterval(newPomTime, 1000);

function newPomTime() {
  $("#pomodoro").text(pomTimings[pomCounter]);
  pomCounter++;
  if (pomCounter === 25) {
    pomCounter = 0;
  }
}

// Astronaut
var animationMug = bodymovin.loadAnimation({
  container: document.getElementById('bm-astronaut'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'https://www.michaelschneider.io/misc/fcc/rwd/01-tribute-page/bm-astronaut.json'
})

// Mug
var animationMug = bodymovin.loadAnimation({
  container: document.getElementById('bm-mug'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'https://www.michaelschneider.io/misc/fcc/rwd/01-tribute-page/bm-mug.json'
})

// Peacock
var animationPeacock = bodymovin.loadAnimation({
  container: document.getElementById('bm-peacock'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'https://www.michaelschneider.io/misc/fcc/rwd/01-tribute-page/bm-peacock.json'
})

// Hat
var animationHat = bodymovin.loadAnimation({
  container: document.getElementById('bm-hat'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'https://www.michaelschneider.io/misc/fcc/rwd/01-tribute-page/bm-hat.json'
})