/* The static pages beside the app (tutorials, Flash RPG): iioengine.com's
   frame from style.css, plus the bits of the tutorials' own markup. */

.page {
  max-width: 820px;
  padding-bottom: 40px;
}
.page h1 { font-size: 2.2em; padding: 18px 0 6px; }
.page h2 { font-size: 1.5em; }
.page p { line-height: 1.6; }
.page a { color: #00baff; }
.page a:hover { color: #ffffff; }
.page ul, .page ol { margin-left: 22px; line-height: 1.6; }
.page img { max-width: 100%; }
.page pre.prettyprint { margin: 10px 0 14px; overflow-x: auto; }
.page canvas { display: block; margin: 14px 0; border: 1px solid #6F6F6F; max-width: 100%; }

.green { color: #65B042; }
.red { color: #ff5a5a; }
.bold { font-weight: bold; }

/* Tutorials index: a preview canvas beside each tutorial's title. */
.tutorial_demos { margin-top: 10px; }
.tutorial_demo_wrapper { display: flex; gap: 24px; align-items: center; padding: 14px 0; border-bottom: 1px solid #333; }
.tutorial_demo_wrapper canvas { margin: 0; flex: none; }
.tutorial_demo_wrapper canvas:hover { border-color: #00baff; }
.tutorial_text_wrapper h3 { padding-top: 0; }

/* Download / GitHub buttons. */
.project_buttons, .app_buttons { margin: 16px 0; }
.btn_wrap { display: inline-block; margin-right: 10px; }

/* Flash RPG, played by Ruffle. */
#rpg_player { margin: 16px 0 24px; max-width: 100%; }
#rpg_player ruffle-player { max-width: 100%; border: 1px solid #6F6F6F; }
.page a.btn-iio, .page .big-btn a { color: #ffffff; }