<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<meta charset="UTF-8">
<title>CSS Washing machine</title>
<link rel="dns-prefetch" href="https://apc.codepen.io">
<style type="text/css">@font-face {font-family:Lato;font-style:normal;font-weight:400;src:url(/cf-fonts/s/lato/5.0.18/latin-ext/400/normal.woff2);unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;font-display:swap;}@font-face {font-family:Lato;font-style:normal;font-weight:400;src:url(/cf-fonts/s/lato/5.0.18/latin/400/normal.woff2);unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:swap;}@font-face {font-family:Lato;font-style:normal;font-weight:700;src:url(/cf-fonts/s/lato/5.0.18/latin-ext/700/normal.woff2);unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;font-display:swap;}@font-face {font-family:Lato;font-style:normal;font-weight:700;src:url(/cf-fonts/s/lato/5.0.18/latin/700/normal.woff2);unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:swap;}@font-face {font-family:Lato;font-style:normal;font-weight:900;src:url(/cf-fonts/s/lato/5.0.18/latin-ext/900/normal.woff2);unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;font-display:swap;}@font-face {font-family:Lato;font-style:normal;font-weight:900;src:url(/cf-fonts/s/lato/5.0.18/latin/900/normal.woff2);unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:swap;}@font-face {font-family:Lato;font-style:italic;font-weight:400;src:url(/cf-fonts/s/lato/5.0.18/latin/400/italic.woff2);unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:swap;}@font-face {font-family:Lato;font-style:italic;font-weight:400;src:url(/cf-fonts/s/lato/5.0.18/latin-ext/400/italic.woff2);unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;font-display:swap;}</style>
<meta name="twitter:title" content="CSS Washing machine">
<meta name="twitter:description" content="Another thing for my co-worker!...">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://shots.codepen.io/username/pen/YoYNve-800.jpg?version=1569249893">
<meta property="og:image" content="https://shots.codepen.io/username/pen/YoYNve-800.jpg?version=1569249893" itemprop="thumbnailUrl">
<meta property="og:title" content="CSS Washing machine">
<meta property="og:url" content="https://codepen.io/Arkellys/details/YoYNve">
<meta property="og:description" content="Another thing for my co-worker!...">
<link rel="alternate" type="application/json+oembed" href="https://codepen.io/api/oembed?url=https%3A%2F%2Fcodepen.io%2FArkellys%2Fpen%2FYoYNve&format=json" title="CSS Washing machine" />
<link rel="stylesheet" media="all" href="https://cpwebassets.codepen.io/assets/global/global-4e815026f0cd8b8c2803d5f11f4e403dd2f387f695ae16e277dd457ee6a78492.css" />
<link rel="stylesheet" media="screen" href="https://cpwebassets.codepen.io/assets/packs/css/everypage-18b4c19e.css" />
<link rel="stylesheet" media="all" href="https://cpwebassets.codepen.io/assets/editor/editor-1c1e1bc9a9c19175444f3aa742f0ec1dee2998210a113bb12379a9ec9420f3c5.css" />
<meta name="description" content="Another thing for my co-worker!...">
<link rel="stylesheet" media="screen" href="https://cpwebassets.codepen.io/assets/editor/themes/twilight-8ea74c444cf457f9a50f818792c3de6bb5f118202377c4fb1b7b1cc973b4070c.css" id="cm-theme" />
<style id="cm-font-family" class="cm-font-family" nonce="vbYhXKcRIJs=">
  
  .CodeMirror,
  .console-logs .console-line,
  .console-command-line-input,
  .console-message,
  .CodeMirror-hint {
    font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo,
  monospace;
  }
</style>
<style id="cm-font-size" nonce="vbYhXKcRIJs=">
  .CodeMirror,
  .console-logs .console-line,
  .console-command-line-input,
  .console-message,
  .CodeMirror-hint {
    font-size: 15px;
  }
</style>
<link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" />
<meta name="apple-mobile-web-app-title" content="CodePen">
<link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />
<link rel="mask-icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg" color="#111" />
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="OJ1c8mC5/6P/wVCk0bQYVepfpuJ5r92qnHhzduWTmUXB5MgDNYsKeM+6HzbmmekkFuVxodWXy7AKWLFP5+J3WQ==" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
</head>
<body class="room-editor editor state-htmlOn-cssOn-jsOn twilight preload prelayout
  layout-left
    layout-side
   logged-in
">
<header class="main-header" id="main-header">
</header>
<div class="item-settings-modal tab-layout tab-layout-modal pen  item-settings-modal-half" id="item-settings-modal">
<header class="item-settings-modal-header tab-layout-header">
<h2 class="item-settings-modal-header-title tab-layout-header-title">Pen Settings</h2>
<div class="save-and-close-wrap">
<button type="button" class="button mini-button button-no-right-margin close" id="top-close-settings">
<svg class="icon-x" viewBox="0 0 100 100">
<path d="M96.8 83.7L63.1 50l33.7-33.7c3.6-3.6 3.6-9.4 0-13.1s-9.5-3.6-13.1 0L50 36.9 16.3 3.2C12.7-.4 6.9-.4 3.2 3.2s-3.6 9.5 0 13.1L36.9 50 3.2 83.7c-3.6 3.6-3.6 9.4 0 13.1s9.5 3.6 13.1 0L50 63.1l33.7 33.7c3.6 3.6 9.4 3.6 13.1 0s3.6-9.5 0-13.1z" />
</svg>
</button>
</div>
</header>
<div class="tabs tab-layout-wrapper settings-tabs-wrapper">
<nav id="settings-tabs" class="no-mobile-nav tab-layout-tabs item-settings-tabs  notranslate" translate="no">
<div class="tab-layout-tab-group">
<a id="settings-html-tab" href="#settings-html" class="settings-tab-html" data-type="html">
HTML
</a>
<a id="settings-css-tab" href="#settings-css" class="settings-tab-css" data-type="css">
CSS
</a>
<a id="settings-js-tab" href="#settings-js" class="settings-tab-js" data-type="js">
JS
</a>
</div>
<div class="tab-layout-tab-group">
<a id="settings-behavior-tab" href="#settings-behavior" class="settings-tab-behavior" data-type="behavior">
Behavior
</a>
<a id="settings-editor-tab" href="#settings-editor" class="settings-tab-editor" data-type="editor">
Editor
</a>
</div>
</nav>
<div class="settings tab-page" id="settings-html">
<h3 aria-label="HTML">HTML</h3>
<div class="settings-row top-label-form normal-labels">
<h4>
<label for="html-preprocessor">
HTML Preprocessor
</label>
</h4>
<div class="help-flyout-link">
<svg class="icon-help" viewBox="0 0 100 100">
<path d="M75,0H25C11.19,0,0,11.193,0,25v50c0,13.802,11.19,25,25,25h50c13.811,0,25-11.198,25-25V25C100,11.193,88.811,0,75,0z
   M57.203,85.067H41.504V72.542h15.699V85.067L57.203,85.067z M73.357,42.041c-0.84,2.066-1.873,3.834-3.102,5.298
  c-1.235,1.474-2.604,2.718-4.101,3.751c-1.498,1.035-2.922,2.066-4.249,3.101c-1.333,1.034-1.553,2.214-2.596,3.547
  c-1.025,1.335-0.977,3.004-0.977,5.006v3.924H41.668v-4.623c0-2.864,1.366-5.265,2.27-7.202c0.896-1.935,2.255-3.581,3.459-4.947
  c1.196-1.367,2.62-2.556,3.955-3.557c1.327-0.993,2.637-1.993,3.776-2.995c1.123-1.001,2.083-2.1,2.783-3.304
  c0.7-1.197,1.043-2.694,0.977-4.5c0-3.06-0.74-5.33-2.245-6.795c-1.498-1.465-3.582-2.206-6.25-2.206c-1.8,0-3.337,0.351-4.639,1.05
  c-1.303,0.7-2.369,1.635-3.199,2.808c-0.837,1.163-1.448,3.593-1.847,5.156c-0.407,1.57-0.602,6.115-0.602,6.115H25.399
  c0.073-8.333,0.684-7.963,1.855-10.965c1.164-2.995,2.8-6.132,4.899-8.33c2.099-2.197,4.63-4.179,7.601-5.417
  c2.962-1.228,6.283-1.977,9.945-1.977c4.736,0,8.683,0.581,11.856,1.876c3.167,1.302,5.713,2.889,7.65,4.817
  c1.929,1.937,3.312,4.004,4.149,6.234c0.831,2.237,1.245,4.313,1.245,6.242C74.601,37.354,74.187,39.975,73.357,42.041z" />
</svg>
<div class="help-flyout help-flyout-reverse">
<h5>About HTML Preprocessors</h5>
<svg class="icon-x" viewBox="0 0 100 100">
<path d="M96.8 83.7L63.1 50l33.7-33.7c3.6-3.6 3.6-9.4 0-13.1s-9.5-3.6-13.1 0L50 36.9 16.3 3.2C12.7-.4 6.9-.4 3.2 3.2s-3.6 9.5 0 13.1L36.9 50 3.2 83.7c-3.6 3.6-3.6 9.4 0 13.1s9.5 3.6 13.1 0L50 63.1l33.7 33.7c3.6 3.6 9.4 3.6 13.1 0s3.6-9.5 0-13.1z" />
</svg>
<p>HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.</p>
<p><a href="https://blog.codepen.io/documentation/editor/using-html-preprocessors/" target="_blank" rel="noopener">Learn more</a> &middot; <a href="/versions/" target="_blank" rel="noopener">Versions</a></p>
</div>
</div>
<div class="custom-select-wrap">
<select name="html-preprocessor" id="html-preprocessor" class="fullwidth">
<option value="none">None</option>
<option value="haml">Haml</option>
<option value="markdown">Markdown</option>
<option value="slim">Slim</option>
<option value="pug">Pug</option>
</select>
<div class="select-icon">
<svg viewBox="-122.9 121.1 105.9 61.9" class="icon-arrow-down-mini">
<path d="M-63.2,180.3l43.5-43.5c1.7-1.7,2.7-4,2.7-6.5s-1-4.8-2.7-6.5c-1.7-1.7-4-2.7-6.5-2.7s-4.8,1-6.5,2.7l-37.2,37.2l-37.2-37.2
        c-1.7-1.7-4-2.7-6.5-2.7s-4.8,1-6.5,2.6c-1.9,1.8-2.8,4.2-2.8,6.6c0,2.3,0.9,4.6,2.6,6.5l0,0c11.4,11.5,41,41.2,43,43.3l0.2,0.2
        C-73.5,183.9-66.8,183.9-63.2,180.3z" />
</svg>
<svg viewBox="-122.9 121.1 105.9 61.9" class="icon-arrow-down-mini">
<path d="M-63.2,180.3l43.5-43.5c1.7-1.7,2.7-4,2.7-6.5s-1-4.8-2.7-6.5c-1.7-1.7-4-2.7-6.5-2.7s-4.8,1-6.5,2.7l-37.2,37.2l-37.2-37.2
        c-1.7-1.7-4-2.7-6.5-2.7s-4.8,1-6.5,2.6c-1.9,1.8-2.8,4.2-2.8,6.6c0,2.3,0.9,4.6,2.6,6.5l0,0c11.4,11.5,41,41.2,43,43.3l0.2,0.2
        C-73.5,183.9-66.8,183.9-63.2,180.3z" />
</svg>
</div>
</div>
</div>
<div class="settings-row top-label-form normal-labels">
<h4>
<label for="html-classes">Add Class(es) to &lt;html></label>
</h4>
<div class="help-flyout-link">
<svg class="icon-help" viewBox="0 0 100 100">
<path d="M75,0H25C11.19,0,0,11.193,0,25v50c0,13.802,11.19,25,25,25h50c13.811,0,25-11.198,25-25V25C100,11.193,88.811,0,75,0z
   M57.203,85.067H41.504V72.542h15.699V85.067L57.203,85.067z M73.357,42.041c-0.84,2.066-1.873,3.834-3.102,5.298
  c-1.235,1.474-2.604,2.718-4.101,3.751c-1.498,1.035-2.922,2.066-4.249,3.101c-1.333,1.034-1.553,2.214-2.596,3.547
  c-1.025,1.335-0.977,3.004-0.977,5.006v3.924H41.668v-4.623c0-2.864,1.366-5.265,2.27-7.202c0.896-1.935,2.255-3.581,3.459-4.947
  c1.196-1.367,2.62-2.556,3.955-3.557c1.327-0.993,2.637-1.993,3.776-2.995c1.123-1.001,2.083-2.1,2.783-3.304
  c0.7-1.197,1.043-2.694,0.977-4.5c0-3.06-0.74-5.33-2.245-6.795c-1.498-1.465-3.582-2.206-6.25-2.206c-1.8,0-3.337,0.351-4.639,1.05
  c-1.303,0.7-2.369,1.635-3.199,2.808c-0.837,1.163-1.448,3.593-1.847,5.156c-0.407,1.57-0.602,6.115-0.602,6.115H25.399
  c0.073-8.333,0.684-7.963,1.855-10.965c1.164-2.995,2.8-6.132,4.899-8.33c2.099-2.197,4.63-4.179,7.601-5.417
  c2.962-1.228,6.283-1.977,9.945-1.977c4.736,0,8.683,0.581,11.856,1.876c3.167,1.302,5.713,2.889,7.65,4.817
  c1.929,1.937,3.312,4.004,4.149,6.234c0.831,2.237,1.245,4.313,1.245,6.242C74.601,37.354,74.187,39.975,73.357,42.041z" />
</svg>
<div class="help-flyout help-flyout-reverse">
<h5>Adding Classes</h5>
<svg class="icon-x" viewBox="0 0 100 100">
<path d="M96.8 83.7L63.1 50l33.7-33.7c3.6-3.6 3.6-9.4 0-13.1s-9.5-3.6-13.1 0L50 36.9 16.3 3.2C12.7-.4 6.9-.4 3.2 3.2s-3.6 9.5 0 13.1L36.9 50 3.2 83.7c-3.6 3.6-3.6 9.4 0 13.1s9.5 3.6 13.1 0L50 63.1l33.7 33.7c3.6 3.6 9.4 3.6 13.1 0s3.6-9.5 0-13.1z" />
</svg>
<p>In CodePen, whatever you write in the HTML editor is what goes within the <code>&lt;body></code> tags in <a target="_blank" rel="noopener" href="https://blog.codepen.io/documentation/features/preview-template/">a basic HTML5 template</a>. So you don't have access to higher-up elements like the <code>&lt;html></code> tag. If you want to add classes there that can affect the whole document, this is the place to do it.</p>
</div>
</div>
<input type="text" id="html-classes" name="html-classes" class="fullwidth" placeholder="e.g. single post post-1234" maxlength="250">
</div>
<div class="settings-row top-label-form normal-labels">
<h4>
<label for="head-content">Stuff for &lt;head></label>
</h4>
<div class="help-flyout-link">
<svg class="icon-help" viewBox="0 0 100 100">
<path d="M75,0H25C11.19,0,0,11.193,0,25v50c0,13.802,11.19,25,25,25h50c13.811,0,25-11.198,25-25V25C100,11.193,88.811,0,75,0z
   M57.203,85.067H41.504V72.542h15.699V85.067L57.203,85.067z M73.357,42.041c-0.84,2.066-1.873,3.834-3.102,5.298
  c-1.235,1.474-2.604,2.718-4.101,3.751c-1.498,1.035-2.922,2.066-4.249,3.101c-1.333,1.034-1.553,2.214-2.596,3.547
  c-1.025,1.335-0.977,3.004-0.977,5.006v3.924H41.668v-4.623c0-2.864,1.366-5.265,2.27-7.202c0.896-1.935,2.255-3.581,3.459-4.947
  c1.196-1.367,2.62-2.556,3.955-3.557c1.327-0.993,2.637-1.993,3.776-2.995c1.123-1.001,2.083-2.1,2.783-3.304
  c0.7-1.197,1.043-2.694,0.977-4.5c0-3.06-0.74-5.33-2.245-6.795c-1.498-1.465-3.582-2.206-6.25-2.206c-1.8,0-3.337,0.351-4.639,1.05
  c-1.303,0.7-2.369,1.635-3.199,2.808c-0.837,1.163-1.448,3.593-1.847,5.156c-0.407,1.57-0.602,6.115-0.602,6.115H25.399
  c0.073-8.333,0.684-7.963,1.855-10.965c1.164-2.995,2.8-6.132,4.899-8.33c2.099-2.197,4.63-4.179,7.601-5.417
  c2.962-1.228,6.283-1.977,9.945-1.977c4.736,0,8.683,0.581,11.856,1.876c3.167,1.302,5.713,2.889,7.65,4.817
  c1.929,1.937,3.312,4.004,4.149,6.234c0.831,2.237,1.245,4.313,1.245,6.242C74.601,37.354,74.187,39.975,73.357,42.041z" />
</svg>
<div class="help-flyout help-flyout-reverse">
<h5>About the &lt;head></h5>
<svg class="icon-x" viewBox="0 0 100 100">
<path d="M96.8 83.7L63.1 50l33.7-33.7c3.6-3.6 3.6-9.4 0-13.1s-9.5-3.6-13.1 0L50 36.9 16.3 3.2C12.7-.4 6.9-.4 3.2 3.2s-3.6 9.5 0 13.1L36.9 50 3.2 83.7c-3.6 3.6-3.6 9.4 0 13.1s9.5 3.6 13.1 0L50 63.1l33.7 33.7c3.6 3.6 9.4 3.6 13.1 0s3.6-9.5 0-13.1z" />
</svg>
<p>In CodePen, whatever you write in the HTML editor is what goes within the <code>&lt;body></code> tags in <a target="_blank" rel="noopener" href="https://blog.codepen.io/documentation/features/preview-template/">a basic HTML5 template</a>. If you need things in the <code>&lt;head></code> of the document, put that code here.</p>
</div>
</div>
<div class="head-content-wrapper">
<textarea id="head-content" name="head-content" class="fullwidth is-code head-content notranslate" translate="no" placeholder="e.g. &lt;meta>, &lt;link>, &lt;script>"></textarea>
<span class="insecure-resource-tooltip resource-problem-tooltip">
<div class="help-flyout-link">
<span class="icon-help">!</span>
<div class="help-flyout help-flyout-reverse">
<svg class="icon-x" viewBox="0 0 100 100">
<path d="M96.8 83.7L63.1 50l33.7-33.7c3.6-3.6 3.6-9.4 0-13.1s-9.5-3.6-13.1 0L50 36.9 16.3 3.2C12.7-.4 6.9-.4 3.2 3.2s-3.6 9.5 0 13.1L36.9 50 3.2 83.7c-3.6 3.6-3.6 9.4 0 13.1s9.5 3.6 13.1 0L50 63.1l33.7 33.7c3.6 3.6 9.4 3.6 13.1 0s3.6-9.5 0-13.1z" />
</svg>
<h5>Insecure Resource</h5>
<p>The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.</p>
</div>
</div>
</span>
</div>
<button class="button mini-button button-medium" id="meta-tag-insert">↑ Insert the most common viewport meta tag</button>
</div>
</div>
<div class="settings tab-page" id="settings-css">
<h3 aria-label="CSS">CSS</h3>
<div class="settings-row top-label-form normal-labels">
<h4>
<label for="css-preprocessor">
CSS Preprocessor
</label>
</h4>
<div class="help-flyout-link">
<svg class="icon-help" viewBox="0 0 100 100">
<path d="M75,0H25C11.19,0,0,11.193,0,25v50c0,13.802,11.19,25,25,25h50c13.811,0,25-11.198,25-25V25C100,11.193,88.811,0,75,0z
   M57.203,85.067H41.504V72.542h15.699V85.067L57.203,85.067z M73.357,42.041c-0.84,2.066-1.873,3.834-3.102,5.298
  c-1.235,1.474-2.604,2.718-4.101,3.751c-1.498,1.035-2.922,2.066-4.249,3.101c-1.333,1.034-1.553,2.214-2.596,3.547
  c-1.025,1.335-0.977,3.004-0.977,5.006v3.924H41.668v-4.623c0-2.864,1.366-5.265,2.27-7.202c0.896-1.935,2.255-3.581,3.459-4.947
  c1.196-1.367,2.62-2.556,3.955-3.557c1.327-0.993,2.637-1.993,3.776-2.995c1.123-1.001,2.083-2.1,2.783-3.304
  c0.7-1.197,1.043-2.694,0.977-4.5c0-3.06-0.74-5.33-2.245-6.795c-1.498-1.465-3.582-2.206-6.25-2.206c-1.8,0-3.337,0.351-4.639,1.05
  c-1.303,0.7-2.369,1.635-3.199,2.808c-0.837,1.163-1.448,3.593-1.847,5.156c-0.407,1.57-0.602,6.115-0.602,6.115H25.399
  c0.073-8.333,0.684-7.963,1.855-10.965c1.164-2.995,2.8-6.132,4.899-8.33c2.099-2.197,4.63-4.179,7.601-5.417
  c2.962-1.228,6.283-1.977,9.945-1.977c4.736,0,8.683,0.581,11.856,1.876c3.167,1.302,5.713,2.889,7.65,4.817
  c1.929,1.937,3.312,4.004,4.149,6.234c0.831,2.237,1.245,4.313,1.245,6.242C74.601,37.354,74.187,39.975,73.357,42.041z" />
</svg>
<div class="help-flyout help-flyout-reverse">
<h5>About CSS Preprocessors</h5>
<svg class="icon-x" viewBox="0 0 100 100">
<path d="M96.8 83.7L63.1 50l33.7-33.7c3.6-3.6 3.6-9.4 0-13.1s-9.5-3.6-13.1 0L50 36.9 16.3 3.2C12.7-.4 6.9-.4 3.2 3.2s-3.6 9.5 0 13.1L36.9 50 3.2 83.7c-3.6 3.6-3.6 9.4 0 13.1s9.5 3.6 13.1 0L50 63.1l33.7 33.7c3.6 3.6 9.4 3.6 13.1 0s3.6-9.5 0-13.1z" />
</svg>
<p>CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.</p>
<p><a href="https://blog.codepen.io/documentation/editor/using-css-preprocessors/" target="_blank">Learn more</a> &middot; <a href="/versions/" target="_blank">Versions</a></p>
</div>
</div>
<div class="custom-select-wrap">
<select name="css-preprocessor" id="css-preprocessor" class="fullwidth css-preprocessor">
<option value="none">None</option>
<option value="less">Less</option>
<option value="scss">SCSS</option>
<option value="sass">Sass</option>
<option value="stylus">Stylus</option>
<option value="postcss">PostCSS</option>
</select>
<div class="select-icon">
<svg viewBox="-122.9 121.1 105.9 61.9" class="icon-arrow-down-mini">
<path d="M-63.2,180.3l43.5-43.5c1.7-1.7,2.7-4,2.7-6.5s-1-4.8-2.7-6.5c-1.7-1.7-4-2.7-6.5-2.7s-4.8,1-6.5,2.7l-37.2,37.2l-37.2-37.2
        c-1.7-1.7-4-2.7-6.5-2.7s-4.8,1-6.5,2.6c-1.9,1.8-2.8,4.2-2.8,6.6c0,2.3,0.9,4.6,2.6,6.5l0,0c11.4,11.5,41,41.2,43,43.3l0.2,0.2
        C-73.5,183.9-66.8,183.9-63.2,180.3z" />
</svg>
<svg viewBox="-122.9 121.1 105.9 61.9" class="icon-arrow-down-mini">
<path d="M-63.2,180.3l43.5-43.5c1.7-1.7,2.7-4,2.7-6.5s-1-4.8-2.7-6.5c-1.7-1.7-4-2.7-6.5-2.7s-4.8,1-6.5,2.7l-37.2,37.2l-37.2-37.2
        c-1.7-1.7-4-2.7-6.5-2.7s-4.8,1-6.5,2.6c-1.9,1.8-2.8,4.2-2.8,6.6c0,2.3,0.9,4.6,2.6,6.5l0,0c11.4,11.5,41,41.2,43,43.3l0.2,0.2
        C-73.5,183.9-66.8,183.9-63.2,180.3z" />
</svg>
</div>
</div>
<div id="need-an-addon" class="align-right hide">
<a id="css-need-an-addon-button" href="#0" class="button button-medium mini-button need-an-addon-button">
Need an add-on?
</a>
</div>
<div class="add-ons add-ons-scss hide" id="add-ons"></div>
</div>
<div id="startercss-options-form" class="settings-row top-label-form">
<h4>
CSS Base
</h4>
<div class="help-flyout-link">
<svg class="icon-help" viewBox="0 0 100 100">
<path d="M75,0H25C11.19,0,0,11.193,0,25v50c0,13.802,11.19,25,25,25h50c13.811,0,25-11.198,25-25V25C100,11.193,88.811,0,75,0z
   M57.203,85.067H41.504V72.542h15.699V85.067L57.203,85.067z M73.357,42.041c-0.84,2.066-1.873,3.834-3.102,5.298
  c-1.235,1.474-2.604,2.718-4.101,3.751c-1.498,1.035-2.922,2.066-4.249,3.101c-1.333,1.034-1.553,2.214-2.596,3.547
  c-1.025,1.335-0.977,3.004-0.977,5.006v3.924H41.668v-4.623c0-2.864,1.366-5.265,2.27-7.202c0.896-1.935,2.255-3.581,3.459-4.947
  c1.196-1.367,2.62-2.556,3.955-3.557c1.327-0.993,2.637-1.993,3.776-2.995c1.123-1.001,2.083-2.1,2.783-3.304
  c0.7-1.197,1.043-2.694,0.977-4.5c0-3.06-0.74-5.33-2.245-6.795c-1.498-1.465-3.582-2.206-6.25-2.206c-1.8,0-3.337,0.351-4.639,1.05
  c-1.303,0.7-2.369,1.635-3.199,2.808c-0.837,1.163-1.448,3.593-1.847,5.156c-0.407,1.57-0.602,6.115-0.602,6.115H25.399
  c0.073-8.333,0.684-7.963,1.855-10.965c1.164-2.995,2.8-6.132,4.899-8.33c2.099-2.197,4.63-4.179,7.601-5.417
  c2.962-1.228,6.283-1.977,9.945-1.977c4.736,0,8.683,0.581,11.856,1.876c3.167,1.302,5.713,2.889,7.65,4.817
  c1.929,1.937,3.312,4.004,4.149,6.234c0.831,2.237,1.245,4.313,1.245,6.242C74.601,37.354,74.187,39.975,73.357,42.041z" />
</svg>
<div class="help-flyout help-flyout-reverse">
<h5>About CSS Base</h5>
<svg class="icon-x" viewBox="0 0 100 100">
<path d="M96.8 83.7L63.1 50l33.7-33.7c3.6-3.6 3.6-9.4 0-13.1s-9.5-3.6-13.1 0L50 36.9 16.3 3.2C12.7-.4 6.9-.4 3.2 3.2s-3.6 9.5 0 13.1L36.9 50 3.2 83.7c-3.6 3.6-3.6 9.4 0 13.1s9.5 3.6 13.1 0L50 63.1l33.7 33.7c3.6 3.6 9.4 3.6 13.1 0s3.6-9.5 0-13.1z" />
</svg>
<p>It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: <a href="http://necolas.github.io/normalize.css/" target="_blank" rel="noopener">normalize.css</a> and a <a href="http://meyerweb.com/eric/tools/css/reset/" target="_blank" rel="noopener">reset</a>. Or, choose <b>Neither</b> and nothing will be applied.</p>
</div>
</div>
<ul class="radio-list">
<li>
<input type="radio" id="startercss-normalize" name="startercss" checked value="normalize">
<label for="startercss-normalize" class="small-inline">Normalize</label>
</li>
<li>
<input type="radio" id="startercss-reset" name="startercss" checked value="reset">
<label for="startercss-reset" class="small-inline">Reset</label>
</li>
<li>
<input type="radio" id="startercss-neither" name="startercss" checked value="neither">
<label for="startercss-neither" class="small-inline">Neither</label>
</li>
</ul>
</div>
<div id="prefix-options-form" class="settings-row top-label-form">
<h4>
Vendor Prefixing
</h4>
<div class="help-flyout-link">
<svg class="icon-help" viewBox="0 0 100 100">
<path d="M75,0H25C11.19,0,0,11.193,0,25v50c0,13.802,11.19,25,25,25h50c13.811,0,25-11.198,25-25V25C100,11.193,88.811,0,75,0z
   M57.203,85.067H41.504V72.542h15.699V85.067L57.203,85.067z M73.357,42.041c-0.84,2.066-1.873,3.834-3.102,5.298
  c-1.235,1.474-2.604,2.718-4.101,3.751c-1.498,1.035-2.922,2.066-4.249,3.101c-1.333,1.034-1.553,2.214-2.596,3.547
  c-1.025,1.335-0.977,3.004-0.977,5.006v3.924H41.668v-4.623c0-2.864,1.366-5.265,2.27-7.202c0.896-1.935,2.255-3.581,3.459-4.947
  c1.196-1.367,2.62-2.556,3.955-3.557c1.327-0.993,2.637-1.993,3.776-2.995c1.123-1.001,2.083-2.1,2.783-3.304
  c0.7-1.197,1.043-2.694,0.977-4.5c0-3.06-0.74-5.33-2.245-6.795c-1.498-1.465-3.582-2.206-6.25-2.206c-1.8,0-3.337,0.351-4.639,1.05
  c-1.303,0.7-2.369,1.635-3.199,2.808c-0.837,1.163-1.448,3.593-1.847,5.156c-0.407,1.57-0.602,6.115-0.602,6.115H25.399
  c0.073-8.333,0.684-7.963,1.855-10.965c1.164-2.995,2.8-6.132,4.899-8.33c2.099-2.197,4.63-4.179,7.601-5.417
  c2.962-1.228,6.283-1.977,9.945-1.977c4.736,0,8.683,0.581,11.856,1.876c3.167,1.302,5.713,2.889,7.65,4.817
  c1.929,1.937,3.312,4.004,4.149,6.234c0.831,2.237,1.245,4.313,1.245,6.242C74.601,37.354,74.187,39.975,73.357,42.041z" />
</svg>
<div class="help-flyout help-flyout-reverse">
<h5>About Vendor Prefixing</h5>
<svg class="icon-x" viewBox="0 0 100 100">
<path d="M96.8 83.7L63.1 50l33.7-33.7c3.6-3.6 3.6-9.4 0-13.1s-9.5-3.6-13.1 0L50 36.9 16.3 3.2C12.7-.4 6.9-.4 3.2 3.2s-3.6 9.5 0 13.1L36.9 50 3.2 83.7c-3.6 3.6-3.6 9.4 0 13.1s9.5 3.6 13.1 0L50 63.1l33.7 33.7c3.6 3.6 9.4 3.6 13.1 0s3.6-9.5 0-13.1z" />
</svg>
<p>To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance <code>-webkit-</code> or <code>-moz-</code>.</p>
<p>We offer two popular choices: <a href="https://github.com/postcss/autoprefixer" target="blank" rel="noopener">Autoprefixer</a> (which processes your CSS server-side) and <a href="http://leaverou.github.io/prefixfree/" target="_blank" rel="noopener">-prefix-free</a> (which applies prefixes via a script, client-side).</p>
</div>
</div>
<ul class="radio-list">
<li>
<input type="radio" id="prefix-autoprefixer" name="prefix" value="autoprefixer">
<label for="prefix-autoprefixer" class="small-inline">Autoprefixer</label>
</li>
<li>
<input type="radio" id="prefix-prefixfree" name="prefix" value="prefixfree">
<label for="prefix-prefixfree" class="small-inline">Prefixfree</label>
</li>
<li>
<input type="radio" id="prefix-neither" name="prefix" value="neither">
<label for="prefix-neither" class="small-inline">Neither</label>
</li>
</ul>
</div>
<div id="external-css-resources" class="settings-row">
<h4>
Add External Stylesheets/Pens
</h4>
<p>Any URLs added here will be added as <code>&lt;link></code>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper <a href="https://blog.codepen.io/documentation/url-extensions/">URL extension</a>.</p>
<div class="resource-search-bar">
<svg class="icon icon-mag" viewBox="0 0 56.7 56.7">
<path d="M42.8,7.3C33-2.4,17.1-2.4,7.3,7.3c-9.8,9.8-9.8,25.7,0,35.5c8.7,8.7,22.2,9.7,32,2.9l9.6,9.6c1.8,1.8,4.7,1.8,6.4,0
	c1.8-1.8,1.8-4.7,0-6.4l-9.6-9.6C52.5,29.5,51.5,16,42.8,7.3z M36.6,36.6c-6.4,6.4-16.7,6.4-23.1,0s-6.4-16.7,0-23.1
	c6.4-6.4,16.7-6.4,23.1,0C43,19.9,43,30.3,36.6,36.6z" />
</svg>
<input id="external-css-search" type="text" value placeholder="Search for resources (Bootstrap, Foundation, Animate.css...)">
</div>
<div class="algolia-shoutout">
<a href="https://www.algolia.com/?utm_source=react-instantsearch&utm_medium=website&utm_content=codepen.io&utm_campaign=poweredby" target="_blank">
Powered by <img alt="Algolia" src="https://cpwebassets.codepen.io/assets/settings/algolia-9e1c0c887f4db420704b2a79926864019ef156bcecc9d5774a7e4eaa731fc5b5.svg" />
</a>
</div>
<div class="help-flyout-link">
<svg class="icon-help" viewBox="0 0 100 100">
<path d="M75,0H25C11.19,0,0,11.193,0,25v50c0,13.802,11.19,25,25,25h50c13.811,0,25-11.198,25-25V25C100,11.193,88.811,0,75,0z
   M57.203,85.067H41.504V72.542h15.699V85.067L57.203,85.067z M73.357,42.041c-0.84,2.066-1.873,3.834-3.102,5.298
  c-1.235,1.474-2.604,2.718-4.101,3.751c-1.498,1.035-2.922,2.066-4.249,3.101c-1.333,1.034-1.553,2.214-2.596,3.547
  c-1.025,1.335-0.977,3.004-0.977,5.006v3.924H41.668v-4.623c0-2.864,1.366-5.265,2.27-7.202c0.896-1.935,2.255-3.581,3.459-4.947
  c1.196-1.367,2.62-2.556,3.955-3.557c1.327-0.993,2.637-1.993,3.776-2.995c1.123-1.001,2.083-2.1,2.783-3.304
  c0.7-1.197,1.043-2.694,0.977-4.5c0-3.06-0.74-5.33-2.245-6.795c-1.498-1.465-3.582-2.206-6.25-2.206c-1.8,0-3.337,0.351-4.639,1.05
  c-1.303,0.7-2.369,1.635-3.199,2.808c-0.837,1.163-1.448,3.593-1.847,5.156c-0.407,1.57-0.602,6.115-0.602,6.115H25.399
  c0.073-8.333,0.684-7.963,1.855-10.965c1.164-2.995,2.8-6.132,4.899-8.33c2.099-2.197,4.63-4.179,7.601-5.417
  c2.962-1.228,6.283-1.977,9.945-1.977c4.736,0,8.683,0.581,11.856,1.876c3.167,1.302,5.713,2.889,7.65,4.817
  c1.929,1.937,3.312,4.004,4.149,6.234c0.831,2.237,1.245,4.313,1.245,6.242C74.601,37.354,74.187,39.975,73.357,42.041z" />
</svg>
<div class="help-flyout help-flyout-reverse">
<h5>About External Resources</h5>
<svg class="icon-x" viewBox="0 0 100 100">
<path d="M96.8 83.7L63.1 50l33.7-33.7c3.6-3.6 3.6-9.4 0-13.1s-9.5-3.6-13.1 0L50 36.9 16.3 3.2C12.7-.4 6.9-.4 3.2 3.2s-3.6 9.5 0 13.1L36.9 50 3.2 83.7c-3.6 3.6-3.6 9.4 0 13.1s9.5 3.6 13.1 0L50 63.1l33.7 33.7c3.6 3.6 9.4 3.6 13.1 0s3.6-9.5 0-13.1z" />
</svg>
<p>You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.</p>
<p>You can also link to another Pen here (use the <code>.css</code> <a href="https://blog.codepen.io/documentation/url-extensions/">URL Extension</a>) and we'll pull the CSS from that Pen and include it. If it's using a <em>matching</em> preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.</p>
<p><a href="https://blog.codepen.io/documentation/editor/adding-external-resources/" target="_blank" rel="noopener">Learn more</a></p>
</div>
</div>
<div id="css-external-resources" class="external-resource-wrapper">
</div>
<script id="css-external-resources-template" nonce="vbYhXKcRIJs=" type="text/template">
  <div data-view-id="<%= view_id %>" class="external-resource-url-row <%= insecure_resource %>">

    <span class="move-external-url">
      <svg viewBox="0 0 17 20" class="icon-drag-handle" width="20" height="17">
        <path d="m1.5 3a1.5 1.5 0 0 1 0-3h17a1.5 1.5 0 0 1 0 3zm0 7a1.5 1.5 0 0 1 0-3h17a1.5 1.5 0 0 1 0 3zm0 7a1.5 1.5 0 0 1 0-3h17a1.5 1.5 0 0 1 0 3z"/>
      </svg>
    </span>

    <input
      id="external-resource-input-<%= view_id %>"
      class="fullwidth css-resource external-resource"
      type="text"
      pattern="^((ftp|http|https):)?\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$"
      name="external-css"
      placeholder="<%= placeholder %>"
      value="<%= url %>"
      data-view-id="<%= view_id %>">

    <span class="insecure-resource-tooltip resource-problem-tooltip">
      <div class="help-flyout-link">
        <span class="icon-help">?</span>
        <div class="help-flyout help-flyout-reverse">
          <svg class="icon-x" viewBox="0 0 100 100">
            <path d="M96.8 83.7L63.1 50l33.7-33.7c3.6-3.6 3.6-9.4 0-13.1s-9.5-3.6-13.1 0L50 36.9 16.3 3.2C12.7-.4 6.9-.4 3.2 3.2s-3.6 9.5 0 13.1L36.9 50 3.2 83.7c-3.6 3.6-3.6 9.4 0 13.1s9.5 3.6 13.1 0L50 63.1l33.7 33.7c3.6 3.6 9.4 3.6 13.1 0s3.6-9.5 0-13.1z"/>
          </svg>
          <h5>Insecure Resource</h5>
          <p>You are linking to a resource using the non-secure http:// protocol, which may not work when the browser is using https:// like CodePen enforces.</p>
        </div>
      </div>
    </span>

    <span class="not-using-url-extension-tooltip resource-problem-tooltip">
      <div class="help-flyout-link">
        <span class="icon-help">?</span>
        <div class="help-flyout help-flyout-reverse">
          <svg class="icon-x" viewBox="0 0 100 100">
            <path d="M96.8 83.7L63.1 50l33.7-33.7c3.6-3.6 3.6-9.4 0-13.1s-9.5-3.6-13.1 0L50 36.9 16.3 3.2C12.7-.4 6.9-.4 3.2 3.2s-3.6 9.5 0 13.1L36.9 50 3.2 83.7c-3.6 3.6-3.6 9.4 0 13.1s9.5 3.6 13.1 0L50 63.1l33.7 33.7c3.6 3.6 9.4 3.6 13.1 0s3.6-9.5 0-13.1z"/>
          </svg>
          <h5>URL Extension Required</h5>
          <p>When linking another Pen as a resource, make sure you use a <a href="https://blog.codepen.io/documentation/url-extensions/">URL Extension</a> of the type of code you want to link to. Either <code>.css</code>, <code>.js</code>, or the extension of a matching code processor.</p>
        </div>
      </div>
    </span>

    <div class="resource-actions">
      <span class="remove-external-url external-url-option" data-view-id="<%= view_id %>">
        <svg class="icon-x" viewBox="0 0 100 100" width="12" height="12">
          <path d="M96.8 83.7L63.1 50l33.7-33.7c3.6-3.6 3.6-9.4 0-13.1s-9.5-3.6-13.1 0L50 36.9 16.3 3.2C12.7-.4 6.9-.4 3.2 3.2s-3.6 9.5 0 13.1L36.9 50 3.2 83.7c-3.6 3.6-3.6 9.4 0 13.1s9.5 3.6 13.1 0L50 63.1l33.7 33.7c3.6 3.6 9.4 3.6 13.1 0s3.6-9.5 0-13.1z"/>
        </svg>
      </span>

      <a id="external-resource-input-view-link-<%= view_id %>" class="open-external-url external-url-option" target="_blank" rel="noopener" data-view-id="<%= view_id %>" href="<%= url %>">
        <svg viewBox="0 0 30.5 16.5" id="icon-eye" width="14" height="14">
          <path d="M15.3,0C8.9,0,3.3,3.3,0,8.3c3.3,5,8.9,8.3,15.3,8.3c6.4,0,12-3.3,15.3-8.3C27.3,3.3,21.7,0,15.3,0z M15.3,14.5 c-3.4,0-6.2-2.8-6.2-6.2C9,4.8,11.8,2,15.3,2c3.4,0,6.2,2.8,6.2,6.2C21.5,11.7,18.7,14.5,15.3,14.5z"/>
        </svg>
      </a>
    </div>

  </div>
</script>
<div class="external-resource-actions group">
<span id="add-css-resource" class="button mini-button button-medium add-resource" data-type="css">
<span data-type="css">+ add another resource</span>
</span>
</div>
</div>
</div>
<div class="settings tab-page" id="settings-js">
<div class="item-settings-javascript normal-labels">
<h3>
JavaScript
</h3>
<div class="item-settings-javascript-preprocessor settings-row">
<h4>
<label for="js-preprocessor">
JavaScript Preprocessor
</label>
</h4>
<div class="help-flyout-link">
<svg class="icon-help" viewBox="0 0 100 100" width="14" height="14">
<path d="M75,0H25C11.19,0,0,11.193,0,25v50c0,13.802,11.19,25,25,25h50c13.811,0,25-11.198,25-25V25C100,11.193,88.811,0,75,0z
   M57.203,85.067H41.504V72.542h15.699V85.067L57.203,85.067z M73.357,42.041c-0.84,2.066-1.873,3.834-3.102,5.298
  c-1.235,1.474-2.604,2.718-4.101,3.751c-1.498,1.035-2.922,2.066-4.249,3.101c-1.333,1.034-1.553,2.214-2.596,3.547
  c-1.025,1.335-0.977,3.004-0.977,5.006v3.924H41.668v-4.623c0-2.864,1.366-5.265,2.27-7.202c0.896-1.935,2.255-3.581,3.459-4.947
  c1.196-1.367,2.62-2.556,3.955-3.557c1.327-0.993,2.637-1.993,3.776-2.995c1.123-1.001,2.083-2.1,2.783-3.304
  c0.7-1.197,1.043-2.694,0.977-4.5c0-3.06-0.74-5.33-2.245-6.795c-1.498-1.465-3.582-2.206-6.25-2.206c-1.8,0-3.337,0.351-4.639,1.05
  c-1.303,0.7-2.369,1.635-3.199,2.808c-0.837,1.163-1.448,3.593-1.847,5.156c-0.407,1.57-0.602,6.115-0.602,6.115H25.399
  c0.073-8.333,0.684-7.963,1.855-10.965c1.164-2.995,2.8-6.132,4.899-8.33c2.099-2.197,4.63-4.179,7.601-5.417
  c2.962-1.228,6.283-1.977,9.945-1.977c4.736,0,8.683,0.581,11.856,1.876c3.167,1.302,5.713,2.889,7.65,4.817
  c1.929,1.937,3.312,4.004,4.149,6.234c0.831,2.237,1.245,4.313,1.245,6.242C74.601,37.354,74.187,39.975,73.357,42.041z" />
</svg>
<div class="help-flyout help-flyout-reverse">
<h5>About JavaScript Preprocessors</h5>
<svg class="icon-x" viewBox="0 0 100 100" width="12" height="12">
<path d="M96.8 83.7L63.1 50l33.7-33.7c3.6-3.6 3.6-9.4 0-13.1s-9.5-3.6-13.1 0L50 36.9 16.3 3.2C12.7-.4 6.9-.4 3.2 3.2s-3.6 9.5 0 13.1L36.9 50 3.2 83.7c-3.6 3.6-3.6 9.4 0 13.1s9.5 3.6 13.1 0L50 63.1l33.7 33.7c3.6 3.6 9.4 3.6 13.1 0s3.6-9.5 0-13.1z" />
</svg>
<p>JavaScript preprocessors can help make authoring JavaScript easier and more convenient.</p>
<p><a href="https://blog.codepen.io/documentation/editor/using-js-preprocessors/" target="_blank" rel="noopener">Learn more</a> &middot; <a href="/versions/" target="_blank">Versions</a></p>
</div>
</div>
<div class="custom-select-wrap">
<select name="js-preprocessor" id="js-preprocessor" class="fullwidth">
<option value="none">None</option>
<option value="babel">Babel</option>
<option value="typescript">TypeScript</option>
<option value="coffeescript">CoffeeScript</option>
<option value="livescript">LiveScript</option>
</select>
<div class="select-icon">
<svg viewBox="-122.9 121.1 105.9 61.9" class="icon-arrow-down-mini">
<path d="M-63.2,180.3l43.5-43.5c1.7-1.7,2.7-4,2.7-6.5s-1-4.8-2.7-6.5c-1.7-1.7-4-2.7-6.5-2.7s-4.8,1-6.5,2.7l-37.2,37.2l-37.2-37.2
        c-1.7-1.7-4-2.7-6.5-2.7s-4.8,1-6.5,2.6c-1.9,1.8-2.8,4.2-2.8,6.6c0,2.3,0.9,4.6,2.6,6.5l0,0c11.4,11.5,41,41.2,43,43.3l0.2,0.2
        C-73.5,183.9-66.8,183.9-63.2,180.3z" />
</svg>
<svg viewBox="-122.9 121.1 105.9 61.9" class="icon-arrow-down-mini">
<path d="M-63.2,180.3l43.5-43.5c1.7-1.7,2.7-4,2.7-6.5s-1-4.8-2.7-6.5c-1.7-1.7-4-2.7-6.5-2.7s-4.8,1-6.5,2.7l-37.2,37.2l-37.2-37.2
        c-1.7-1.7-4-2.7-6.5-2.7s-4.8,1-6.5,2.6c-1.9,1.8-2.8,4.2-2.8,6.6c0,2.3,0.9,4.6,2.6,6.5l0,0c11.4,11.5,41,41.2,43,43.3l0.2,0.2
        C-73.5,183.9-66.8,183.9-63.2,180.3z" />
</svg>
</div>
</div>
<p><small>Babel includes JSX processing.</small></p>
</div>
<div id="external-js-resources" class="item-settings-javascript-external settings-row external-js-resources top-label-form">
<h4>
Add External Scripts/Pens
</h4>
<p>Any URL's added here will be added as <code>&lt;script></code>s in order, and run <em>before</em> the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.</p>
<div class="resource-search-bar">
<svg viewBox="0 0 56.7 56.7" class="icon icon-mag" width="18" height="18">
<path d="M42.8,7.3C33-2.4,17.1-2.4,7.3,7.3c-9.8,9.8-9.8,25.7,0,35.5c8.7,8.7,22.2,9.7,32,2.9l9.6,9.6c1.8,1.8,4.7,1.8,6.4,0
	c1.8-1.8,1.8-4.7,0-6.4l-9.6-9.6C52.5,29.5,51.5,16,42.8,7.3z M36.6,36.6c-6.4,6.4-16.7,6.4-23.1,0s-6.4-16.7,0-23.1
	c6.4-6.4,16.7-6.4,23.1,0C43,19.9,43,30.3,36.6,36.6z" />
</svg>
<input id="external-js-search" type="text" value placeholder="Search CDNjs (jQuery, Lodash, React, Angular, Vue.js, Ember...)">
</div>
<div class="algolia-shoutout">
<a href="https://www.algolia.com/?utm_source=react-instantsearch&utm_medium=website&utm_content=codepen.io&utm_campaign=poweredby" target="_blank">
Powered by <img alt="Algolia" src="https://cpwebassets.codepen.io/assets/settings/algolia-9e1c0c887f4db420704b2a79926864019ef156bcecc9d5774a7e4eaa731fc5b5.svg" />
</a>
</div>
<div class="help-flyout-link">
<svg class="icon-help" viewBox="0 0 100 100" width="14" height="14">
<path d="M75,0H25C11.19,0,0,11.193,0,25v50c0,13.802,11.19,25,25,25h50c13.811,0,25-11.198,25-25V25C100,11.193,88.811,0,75,0z
   M57.203,85.067H41.504V72.542h15.699V85.067L57.203,85.067z M73.357,42.041c-0.84,2.066-1.873,3.834-3.102,5.298
  c-1.235,1.474-2.604,2.718-4.101,3.751c-1.498,1.035-2.922,2.066-4.249,3.101c-1.333,1.034-1.553,2.214-2.596,3.547
  c-1.025,1.335-0.977,3.004-0.977,5.006v3.924H41.668v-4.623c0-2.864,1.366-5.265,2.27-7.202c0.896-1.935,2.255-3.581,3.459-4.947
  c1.196-1.367,2.62-2.556,3.955-3.557c1.327-0.993,2.637-1.993,3.776-2.995c1.123-1.001,2.083-2.1,2.783-3.304
  c0.7-1.197,1.043-2.694,0.977-4.5c0-3.06-0.74-5.33-2.245-6.795c-1.498-1.465-3.582-2.206-6.25-2.206c-1.8,0-3.337,0.351-4.639,1.05
  c-1.303,0.7-2.369,1.635-3.199,2.808c-0.837,1.163-1.448,3.593-1.847,5.156c-0.407,1.57-0.602,6.115-0.602,6.115H25.399
  c0.073-8.333,0.684-7.963,1.855-10.965c1.164-2.995,2.8-6.132,4.899-8.33c2.099-2.197,4.63-4.179,7.601-5.417
  c2.962-1.228,6.283-1.977,9.945-1.977c4.736,0,8.683,0.581,11.856,1.876c3.167,1.302,5.713,2.889,7.65,4.817
  c1.929,1.937,3.312,4.004,4.149,6.234c0.831,2.237,1.245,4.313,1.245,6.242C74.601,37.354,74.187,39.975,73.357,42.041z" />
</svg>
<div class="help-flyout help-flyout-reverse">
<h5>About External Resources</h5>
<svg class="icon-x" viewBox="0 0 100 100" height="12" width="12">
<path d="M96.8 83.7L63.1 50l33.7-33.7c3.6-3.6 3.6-9.4 0-13.1s-9.5-3.6-13.1 0L50 36.9 16.3 3.2C12.7-.4 6.9-.4 3.2 3.2s-3.6 9.5 0 13.1L36.9 50 3.2 83.7c-3.6 3.6-3.6 9.4 0 13.1s9.5 3.6 13.1 0L50 63.1l33.7 33.7c3.6 3.6 9.4 3.6 13.1 0s3.6-9.5 0-13.1z" />
</svg>
<p>You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.</p>
<p>If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.</p>
<p>You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.</p>
<p><a href="https://blog.codepen.io/documentation/adding-external-resources/" rel="noopener" target="_blank">Learn more</a></p>
</div>
</div>
<div id="js-external-resources" class="external-resource-wrapper">
</div>
<script id="js-external-resources-template" nonce="vbYhXKcRIJs=" type="text/template">
  <div data-view-id="<%= view_id %>" class="external-resource-url-row <%= insecure_resource %>">

    <span class="move-external-url">
      <svg viewBox="0 0 17 20" class="icon-drag-handle" width="20" height="17">
        <path d="m1.5 3a1.5 1.5 0 0 1 0-3h17a1.5 1.5 0 0 1 0 3zm0 7a1.5 1.5 0 0 1 0-3h17a1.5 1.5 0 0 1 0 3zm0 7a1.5 1.5 0 0 1 0-3h17a1.5 1.5 0 0 1 0 3z"/>
      </svg>
    </span>

    <input
      id="external-resource-input-<%= view_id %>"
      class="fullwidth js-resource external-resource"
      type="text"
      pattern="^((ftp|http|https):)?\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$"
      name="external-js"
      placeholder="<%= placeholder %>"
      value="<%= url %>"
      data-view-id="<%= view_id %>">

    <span class="insecure-resource-tooltip resource-problem-tooltip">
      <div class="help-flyout-link">
        <span class="icon-help">?</span>
        <div class="help-flyout help-flyout-reverse">
          <svg class="icon-x" viewBox="0 0 100 100">
            <path d="M96.8 83.7L63.1 50l33.7-33.7c3.6-3.6 3.6-9.4 0-13.1s-9.5-3.6-13.1 0L50 36.9 16.3 3.2C12.7-.4 6.9-.4 3.2 3.2s-3.6 9.5 0 13.1L36.9 50 3.2 83.7c-3.6 3.6-3.6 9.4 0 13.1s9.5 3.6 13.1 0L50 63.1l33.7 33.7c3.6 3.6 9.4 3.6 13.1 0s3.6-9.5 0-13.1z"/>
          </svg>
          <h5>Insecure Resource</h5>
          <p>You are linking to a resource using the non-secure http:// protocol, which may not work when the browser is using https:// like CodePen enforces.</p>
        </div>
      </div>
    </span>

    <span class="not-using-url-extension-tooltip resource-problem-tooltip">
      <div class="help-flyout-link">
        <span class="icon-help">?</span>
        <div class="help-flyout help-flyout-reverse">
          <svg class="icon-x" viewBox="0 0 100 100">
            <path d="M96.8 83.7L63.1 50l33.7-33.7c3.6-3.6 3.6-9.4 0-13.1s-9.5-3.6-13.1 0L50 36.9 16.3 3.2C12.7-.4 6.9-.4 3.2 3.2s-3.6 9.5 0 13.1L36.9 50 3.2 83.7c-3.6 3.6-3.6 9.4 0 13.1s9.5 3.6 13.1 0L50 63.1l33.7 33.7c3.6 3.6 9.4 3.6 13.1 0s3.6-9.5 0-13.1z"/>
          </svg>
          <h5>URL Extension Required</h5>
          <p>When linking another Pen as a resource, make sure you use a <a href="https://blog.codepen.io/documentation/url-extensions/">URL Extension</a> of the type of code you want to link to. Either <code>.css</code>, <code>.js</code>, or the extension of a matching code processor.</p>
        </div>
      </div>
    </span>

    <div class="resource-actions">
      <span class="remove-external-url external-url-option" data-view-id="<%= view_id %>">
        <svg class="icon-x" viewBox="0 0 100 100" width="12" height="12">
          <path d="M96.8 83.7L63.1 50l33.7-33.7c3.6-3.6 3.6-9.4 0-13.1s-9.5-3.6-13.1 0L50 36.9 16.3 3.2C12.7-.4 6.9-.4 3.2 3.2s-3.6 9.5 0 13.1L36.9 50 3.2 83.7c-3.6 3.6-3.6 9.4 0 13.1s9.5 3.6 13.1 0L50 63.1l33.7 33.7c3.6 3.6 9.4 3.6 13.1 0s3.6-9.5 0-13.1z"/>
        </svg>
      </span>

      <a id="external-resource-input-view-link-<%= view_id %>" class="open-external-url external-url-option" target="_blank" rel="noopener" data-view-id="<%= view_id %>" href="<%= url %>">
        <svg viewBox="0 0 30.5 16.5" id="icon-eye" width="14" height="14">
          <path d="M15.3,0C8.9,0,3.3,3.3,0,8.3c3.3,5,8.9,8.3,15.3,8.3c6.4,0,12-3.3,15.3-8.3C27.3,3.3,21.7,0,15.3,0z M15.3,14.5 c-3.4,0-6.2-2.8-6.2-6.2C9,4.8,11.8,2,15.3,2c3.4,0,6.2,2.8,6.2,6.2C21.5,11.7,18.7,14.5,15.3,14.5z"/>
        </svg>
      </a>
    </div>

  </div>
</script>
<div class="external-resource-actions group">
<span id="add-js-resource" class="button button-medium mini-button add-resource" data-type="js">
<span data-type="js">+ add another resource</span>
</span>
</div>
</div>
<h3 aria-label="Packages">Packages</h3>
<div class="item-settings-packages settings-row" id="item-settings-packages">
<h4>Add Packages</h4>
<p>Search for and use JavaScript packages from <a href="https://www.npmjs.com/" target="blank" rel="noopener">npm</a> here. By selecting a package, an <code>import</code> statement will be added to the top of the JavaScript editor for this package.</p>
<div class="resource-search-bar">
<svg viewBox="0 0 56.7 56.7" class="icon icon-mag" width="18" height="18">
<path d="M42.8,7.3C33-2.4,17.1-2.4,7.3,7.3c-9.8,9.8-9.8,25.7,0,35.5c8.7,8.7,22.2,9.7,32,2.9l9.6,9.6c1.8,1.8,4.7,1.8,6.4,0
c1.8-1.8,1.8-4.7,0-6.4l-9.6-9.6C52.5,29.5,51.5,16,42.8,7.3z M36.6,36.6c-6.4,6.4-16.7,6.4-23.1,0s-6.4-16.7,0-23.1
c6.4-6.4,16.7-6.4,23.1,0C43,19.9,43,30.3,36.6,36.6z" />
</svg>
<input id="packages-search" type="text" value placeholder="Search npm and add a package...">
</div>
<div class="algolia-shoutout">
<a href="https://www.algolia.com/?utm_source=react-instantsearch&utm_medium=website&utm_content=codepen.io&utm_campaign=poweredby" target="_blank">
Powered by <img alt="Algolia" src="https://cpwebassets.codepen.io/assets/settings/algolia-9e1c0c887f4db420704b2a79926864019ef156bcecc9d5774a7e4eaa731fc5b5.svg" />
</a>
</div>
<div class="help-flyout-link">
<svg class="icon-help" viewBox="0 0 100 100" width="14" height="14">
<path d="M75,0H25C11.19,0,0,11.193,0,25v50c0,13.802,11.19,25,25,25h50c13.811,0,25-11.198,25-25V25C100,11.193,88.811,0,75,0z
   M57.203,85.067H41.504V72.542h15.699V85.067L57.203,85.067z M73.357,42.041c-0.84,2.066-1.873,3.834-3.102,5.298
  c-1.235,1.474-2.604,2.718-4.101,3.751c-1.498,1.035-2.922,2.066-4.249,3.101c-1.333,1.034-1.553,2.214-2.596,3.547
  c-1.025,1.335-0.977,3.004-0.977,5.006v3.924H41.668v-4.623c0-2.864,1.366-5.265,2.27-7.202c0.896-1.935,2.255-3.581,3.459-4.947
  c1.196-1.367,2.62-2.556,3.955-3.557c1.327-0.993,2.637-1.993,3.776-2.995c1.123-1.001,2.083-2.1,2.783-3.304
  c0.7-1.197,1.043-2.694,0.977-4.5c0-3.06-0.74-5.33-2.245-6.795c-1.498-1.465-3.582-2.206-6.25-2.206c-1.8,0-3.337,0.351-4.639,1.05
  c-1.303,0.7-2.369,1.635-3.199,2.808c-0.837,1.163-1.448,3.593-1.847,5.156c-0.407,1.57-0.602,6.115-0.602,6.115H25.399
  c0.073-8.333,0.684-7.963,1.855-10.965c1.164-2.995,2.8-6.132,4.899-8.33c2.099-2.197,4.63-4.179,7.601-5.417
  c2.962-1.228,6.283-1.977,9.945-1.977c4.736,0,8.683,0.581,11.856,1.876c3.167,1.302,5.713,2.889,7.65,4.817
  c1.929,1.937,3.312,4.004,4.149,6.234c0.831,2.237,1.245,4.313,1.245,6.242C74.601,37.354,74.187,39.975,73.357,42.041z" />
</svg>
<div class="help-flyout help-flyout-reverse">
<h5>About Packages</h5>
<svg class="icon-x" viewBox="0 0 100 100" width="12" height="12">
<path d="M96.8 83.7L63.1 50l33.7-33.7c3.6-3.6 3.6-9.4 0-13.1s-9.5-3.6-13.1 0L50 36.9 16.3 3.2C12.7-.4 6.9-.4 3.2 3.2s-3.6 9.5 0 13.1L36.9 50 3.2 83.7c-3.6 3.6-3.6 9.4 0 13.1s9.5 3.6 13.1 0L50 63.1l33.7 33.7c3.6 3.6 9.4 3.6 13.1 0s3.6-9.5 0-13.1z" />
</svg>
<p>Using packages here is powered by <a href="https://esm.sh/">esm.sh</a>, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.</p>
<p>All packages are different, so refer to their docs for how they work.</p>
<p>If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.</p>
</div>
</div>
</div>
</div>
</div>
<div class="settings tab-page" id="settings-behavior">
<h3 aria-label="Pen Behavior">Behavior</h3>
<div class="settings-row">
<h4>Auto Save</h4>
<div>
<p class="hint">If active, Pens will autosave every 30 seconds after being saved once.</p>
<div class="ios-toggle-mega-label-wrap">
<span class="ios-toggle ios-toggle-reverse">
<input type="checkbox" id="auto-save" name="auto-save" checked>
<label for="auto-save"></label>
<label for="auto-save" class="ios-toggle-mega-label"></label>
</span>
</div>
</div>
</div>
<div class="settings-row">
<h4>Auto-Updating Preview</h4>
<p class="hint">If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.</p>
<div class="ios-toggle-mega-label-wrap">
<span class="ios-toggle ios-toggle-reverse">
<input type="checkbox" id="auto-run" name="auto-run" checked>
<label for="auto-run"></label>
<label for="auto-run" class="ios-toggle-mega-label"></label>
</span>
</div>
</div>
<div class="settings-row">
<h4>Format on Save</h4>
<p class="hint">If enabled, your code will be formatted when you actively save your Pen. <strong><span class="inline-note">Note:</span> your code becomes un-folded during formatting.</strong></p>
<div class="ios-toggle-mega-label-wrap">
<span class="ios-toggle ios-toggle-reverse">
<input type="checkbox" id="format_on_save" name="format_on_save">
<label for="format_on_save"></label>
<label for="format_on_save" class="ios-toggle-mega-label"></label>
</span>
</div>
</div>
</div>
<div class="settings tab-page" id="settings-editor">
<h3 aria-label="Editor Settings">Editor Settings</h3>
<div id="editor-settings-form" class="settings-row top-label-form">
<h4>
Code Indentation
</h4>
<ul class="radio-list">
<li>
<input type="radio" id="indent-with-spaces" name="indent-with" value="spaces" checked>
<label for="indent-with-spaces" class="small-inline">Spaces</label>
</li>
<li>
<input type="radio" id="indent-with-tabs" name="indent-with" value="tabs">
<label for="indent-with-tabs" class="small-inline">Tabs</label>
</li>
</ul>
</div>
<div class="settings-row top-label-form normal-labels">
<h4>
<label for="tab-size">
Code Indent width
</label>
</h4>
<div class="custom-select-wrap">
<select id="tab-size" class="fullwidth" name="tab-size">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<div class="select-icon">
<svg viewBox="-122.9 121.1 105.9 61.9" class="icon-arrow-down-mini">
<path d="M-63.2,180.3l43.5-43.5c1.7-1.7,2.7-4,2.7-6.5s-1-4.8-2.7-6.5c-1.7-1.7-4-2.7-6.5-2.7s-4.8,1-6.5,2.7l-37.2,37.2l-37.2-37.2
        c-1.7-1.7-4-2.7-6.5-2.7s-4.8,1-6.5,2.6c-1.9,1.8-2.8,4.2-2.8,6.6c0,2.3,0.9,4.6,2.6,6.5l0,0c11.4,11.5,41,41.2,43,43.3l0.2,0.2
        C-73.5,183.9-66.8,183.9-63.2,180.3z" />
</svg>
<svg viewBox="-122.9 121.1 105.9 61.9" class="icon-arrow-down-mini">
<path d="M-63.2,180.3l43.5-43.5c1.7-1.7,2.7-4,2.7-6.5s-1-4.8-2.7-6.5c-1.7-1.7-4-2.7-6.5-2.7s-4.8,1-6.5,2.7l-37.2,37.2l-37.2-37.2
        c-1.7-1.7-4-2.7-6.5-2.7s-4.8,1-6.5,2.6c-1.9,1.8-2.8,4.2-2.8,6.6c0,2.3,0.9,4.6,2.6,6.5l0,0c11.4,11.5,41,41.2,43,43.3l0.2,0.2
        C-73.5,183.9-66.8,183.9-63.2,180.3z" />
</svg>
</div>
</div>
</div>
<div class="settings-row">
<h4>Want to change your Syntax Highlighting theme, Fonts and more?</h4>
<p>Visit <a href="/settings/editor" target="_blank">your global Editor Settings</a>.</p>
</div>
</div>
</div>
<footer>
<div class="save-and-close-wrap">
<input type="button" class="button button-small green button-no-right-margin close" value="Close" id="close-settings">
</div>
</footer>
</div>
<div class="page-wrap">
<div class="boxes">
<div class="mobile-editor-nav">
<button id="html-toggle" class="selected"><span>HTML</span></button>
<button id="css-toggle"><span>CSS</span></button>
<button id="js-toggle"><span>JS</span></button>
<button id="result-toggle" class="selected"><span>Result</span></button>
</div>
<div class="top-boxes editor-parent" data-number-of-editors="3" elementtiming="pen-editors">
<div class="editor-resizer html-editor-resizer" title="Double-click to expand."></div>
<div id="box-html" class="box box-html" data-type="html">
<div class="powers">
<div class="powers-drag-handle" title="Double-click to expand."></div>
<div class="editor-actions-left">
<h2 class="box-title html-editor-title" id="html-editor-title">
<svg viewBox="0 0 15 15" class="file-type-icon" id="icon-file-html">
<rect fill="#FF3C41" width="15" height="15" rx="4" />
<path d="M10.97 2.29a.563.563 0 0 0-.495-.29.572.572 0 0 0-.488.277l-5.905 9.86a.565.565 0 0 0-.007.574c.102.18.287.289.495.289a.572.572 0 0 0 .488-.277l5.905-9.86a.565.565 0 0 0 .007-.574" fill="#28282B" />
</svg>
<span class="box-title-name">
HTML
</span>
<span class="box-title-preprocessor-name "></span>
</h2>
</div>
<div class="editor-actions-right">
<div class="collaborators-indicators"></div>
<button id="settings-pane-html" class="button button-medium mini-button settings-nub" data-type="html" title="Open HTML Settings">
<svg viewBox="0 0 100 100" id="icon-gear" width="10" height="10">
<path d="M87.687,45.077c-0.313-2.433-0.816-4.807-1.542-7.079l8.145-11.73l-5.827-7.515l-0.094-0.123l-5.824-7.514
                    l-12.955,5.577c-2.041-1.265-4.192-2.362-6.459-3.219L59.42,0h-9.34h-0.153h-9.341l-3.709,13.474
                    c-2.27,0.857-4.421,1.955-6.463,3.222l-12.957-5.577l-5.825,7.514l-0.097,0.124l-5.822,7.517l8.146,11.731
                    c-0.726,2.271-1.233,4.645-1.544,7.079L0,52.032l2.08,9.375l0.033,0.15l2.08,9.375l14.001,0.761c1.295,2.028,2.771,3.926,4.4,5.668
                    l-2.396,14.227l8.416,4.173l0.138,0.067L37.169,100l9.309-10.796c1.161,0.109,2.335,0.173,3.524,0.173s2.358-0.074,3.52-0.184
                    l9.317,10.804l8.415-4.173l0.141-0.066l8.413-4.172l-2.396-14.228c1.628-1.741,3.104-3.64,4.4-5.672l14-0.759l2.078-9.375
                    l0.035-0.154L100,52.025L87.687,45.077z M50.003,34.51c8.435,0,15.272,7.035,15.272,15.719c0,8.679-6.839,15.717-15.272,15.717
                    c-8.436,0-15.272-7.038-15.272-15.717C34.731,41.545,41.569,34.51,50.003,34.51z" />
</svg>
</button>
<button class="button mini-button button-medium editor-dropdown-button editor-dropdown-button-html" data-dropdown="#editor-dropdown-html" aria-haspopup="true" aria-expanded="false">
<span class="visually-hidden">
HTML Options
</span>
<svg viewBox="-122.9 121.1 105.9 61.9" class="icon-arrow-down-mini" width="10" height="10">
<path d="M-63.2,180.3l43.5-43.5c1.7-1.7,2.7-4,2.7-6.5s-1-4.8-2.7-6.5c-1.7-1.7-4-2.7-6.5-2.7s-4.8,1-6.5,2.7l-37.2,37.2l-37.2-37.2
    c-1.7-1.7-4-2.7-6.5-2.7s-4.8,1-6.5,2.6c-1.9,1.8-2.8,4.2-2.8,6.6c0,2.3,0.9,4.6,2.6,6.5l0,0c11.4,11.5,41,41.2,43,43.3l0.2,0.2
    C-73.5,183.9-66.8,183.9-63.2,180.3z" />
</svg>
</button>
<ul id="editor-dropdown-html" class="link-list is-dropdown editor-dropdown editor-dropdown-html" data-dropdown-position="css" data-dropdown-type="html">
<li class="editor-dropdown-list-item">
<button id="tidy-html" class="invisible-button tidy-code-button" data-editor-type="html">
Format HTML
</button>
</li>
<li class="editor-dropdown-list-item">
<button id="view-compiled-html" class="invisible-button view-compiled-button" data-editor-type="html">
View Compiled HTML
</button>
</li>
<li class="editor-dropdown-list-item">
<button id="analyze-html" class="invisible-button analyze-button" data-editor-type="html">
Analyze HTML
</button>
</li>
<li class="editor-dropdown-list-item">
<button id="maximize-html-editor" class="invisible-button maximize-button" data-editor-type="html">
Maximize HTML Editor
</button>
</li>
<li class="editor-dropdown-list-item">
<button id="minimize-html-editor" class="invisible-button minimize-button" data-editor-type="html">
Minimize HTML Editor
</button>
</li>
<li class="editor-dropdown-list-item">
<button id="fold-all-html" class="invisible-button fold-all-button" data-editor-type="html">
Fold All
</button>
</li>
<li class="editor-dropdown-list-item">
<button id="unfold-all-html" class="invisible-button unfold-all-button" data-editor-type="html">
Unfold All
</button>
</li>
</ul>
</div>
</div>
<div class="code-wrap notranslate" translate="no">
<pre id="html" class="code-box" aria-labeledby="html-editor-title">
              <code>
                &lt;div id=&quot;wrapper&quot;&gt;	
	&lt;div id=&quot;washingMachine&quot; class=&quot;isFilled isOpen&quot;&gt;
		&lt;div id=&quot;controls&quot;&gt;READY&lt;/div&gt;
		&lt;div id=&quot;door&quot;&gt;&lt;/div&gt;
		&lt;div id=&quot;tub&quot;&gt;
			&lt;span class=&quot;clothes&quot;&gt;&lt;/span&gt;
			&lt;span class=&quot;clothes&quot;&gt;&lt;/span&gt;
			&lt;span class=&quot;clothes&quot;&gt;&lt;/span&gt;
		&lt;/div&gt;
	&lt;/div&gt;
	
	&lt;div id=&quot;playground&quot;&gt;
		&lt;button id=&quot;content&quot;&gt;EMPTY&lt;/button&gt;
		&lt;button id=&quot;opening&quot;&gt;CLOSE&lt;/button&gt;
		&lt;button id=&quot;power&quot; disabled&gt;START&lt;/button&gt;
	&lt;/div&gt;
&lt;/div&gt;
              </code>
            </pre>
<div class="error-bar" id="error-bar-html">
<span class="error-icon" data-type="html">
!
</span>
</div>
<span class="code-editor-status"></span>
</div>
</div>
<div class="editor-resizer css-editor-resizer" title="Double-click to expand."></div>
<div id="box-css" class="box box-css" data-type="css">
<div class="powers">
<div class="powers-drag-handle" title="Double-click to expand."></div>
<div class="editor-actions-left">
<h2 class="box-title css-editor-title" id="css-editor-title">
<svg viewBox="0 0 15 15" class="file-type-icon" id="icon-file-css">
<rect fill="#0EBEFF" width="15" height="15" rx="4" /><path d="M8 8.366l1.845 1.065a.507.507 0 0 0 .686-.181.507.507 0 0 0-.186-.685L8.5 7.5l1.845-1.065a.507.507 0 0 0 .186-.685.507.507 0 0 0-.686-.181L8 6.634v-2.13A.507.507 0 0 0 7.5 4c-.268 0-.5.225-.5.503v2.131L5.155 5.569a.507.507 0 0 0-.686.181.507.507 0 0 0 .186.685L6.5 7.5 4.655 8.565a.507.507 0 0 0-.186.685c.134.232.445.32.686.181L7 8.366v2.13c0 .271.224.504.5.504.268 0 .5-.225.5-.503V8.366z" fill="#282828" />
</svg>
<span class="box-title-name">
CSS
</span>
<span class="box-title-preprocessor-name "></span>
</h2>
</div>
<div class="editor-actions-right">
<div class="collaborators-indicators"></div>
<button id="settings-pane-css" class="button button-medium mini-button settings-nub" data-type="css" title="Open CSS Settings">
<svg viewBox="0 0 100 100" id="icon-gear" width="10" height="10">
<path d="M87.687,45.077c-0.313-2.433-0.816-4.807-1.542-7.079l8.145-11.73l-5.827-7.515l-0.094-0.123l-5.824-7.514
                    l-12.955,5.577c-2.041-1.265-4.192-2.362-6.459-3.219L59.42,0h-9.34h-0.153h-9.341l-3.709,13.474
                    c-2.27,0.857-4.421,1.955-6.463,3.222l-12.957-5.577l-5.825,7.514l-0.097,0.124l-5.822,7.517l8.146,11.731
                    c-0.726,2.271-1.233,4.645-1.544,7.079L0,52.032l2.08,9.375l0.033,0.15l2.08,9.375l14.001,0.761c1.295,2.028,2.771,3.926,4.4,5.668
                    l-2.396,14.227l8.416,4.173l0.138,0.067L37.169,100l9.309-10.796c1.161,0.109,2.335,0.173,3.524,0.173s2.358-0.074,3.52-0.184
                    l9.317,10.804l8.415-4.173l0.141-0.066l8.413-4.172l-2.396-14.228c1.628-1.741,3.104-3.64,4.4-5.672l14-0.759l2.078-9.375
                    l0.035-0.154L100,52.025L87.687,45.077z M50.003,34.51c8.435,0,15.272,7.035,15.272,15.719c0,8.679-6.839,15.717-15.272,15.717
                    c-8.436,0-15.272-7.038-15.272-15.717C34.731,41.545,41.569,34.51,50.003,34.51z" />
</svg>
</button>
<button class="button mini-button button-medium editor-dropdown-button editor-dropdown-button-css" data-dropdown="#editor-dropdown-css" aria-haspopup="true" aria-expanded="false">
<span class="visually-hidden">
CSS Options
</span>
<svg viewBox="-122.9 121.1 105.9 61.9" class="icon-arrow-down-mini" width="10" height="10">
<path d="M-63.2,180.3l43.5-43.5c1.7-1.7,2.7-4,2.7-6.5s-1-4.8-2.7-6.5c-1.7-1.7-4-2.7-6.5-2.7s-4.8,1-6.5,2.7l-37.2,37.2l-37.2-37.2
    c-1.7-1.7-4-2.7-6.5-2.7s-4.8,1-6.5,2.6c-1.9,1.8-2.8,4.2-2.8,6.6c0,2.3,0.9,4.6,2.6,6.5l0,0c11.4,11.5,41,41.2,43,43.3l0.2,0.2
    C-73.5,183.9-66.8,183.9-63.2,180.3z" />
</svg>
</button>
<ul id="editor-dropdown-css" class="link-list is-dropdown editor-dropdown editor-dropdown-css" data-dropdown-position="css" data-dropdown-type="css">
<li class="editor-dropdown-list-item">
<button id="tidy-css" class="invisible-button tidy-code-button" data-editor-type="css">
Format CSS
</button>
</li>
<li class="editor-dropdown-list-item">
<button id="view-compiled-css" class="invisible-button view-compiled-button" data-editor-type="css">
View Compiled CSS
</button>
</li>
<li class="editor-dropdown-list-item">
<button id="analyze-css" class="invisible-button analyze-button" data-editor-type="css">
Analyze CSS
</button>
</li>
<li class="editor-dropdown-list-item">
<button id="maximize-css-editor" class="invisible-button maximize-button" data-editor-type="css">
Maximize CSS Editor
</button>
</li>
<li class="editor-dropdown-list-item">
<button id="minimize-css-editor" class="invisible-button minimize-button" data-editor-type="css">
Minimize CSS Editor
</button>
</li>
<li class="editor-dropdown-list-item">
<button id="fold-all-css" class="invisible-button fold-all-button" data-editor-type="css">
Fold All
</button>
</li>
<li class="editor-dropdown-list-item">
<button id="unfold-all-css" class="invisible-button unfold-all-button" data-editor-type="css">
Unfold All
</button>
</li>
</ul>
</div>
</div>
<div class="code-wrap notranslate" translate="no">
<pre id="css" class="code-box" aria-labeledby="css-editor-title">
              <code>
                @import url(&#39;https://fonts.googleapis.com/css?family=Nova+Mono&amp;display=swap&#39;);

// GLOBAL ―――――――――――――――――――――――――

* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

body {
	display: flex;
	height: 100vh;
	background:	#92bfd1;
	font-size: 14px;
	font-family: &#39;Nova Mono&#39;, monospace;
}

#wrapper {
	margin: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}


// VARIABLES (Have fun) ―――――――――――――――――――――――――

// Machine

$WM-width: 300px;
$WM-height: $WM-width + $WM-width / 3.4;
$WM-borderRadius: 15px;
$WM-topHeight: 70px;
$WM-bottomHeight: 30px;
$WM-roationSpeed: 0.6s; // If changed, need to be updated in the JS as well

// Colors

$WM-mainColor: #ececf4; // White
$WM-secondaryColor: #c4c4d2; // Light grey
$WM-tertiaryColor: #80819c; // Dark grey
$WM-tubBackground: #453e57;

// Effects

$WM-insetShadowColor: rgba($WM-secondaryColor, 0.3);
$WM-insetShadowSize: 15px;

// Controls

$WM-controlsRatio: 2.2; // Higher numbers produce smaller size
$WM-screenTextSize: 1em;
$WM-screenTextColor: lightgreen;

// Door

$WM-doorRatio: 1.5; // Higher numbers produce smaller size
$WM-doorBorderSize: 25px;


// WASHING-MACHINE ―――――――――――――――――――――――――

#washingMachine {
	background: $WM-mainColor;
	width: $WM-width;
	height: $WM-height;
	border-radius: $WM-borderRadius;
	border-top: 15px solid $WM-tertiaryColor;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	box-shadow: inset -#{$WM-insetShadowSize} -#{$WM-insetShadowSize} 0 0 $WM-insetShadowColor;
	padding: ($WM-topHeight + 15px) 0 $WM-bottomHeight + 15px;

	&amp;:before, &amp;:after {
		content: &quot;&quot;;
		position: absolute;
		border: 4px solid transparent;
		width: 150%;
	}
	
	&amp;:before {
		border-bottom-color: $WM-secondaryColor;
		height: $WM-topHeight;
		top: 0;
		border-radius: 50%;
		box-shadow: inset 0 -#{$WM-insetShadowSize} 0 0 $WM-insetShadowColor;
	}

	&amp;:after {
		border-top-color: $WM-secondaryColor;
		height: $WM-bottomHeight;
		bottom: 0;
	}

	#controls {
		$WM-roundButtonSize: $WM-topHeight / $WM-controlsRatio;
		$WM-elementsWidth: $WM-width / 5;
		$WM-shift: $WM-insetShadowSize + 15px;
		
		// Screen
	
		top: ($WM-topHeight - $WM-roundButtonSize) / 2;
		text-align: center;
		right: $WM-shift;
		background: #242527;
		color: $WM-screenTextColor;
		border-radius: 5px;
		padding: 3px 10px;
		font-weight: 500;
		font-size: $WM-screenTextSize;
		justify-content: center;
		
		&amp;, &amp;:before, &amp;:after { position: absolute; }
		
		&amp;, &amp;:after {
			height: $WM-roundButtonSize - ($WM-roundButtonSize / 4);
			min-width: $WM-elementsWidth;
		}
		
		&amp;, &amp;:before {
			display: flex;
			align-items: center;
			transition: all 0.2s cubic-bezier(.56,.35,0,1.35);
		}
		
		// Round button

		&amp;:before {
			content: &quot;━━&quot;;
			font-size: 14px;
			color: $WM-tertiaryColor;
			box-shadow: inset 0px -#{$WM-insetShadowSize} 0px 0px $WM-insetShadowColor;
			height: $WM-roundButtonSize;
			width: $WM-roundButtonSize;
			border: 3px solid $WM-secondaryColor;
			border-radius: 100%;
			transform: rotate(0deg);
			left: calc(100% + #{$WM-shift - $WM-width / 2 - $WM-roundButtonSize / 2});
		}
		
		// Washing powder compartment
		
		&amp;:after {
			content: &quot;&quot;;
			left: calc(100% + #{$WM-shift - $WM-width + $WM-shift});
			background: $WM-insetShadowColor;
			border-radius: 3px 3px 10px 10px;
			border: 3px solid $WM-secondaryColor;
			box-shadow: inset 0 10px 0 0 $WM-secondaryColor;
		}
	}

	// Reused values ――

		$WM-tubBaseShadow: 0 0 0 7px $WM-insetShadowColor; // Light grey

		@function doorShadows($inside:transparent, $outside:transparent) {
			@return inset 5px 10px 0 0 $inside, 5px -1px 0 0  $outside;
		};

	// ――

	#door, #tub { transition: all 0.2s ease-in-out; }
	
	#door {
		width: $WM-width / $WM-doorRatio;
		height: $WM-width / $WM-doorRatio;
		border: $WM-doorBorderSize solid $WM-tertiaryColor;
		border-radius: 50%;
		position: absolute;
		z-index: 1;
		box-shadow: doorShadows(rgba(black, 0.1));
		transform-origin: 0% 0%;
		transform: rotateY(0deg);
		
		&amp;:before, &amp;:after {
			content: &quot;&quot;;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
		}
		
		// Door handle
		
		&amp;:after {
			background: darken($WM-tertiaryColor, 10%);
			height: 50%;
			width: 17%;
			right: 0;
			border-radius: 40% 30% 30% 40% / 50% 45% 45% 50%;
			transition: all 0.2s ease-in-out;
			z-index: 3;
		}
		
		// Reflection
		
		&amp;:before {
			width: 60%;
			height: 60%;
			left: 0;
			right: 0;
			margin: auto;
			border-radius: 50%;
			border: 5px solid transparent;
			border-left: 15px solid white;
			transform: translateY(-50%) rotate(45deg);
			opacity: 0.2;
			box-shadow: inset -10px 10px 0 0 rgba(white, 0.2);
			border-radius: 40% 30% 30% 40% / 50%;
			z-index: 2;
		}
  }

	#tub {
		width: $WM-width / $WM-doorRatio - $WM-doorBorderSize;
		height: $WM-width / $WM-doorRatio - $WM-doorBorderSize;
		background: $WM-tubBackground;
		position: relative;
		border-radius: 50%;
		overflow: hidden;
		z-index: 0;
		box-shadow: $WM-tubBaseShadow;

		.clothes {
			position: absolute;
			opacity: 0;
			transition: all 0.1s ease-in-out;
		}

		.clothes:nth-child(1) {
			background: linear-gradient(#48873e, #7b9f17);
			width: 70%;
			height: 25%;
			bottom: 10%;
			right: -20%;
			transform: rotate(-20deg);
			border-radius: 49% 38% 65% 8% / 30% 12% 51% 36%;
		}

		.clothes:nth-child(2){
			background: linear-gradient(#c22323, #e15050);
			width: 100%;
			height: 20%;
			border-radius: 64% 40% 27% 47% / 63% 63% 32% 36%;
			bottom: 0;
		}

		.clothes:nth-child(3) {
			background: linear-gradient(#5a5589, #4f46b4);
			width: 70%;
			height: 25%;
			transform: rotate(40deg);
			border-radius: 41% 38% 71% 8% / 51% 36% 51% 24%;
			bottom: 0;
			left: -10%;
		}
	}

	// ACTIONS

	&amp;.isOpen {
		#door {
			transform: rotateY(45deg);
			box-shadow: doorShadows($outside: lighten($WM-tertiaryColor, 20%));
			
			// Door handle
			&amp;:after { box-shadow: 5px -1px 0 0 darken($WM-tertiaryColor, 20%); }
		}
		
		#tub { box-shadow: inset 5px 10px 0 0 rgba(black, 0.1), $WM-tubBaseShadow; }
	}

	&amp;.isWashing {
		animation-name: shake;
		animation-duration: 100ms;
		animation-timing-function: ease-in-out;
		animation-iteration-count: infinite;
		
		#controls:before { transform: rotate(45deg); }
		
		#tub {
			animation-name: rotate;
			animation-duration: $WM-roationSpeed;
			animation-timing-function: linear;
			animation-iteration-count: infinite;
		}
	}

	&amp;.isFilled #tub .clothes { opacity: 1; }

	&amp;.isStarting {
		animation-duration: 100ms * 2;
		animation-timing-function: cubic-bezier(0,-0.01,.61,.01);
		
		#tub {
			animation-duration: $WM-roationSpeed * 2;
			animation-timing-function: cubic-bezier(0,-0.01,.61,.01);
		}
	}
}


// ANIMATIONS ―――――――――――――――――――――――――

@keyframes shake {
  0%, 100% { transform:  translate(0, 0) rotate(0); }
  25%  { transform:  translate(-1.5px, 1.5px) rotate(0.5deg); }
  50%  { transform:  translate(-0.5px, -0.5px) rotate(0.5deg); }
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}


// PLAYGROUND ―――――――――――――――――――――――――

#playground {
	margin-top: 25px;
	width: $WM-width;
	display: flex;
	
	button {
		flex: 1;
		background: #ececf4;
		border: none;
		outline: none;
		border-radius: 6px;
		padding: 7px 10px;
		box-shadow: -1px 2px 0 0 rgba(black, 0.2);
		transition: background 0.2s ease-in-out;
		font: inherit;
		font-size: 0.8em;
		
		&amp;#opening { margin: 0 15px; }
		
		&amp;:hover:not(:disabled) {
			background: white;
			cursor: pointer;
		}
		
		&amp;::-moz-focus-inner { border:0; }
		&amp;:active:not(:disabled) { box-shadow: 0px 1px 0 0 rgba(black, 0.2); }
	}
}
              </code>
            </pre>
<div class="error-bar" id="error-bar-css">
<span class="error-icon" data-type="css">
!
</span>
</div>
<span class="code-editor-status"></span>
</div>
</div>
<div class="editor-resizer js-editor-resizer" title="Double-click to expand."></div>
<div id="box-js" class="box box-js" data-type="js">
<div class="powers">
<div class="powers-drag-handle" title="Double-click to expand."></div>
<div class="editor-actions-left">
<h2 class="box-title js-editor-title" id="js-editor-title">
<svg viewBox="0 0 15 15" class="file-type-icon" id="icon-file-js">
<rect fill="#FCD000" width="15" height="15" rx="4" />
<path d="M6.554 3.705c0 .267-.19.496-.452.543-1.2.217-2.12 1.61-2.12 3.275 0 1.665.92 3.057 2.12 3.274a.554.554 0 0 1-.205 1.087c-1.733-.322-3.022-2.175-3.022-4.361 0-2.187 1.289-4.04 3.022-4.362a.554.554 0 0 1 .657.544zm1.892 0c0-.347.316-.607.657-.544 1.733.322 3.022 2.175 3.022 4.362 0 2.186-1.289 4.04-3.022 4.361a.554.554 0 0 1-.205-1.087c1.2-.217 2.12-1.61 2.12-3.274 0-1.665-.92-3.058-2.12-3.275a.551.551 0 0 1-.452-.543z" fill="#282828" />
</svg>
<span class="box-title-name">
JS
</span>
<span class="box-title-preprocessor-name "></span>
</h2>
</div>
<div class="editor-actions-right">
<div class="collaborators-indicators"></div>
<button id="settings-pane-js" class="button button-medium mini-button settings-nub" data-type="js" title="Open JS Settings">
<svg viewBox="0 0 100 100" id="icon-gear" width="10" height="10">
<path d="M87.687,45.077c-0.313-2.433-0.816-4.807-1.542-7.079l8.145-11.73l-5.827-7.515l-0.094-0.123l-5.824-7.514
                    l-12.955,5.577c-2.041-1.265-4.192-2.362-6.459-3.219L59.42,0h-9.34h-0.153h-9.341l-3.709,13.474
                    c-2.27,0.857-4.421,1.955-6.463,3.222l-12.957-5.577l-5.825,7.514l-0.097,0.124l-5.822,7.517l8.146,11.731
                    c-0.726,2.271-1.233,4.645-1.544,7.079L0,52.032l2.08,9.375l0.033,0.15l2.08,9.375l14.001,0.761c1.295,2.028,2.771,3.926,4.4,5.668
                    l-2.396,14.227l8.416,4.173l0.138,0.067L37.169,100l9.309-10.796c1.161,0.109,2.335,0.173,3.524,0.173s2.358-0.074,3.52-0.184
                    l9.317,10.804l8.415-4.173l0.141-0.066l8.413-4.172l-2.396-14.228c1.628-1.741,3.104-3.64,4.4-5.672l14-0.759l2.078-9.375
                    l0.035-0.154L100,52.025L87.687,45.077z M50.003,34.51c8.435,0,15.272,7.035,15.272,15.719c0,8.679-6.839,15.717-15.272,15.717
                    c-8.436,0-15.272-7.038-15.272-15.717C34.731,41.545,41.569,34.51,50.003,34.51z" />
</svg>
</button>
<button class="button mini-button button-medium editor-dropdown-button editor-dropdown-button-js" data-dropdown="#editor-dropdown-js" aria-haspopup="true" aria-expanded="false">
<span class="visually-hidden">
JS Options
</span>
<svg viewBox="-122.9 121.1 105.9 61.9" class="icon-arrow-down-mini" width="10" height="10">
<path d="M-63.2,180.3l43.5-43.5c1.7-1.7,2.7-4,2.7-6.5s-1-4.8-2.7-6.5c-1.7-1.7-4-2.7-6.5-2.7s-4.8,1-6.5,2.7l-37.2,37.2l-37.2-37.2
    c-1.7-1.7-4-2.7-6.5-2.7s-4.8,1-6.5,2.6c-1.9,1.8-2.8,4.2-2.8,6.6c0,2.3,0.9,4.6,2.6,6.5l0,0c11.4,11.5,41,41.2,43,43.3l0.2,0.2
    C-73.5,183.9-66.8,183.9-63.2,180.3z" />
</svg>
</button>
<ul id="editor-dropdown-js" class="link-list is-dropdown editor-dropdown editor-dropdown-js" data-dropdown-position="css" data-dropdown-type="js">
<li class="editor-dropdown-list-item">
<button id="tidy-js" class="invisible-button tidy-code-button" data-editor-type="js">
Format JavaScript
</button>
</li>
<li class="editor-dropdown-list-item">
<button id="view-compiled-js" class="invisible-button view-compiled-button" data-editor-type="js">
View Compiled JavaScript
</button>
</li>
<li class="editor-dropdown-list-item">
<button id="analyze-js" class="invisible-button analyze-button" data-editor-type="js">
Analyze JavaScript
</button>
</li>
<li class="editor-dropdown-list-item">
<button id="maximize-js-editor" class="invisible-button maximize-button" data-editor-type="js">
Maximize JavaScript Editor
</button>
</li>
<li class="editor-dropdown-list-item">
<button id="minimize-js-editor" class="invisible-button minimize-button" data-editor-type="js">
Minimize JavaScript Editor
</button>
</li>
<li class="editor-dropdown-list-item">
<button id="fold-all-js" class="invisible-button fold-all-button" data-editor-type="js">
Fold All
</button>
</li>
<li class="editor-dropdown-list-item">
<button id="unfold-all-js" class="invisible-button unfold-all-button" data-editor-type="js">
Unfold All
</button>
</li>
</ul>
</div>
</div>
<div class="code-wrap notranslate" translate="no">
<pre id="js" class="code-box" aria-labeledby="js-editor-title">
              <code>
                // VARIABLES ―――――――――――――――――――――――――

const washSpeed = 600; // If changed, need to be updated in the CSS as well
const washingMachine = document.getElementById(&#39;washingMachine&#39;);
const screen = document.getElementById(&#39;controls&#39;);

const status = {
	opening: {
		isActive: true,
		statusClass: &#39;isOpen&#39;,
		controller: document.getElementById(&#39;opening&#39;),
		controllerLabel: [&quot;CLOSE&quot;, &quot;OPEN&quot;]
	},
	content: {
		isActive: true,
		statusClass:&#39;isFilled&#39;,
		controller: document.getElementById(&#39;content&#39;),
		controllerLabel: [&quot;EMPTY&quot;, &quot;FILL&quot;]
	},
	power: {
		isActive: false,
		statusClass: &#39;isWashing&#39;,
		controller: document.getElementById(&#39;power&#39;),
		controllerLabel: [&quot;STOP&quot;, &quot;START&quot;]
	}
};


// PLAYGROUND ―――――――――――――――――――――――――

for (let action in status) {
	const { statusClass, controller, controllerLabel } = status[action];
	
	controller.addEventListener(&#39;click&#39;, function(event) {
		const { isActive } = status[action];
		washingMachine.classList.toggle(statusClass);
		this.innerHTML = controllerLabel[isActive*1];
		
		if(action === &quot;power&quot; &amp;&amp; !isActive) { // Slow start
			washingMachine.classList.add(statusClass);
			washingMachine.classList.add(&quot;isStarting&quot;);
			setTimeout(() =&gt; { washingMachine.classList.remove(&quot;isStarting&quot;); }, washSpeed * 2);
		}
		
		status[action].isActive = !isActive;
		
		setTimeout(function() {
			updateMachine();
		}, 100); // Timeout needed because of a bug on FF when updating innerHTML
	});
}

function updateMachine() {	
	const { opening, content, power } = status;
	
	// Update playground
	
	opening.controller.disabled = power.isActive;
	content.controller.disabled = !opening.isActive;
	power.controller.disabled = opening.isActive || !content.isActive;
	
	// Update screen text
	
	if(power.isActive) {
		screen.innerHTML = &quot;💦&quot;
	} else if(!content.isActive) {
		screen.innerHTML = &quot;EMPTY&quot;;
	} else if (opening.isActive) {
			screen.innerHTML = &quot;🙃&quot;;
	} else {
		screen.innerHTML = &quot;READY&quot;;
	}
}
              </code>
            </pre>
<div class="error-bar" id="error-bar-js">
<span class="error-icon" data-type="js">
!
</span>
</div>
<span class="code-editor-status"></span>
</div>
<div class="react-pen-editor-imports" data-props-type="js"></div>
</div>
</div>
<div id="resizer" class="resizer">
<span></span>
<div id="width-readout" class="width-readout">999px</div>
<div id="pen-ad"></div>
</div>
<section id="drawer" class="comments">
</section>
<div class="output-container">
<div class="output-sizer">
<div id="result_div" class="result">
<iframe id="result" name="CodePen" title="CodePen Preview" src="https://codepen.io/Arkellys/fullpage/YoYNve?view=" sandbox="allow-forms allow-modals allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation-by-user-activation allow-downloads allow-presentation" allow="accelerometer *; bluetooth *; camera *; encrypted-media *; display-capture *; geolocation *; gyroscope *; microphone *; midi *; clipboard-read *; clipboard-write *; web-share *; serial *; xr-spatial-tracking *" scrolling="auto" allowTransparency="true" allowpaymentrequest="true" allowfullscreen="true" class="result-iframe " loading="lazy">
          </iframe>
<div id="editor-drag-cover" class="drag-cover"></div>
</div>
<div id="box-console" class="box box-console notranslate" translate="no">
<div class="editor-resizer editor-resizer-console" title="Drag to resize. Double-click to expand."></div>
<div class="powers">
<div class="powers-drag-handle" title="Drag to resize. Double-click to expand."></div>
<div class="editor-actions-left">
<h2 class="box-title"><span class="box-title-name">Console</span></h2>
</div>
<div class="editor-actions-right">
<button class="button button-medium mini-button console-clear-button" title="Clear">
Clear
</button>
<button class="button button-medium mini-button close-editor-button" data-type="console" title="Close">
<svg class="icon-x" viewBox="0 0 100 100">
<path d="M96.8 83.7L63.1 50l33.7-33.7c3.6-3.6 3.6-9.4 0-13.1s-9.5-3.6-13.1 0L50 36.9 16.3 3.2C12.7-.4 6.9-.4 3.2 3.2s-3.6 9.5 0 13.1L36.9 50 3.2 83.7c-3.6 3.6-3.6 9.4 0 13.1s9.5 3.6 13.1 0L50 63.1l33.7 33.7c3.6 3.6 9.4 3.6 13.1 0s3.6-9.5 0-13.1z" />
</svg>
</button>
</div>
</div>
<div class="console-wrap">
<div class="console-entries short-no-scroll"></div>
<div class="console-command-line">
<span class="console-arrow forwards"></span>
<textarea class="console-command-line-input auto-expand" rows="1" data-min-rows="1"></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="asset-bin-goes-here"></div>
<footer id="react-pen-footer" class="site-footer editor-footer"></footer>
<div id="keycommands" class="modal modal-neutral">
<div class="keycommands-container">
<section class="editor-commands inline-editor-commands">
<h2>Editor Commands</h2>
<div class="key-group">
<kbd class="keycommand">
<span class="key pc_only">Ctrl</span>
<span class="key mac_only">Ctrl</span>
<span class="key">Space</span>
</kbd>
Autocomplete
</div>
<div class="key-group">
<kbd class="keycommand">
<span class="key -command"></span>
<span class="key">F</span>
</kbd>
Find
</div>
<div class="key-group">
<kbd class="keycommand">
<span class="key -command"></span>
<span class="key">G</span>
</kbd>
Find Next
</div>
<div class="key-group">
<kbd class="keycommand">
<span class="key -command"></span>
<span class="key" title="Shift">⇧</span>
<span class="key">G</span>
</kbd>
Find Previous
</div>
<div class="key-group">
<kbd class="keycommand">
<span class="key -command"></span>
<span class="key pc_only" title="Shift">⇧</span>
<span class="key mac_only">Opt</span>
<span class="key">F</span>
</kbd>
Find & Replace
</div>
<div class="key-group mac_only">
<kbd class="keycommand">
<span class="key -command"></span>
<span class="key" title="Shift">⇧</span>
<span class="key">F</span>
</kbd>
Format Code
</div>
<div class="key-group">
<kbd class="keycommand">
<span class="key -command"></span>
<span class="key">[</span>
</kbd>
Indent Code Right
</div>
<div class="key-group">
<kbd class="keycommand">
<span class="key -command"></span>
<span class="key">]</span>
</kbd>
Indent Code Left
</div>
<div class="key-group">
<kbd class="keycommand">
<span class="key" title="Shift">⇧</span>
<span class="key">Tab</span>
</kbd>
Auto Indent Code
</div>
<div class="key-group">
<kbd class="keycommand">
<span class="key -command"></span>
<span class="key">/</span>
</kbd>
Line Comment
</div>
<div class="key-group">
<kbd class="keycommand">
<span class="key -command"></span>
<span class="key pc_only" title="Shift">⇧</span>
<span class="key mac_only">Opt</span>
<span class="key">/</span>
</kbd>
Block Comment
</div>
<p class="inline-tab-triggers">Also see: <a href="https://blog.codepen.io/documentation/features/tab-triggers/" target="_blank" rel="noopener">Tab Triggers</a></p>
</section>
<section class="editor-commands">
<h2>Editor Focus</h2>
<div class="key-group">
<kbd class="keycommand">
<span class="key -command"></span>
<span class="key pc_only">Alt</span>
<span class="key mac_only">Opt</span>
<span class="key">1</span>
</kbd>
HTML Editor
</div>
<div class="key-group">
<kbd class="keycommand">
<span class="key -command"></span>
<span class="key pc_only">Alt</span>
<span class="key mac_only">Opt</span>
<span class="key">2</span>
</kbd>
CSS Editor
</div>
<div class="key-group">
<kbd class="keycommand">
<span class="key -command"></span>
<span class="key pc_only">Alt</span>
<span class="key mac_only">Opt</span>
<span class="key">3</span>
</kbd>
JS Editor
</div>
<div class="key-group">
<kbd class="keycommand">
<span class="key -command"></span>
<span class="key pc_only">Alt</span>
<span class="key mac_only">Opt</span>
<span class="key">4</span>
</kbd>
Toggle Console
</div>
<div class="key-group">
<kbd class="keycommand">
<span class="key -command"></span>
<span class="key pc_only">Alt</span>
<span class="key mac_only">Opt</span>
<span class="key">0</span>
</kbd>
Preview
</div>
<div class="key-group">
<kbd class="keycommand">
<span class="key">Esc</span>
</kbd>
Exit currently focused editor
</div>
</section>
<section class="editor-commands">
<h2>Misc</h2>
<div class="key-group">
<kbd class="keycommand">
<span class="key -command"></span>
<span class="key" title="Shift">⇧</span>
<span class="key">7</span>
</kbd>
Re-run Preview
</div>
<div class="key-group">
<kbd class="keycommand">
<span class="key -command"></span>
<span class="key" title="Shift">⇧</span>
<span class="key">8</span>
</kbd>
Clear All Analyze Errors
</div>
<div class="key-group">
<kbd class="keycommand">
<span class="key -command"></span>
<span class="key" title="Shift">⇧</span>
<span class="key">9</span>
</kbd>
Open This Dialog
</div>
<div class="key-group">
<kbd class="keycommand">
<span class="key -command"></span>
<span class="key" title="Shift">⇧</span>
<span class="key">0</span>
</kbd>
Open Debug View
</div>
<h2>HTML Specific</h2>
<div class="key-group">
<kbd class="keycommand">
<span class="key -command"></span>
<span class="key" title="Shift">⇧</span>
<span class="key">A</span>
</kbd>
Wrap With...
</div>
<h2>Pen Actions</h2>
<div class="key-group">
<kbd class="keycommand">
<span class="key -command"></span>
<span class="key">P</span>
</kbd>
Create New Pen
</div>
<div class="key-group">
<kbd class="keycommand">
<span class="key -command"></span>
<span class="key">S</span>
</kbd>
Save
</div>
<div class="key-group">
<kbd class="keycommand">
<span class="key -command"></span>
<span class="key" title="Shift">⇧</span>
<span class="key">S</span>
</kbd>
Save As Private <span style="border-radius: 2px; padding: 1px 6px 2px 5px; color: black !important; background: var(--cp-color-yellow); white-space: nowrap; text-shadow: none; letter-spacing: 0; font-size: 71%; position: relative; top: -1px;">PRO</span>
</div>
<div class="key-group">
<kbd class="keycommand">
<span class="key -command"></span>
<span class="key">I</span>
</kbd>
Info Panel (if owned)
</div>
</section>
</div>
</div>
<div id="popup-overlay" class="overlay popup-overlay"></div>
<div id="modal-overlay" class="overlay modal-overlay"></div>
<noscript>

  <input type="checkbox" class="modal-closing-trick" id="modal-closing-trick">

  <div class="overlay noscript-overlay" style="display: block;"></div>

  <div class="modal modal-message group modal-warning">

    <div class="modal-title">CodePen requires JavaScript to render the code and preview areas in this view.</div>

    <p>Trying <a href="https://codepen.io/Arkellys/debug/YoYNve">viewing this Pen in Debug Mode</a>, which is the preview area without any iframe and does not require JavaScript. Although what the preview is of might!</p>

    <p>Need to know how to enable JavaScript? <a href="http://enable-javascript.com/" target="_blank" rel="noopener">Go here.</a></p>

    <label class="button button-medium" for="modal-closing-trick">Close this, use anyway.</label>

  </div>

</noscript>
<textarea id="init-data" style="display:none">{&quot;__browser&quot;:{&quot;country&quot;:&quot;NL&quot;,&quot;device&quot;:&quot;unknown_device&quot;,&quot;mobile&quot;:false,&quot;name&quot;:&quot;chrome&quot;,&quot;platform&quot;:&quot;pc&quot;,&quot;version&quot;:&quot;124&quot;},&quot;__constants&quot;:{},&quot;__CPDATA&quot;:{&quot;domain_iframe&quot;:&quot;https://cdpn.io&quot;,&quot;environment&quot;:&quot;production&quot;,&quot;host&quot;:&quot;codepen.io&quot;,&quot;iframe_allow&quot;:&quot;accelerometer *; bluetooth *; camera *; encrypted-media *; display-capture *; geolocation *; gyroscope *; microphone *; midi *; clipboard-read *; clipboard-write *; web-share *; serial *; xr-spatial-tracking *&quot;,&quot;iframe_sandbox&quot;:&quot;allow-forms allow-modals allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation-by-user-activation allow-downloads allow-presentation&quot;},&quot;__graphql&quot;:{&quot;data&quot;:{&quot;data&quot;:{&quot;sessionUser&quot;:{&quot;id&quot;:&quot;apVaOQ&quot;,&quot;name&quot;:&quot;Jacco Fluks&quot;,&quot;title&quot;:&quot;Jacco Fluks&quot;,&quot;avatar&quot;:&quot;https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&amp;version=0&quot;,&quot;currentContext&quot;:{&quot;id&quot;:&quot;apVaOQ&quot;,&quot;title&quot;:&quot;Jacco Fluks&quot;,&quot;name&quot;:&quot;Jacco Fluks&quot;,&quot;avatar&quot;:&quot;https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&amp;version=0&quot;,&quot;username&quot;:&quot;Jacco-Fluks&quot;,&quot;__typename&quot;:&quot;User&quot;},&quot;currentTeamId&quot;:null,&quot;username&quot;:&quot;Jacco-Fluks&quot;,&quot;admin&quot;:false,&quot;anon&quot;:false,&quot;pro&quot;:false,&quot;verified&quot;:false,&quot;teams&quot;:[],&quot;__typename&quot;:&quot;User&quot;}}},&quot;url&quot;:&quot;https://codepen.io/graphql&quot;,&quot;api&quot;:&quot;cprails&quot;},&quot;__user&quot;:{&quot;anon&quot;:false,&quot;base_url&quot;:&quot;/Jacco-Fluks/&quot;,&quot;cohorts&quot;:[],&quot;current_team_hashid&quot;:null,&quot;current_team_id&quot;:0,&quot;hashid&quot;:&quot;apVaOQ&quot;,&quot;id&quot;:12459340,&quot;itemType&quot;:&quot;user&quot;,&quot;name&quot;:&quot;Jacco Fluks&quot;,&quot;paid&quot;:false,&quot;tier&quot;:0,&quot;username&quot;:&quot;Jacco-Fluks&quot;,&quot;created_at&quot;:&quot;2024-05-15T12:08:44.995Z&quot;,&quot;email_verified&quot;:false,&quot;collections_count&quot;:0,&quot;collections_private_count&quot;:0,&quot;followers_count&quot;:0,&quot;followings_count&quot;:0,&quot;pens_count&quot;:0,&quot;pens_private_count&quot;:0,&quot;projects_count&quot;:0,&quot;projects_private_count&quot;:0},&quot;__firebase&quot;:{&quot;config&quot;:{&quot;apiKey&quot;:&quot;AIzaSyBgLAe7N_MdFpuVofMkcQLGwwhUu5tuxls&quot;,&quot;authDomain&quot;:&quot;codepen-store-production.firebaseapp.com&quot;,&quot;databaseURL&quot;:&quot;https://codepen-store-production.firebaseio.com&quot;,&quot;disabled&quot;:false,&quot;projectId&quot;:&quot;codepen-store-production&quot;},&quot;token&quot;:&quot;eyJhbGciOiJSUzI1NiJ9.eyJhdWQiOiJodHRwczovL2lkZW50aXR5dG9vbGtpdC5nb29nbGVhcGlzLmNvbS9nb29nbGUuaWRlbnRpdHkuaWRlbnRpdHl0b29sa2l0LnYxLklkZW50aXR5VG9vbGtpdCIsImNsYWltcyI6eyJvd25lcklkIjoiYXBWYU9RIiwiYWRtaW4iOmZhbHNlfSwiZXhwIjoxNzE1Nzc5NjM3LCJpYXQiOjE3MTU3NzYwMzcsImlzcyI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInN1YiI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInVpZCI6ImFwVmFPUSJ9.eXFviTK0HlusTT1vozBsrk0flKkIWe1kdfiuLp8k1kObraTCOCLi03OyY6e9aH7JjzgePfGYAPnUSk0WGuhgRIRI_XE_VgM2uizhZMoxmYVI9a6OL7wVSV9ZlU5D7p79bTVItVVcsKSoGiNM3wBiwYlGhpR-Q12ijU4_fg_AO51YGQm_LoIDw3u4O7-yKkZJr_Gz0jURZwjaPSarJg_h4DIo-WWlLa_ycSC8Q4v2rtwVPLK2KZcQufhEvZvOK-q-TZqQLi25LZ6W8hP4F9CdL6oGLFFGbqBFEIRGOrlb5H7NDegm2CflA3U8FU3q2BXSki2vLYXOoOzHE5bZZ7haNw&quot;},&quot;__pay_stripe_public_key&quot;:&quot;pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH&quot;,&quot;__pay_braintree_env&quot;:&quot;production&quot;,&quot;__boomboom&quot;:{&quot;serve_url&quot;:&quot;https://cdpn.io/cpe/boomboom&quot;,&quot;store_url&quot;:&quot;https://codepen.io/cpe/boomboom/store&quot;},&quot;__editor_config&quot;:{&quot;id&quot;:&quot;classic&quot;,&quot;editors&quot;:[{&quot;id&quot;:&quot;html&quot;,&quot;type&quot;:&quot;html&quot;,&quot;name&quot;:&quot;HTML&quot;,&quot;showEditor&quot;:true,&quot;showSettings&quot;:true,&quot;showProcessors&quot;:true,&quot;embeds&quot;:{&quot;showViewCompiled&quot;:true},&quot;settings&quot;:[{&quot;id&quot;:&quot;processor&quot;,&quot;name&quot;:&quot;HTML Preprocessor&quot;,&quot;type&quot;:&quot;select&quot;,&quot;visible&quot;:true,&quot;values&quot;:[{&quot;id&quot;:&quot;none&quot;,&quot;name&quot;:&quot;None&quot;,&quot;value&quot;:&quot;none&quot;,&quot;default&quot;:true},{&quot;id&quot;:&quot;haml&quot;,&quot;name&quot;:&quot;Haml&quot;,&quot;value&quot;:&quot;haml&quot;},{&quot;id&quot;:&quot;markdown&quot;,&quot;name&quot;:&quot;Markdown&quot;,&quot;value&quot;:&quot;markdown&quot;},{&quot;id&quot;:&quot;slim&quot;,&quot;name&quot;:&quot;Slim&quot;,&quot;value&quot;:&quot;slim&quot;},{&quot;id&quot;:&quot;pug&quot;,&quot;name&quot;:&quot;Pug&quot;,&quot;value&quot;:&quot;pug&quot;}]},{&quot;id&quot;:&quot;html_classes&quot;,&quot;name&quot;:&quot;Add Class(es) to &lt;html&gt;&quot;,&quot;type&quot;:&quot;input&quot;,&quot;placeholder&quot;:&quot;e.g. single post post-1234&quot;,&quot;visible&quot;:true},{&quot;id&quot;:&quot;head&quot;,&quot;name&quot;:&quot;Stuff for &lt;head&gt;&quot;,&quot;type&quot;:&quot;textarea&quot;,&quot;placeholder&quot;:&quot;e.g. &lt;meta&gt;, &lt;link&gt;, &lt;script&gt;&quot;,&quot;visible&quot;:true}],&quot;actions&quot;:[{&quot;id&quot;:&quot;tidy_html&quot;,&quot;type&quot;:&quot;tidy_code&quot;,&quot;name&quot;:&quot;Format HTML&quot;,&quot;disabled_processors&quot;:[&quot;haml&quot;,&quot;slim&quot;]},{&quot;id&quot;:&quot;view_compiled_html&quot;,&quot;type&quot;:&quot;view_compiled&quot;,&quot;name&quot;:&quot;View Compiled HTML&quot;,&quot;disabled_processors&quot;:[&quot;none&quot;],&quot;showInEmbeds&quot;:true},{&quot;id&quot;:&quot;analyze_html&quot;,&quot;type&quot;:&quot;analyze&quot;,&quot;name&quot;:&quot;Analyze HTML&quot;},{&quot;id&quot;:&quot;maximize_html_editor&quot;,&quot;type&quot;:&quot;maximize&quot;,&quot;name&quot;:&quot;Maximize HTML Editor&quot;},{&quot;id&quot;:&quot;minimize_html_editor&quot;,&quot;type&quot;:&quot;minimize&quot;,&quot;name&quot;:&quot;Minimize HTML Editor&quot;},{&quot;id&quot;:&quot;fold_all_html&quot;,&quot;type&quot;:&quot;fold_all&quot;,&quot;name&quot;:&quot;Fold All&quot;},{&quot;id&quot;:&quot;unfold_all_html&quot;,&quot;type&quot;:&quot;unfold_all&quot;,&quot;name&quot;:&quot;Unfold All&quot;}],&quot;processors&quot;:[{&quot;id&quot;:&quot;none&quot;,&quot;name&quot;:&quot;None&quot;},{&quot;id&quot;:&quot;haml&quot;,&quot;name&quot;:&quot;Haml&quot;},{&quot;id&quot;:&quot;markdown&quot;,&quot;name&quot;:&quot;Markdown&quot;},{&quot;id&quot;:&quot;slim&quot;,&quot;name&quot;:&quot;Slim&quot;},{&quot;id&quot;:&quot;pug&quot;,&quot;name&quot;:&quot;Pug&quot;}]},{&quot;id&quot;:&quot;css&quot;,&quot;type&quot;:&quot;css&quot;,&quot;name&quot;:&quot;CSS&quot;,&quot;showEditor&quot;:true,&quot;showSettings&quot;:true,&quot;showProcessors&quot;:true,&quot;showVendorPrefixing&quot;:true,&quot;embeds&quot;:{&quot;showViewCompiled&quot;:true},&quot;actions&quot;:[{&quot;id&quot;:&quot;tidy_css&quot;,&quot;type&quot;:&quot;tidy_code&quot;,&quot;name&quot;:&quot;Format CSS&quot;,&quot;disabled_processors&quot;:[&quot;sass&quot;,&quot;stylus&quot;]},{&quot;id&quot;:&quot;view_compiled_css&quot;,&quot;type&quot;:&quot;view_compiled&quot;,&quot;name&quot;:&quot;View Compiled CSS&quot;,&quot;disabled_processors&quot;:[&quot;none&quot;],&quot;disabled_prefixes&quot;:[&quot;neither&quot;,&quot;prefixfree&quot;]},{&quot;id&quot;:&quot;analyze_css&quot;,&quot;type&quot;:&quot;analyze&quot;,&quot;name&quot;:&quot;Analyze CSS&quot;},{&quot;id&quot;:&quot;maximize_css_editor&quot;,&quot;type&quot;:&quot;maximize&quot;,&quot;name&quot;:&quot;Maximize CSS Editor&quot;},{&quot;id&quot;:&quot;minimize_css_editor&quot;,&quot;type&quot;:&quot;minimize&quot;,&quot;name&quot;:&quot;Minimize CSS Editor&quot;},{&quot;id&quot;:&quot;fold_all_css&quot;,&quot;type&quot;:&quot;fold_all&quot;,&quot;name&quot;:&quot;Fold All&quot;,&quot;disabled_processors&quot;:[&quot;sass&quot;]},{&quot;id&quot;:&quot;unfold_all_css&quot;,&quot;type&quot;:&quot;unfold_all&quot;,&quot;name&quot;:&quot;Unfold All&quot;,&quot;disabled_processors&quot;:[&quot;sass&quot;]}],&quot;processors&quot;:[{&quot;id&quot;:&quot;none&quot;,&quot;name&quot;:&quot;None&quot;},{&quot;id&quot;:&quot;less&quot;,&quot;name&quot;:&quot;Less&quot;},{&quot;id&quot;:&quot;scss&quot;,&quot;name&quot;:&quot;SCSS&quot;},{&quot;id&quot;:&quot;sass&quot;,&quot;name&quot;:&quot;Sass&quot;},{&quot;id&quot;:&quot;stylus&quot;,&quot;name&quot;:&quot;Stylus&quot;},{&quot;id&quot;:&quot;postcss&quot;,&quot;name&quot;:&quot;PostCSS&quot;}],&quot;parSuffixes&quot;:[&quot;less&quot;,&quot;scss&quot;,&quot;sass&quot;,&quot;styl&quot;]},{&quot;id&quot;:&quot;js&quot;,&quot;type&quot;:&quot;js&quot;,&quot;name&quot;:&quot;JS&quot;,&quot;showEditor&quot;:true,&quot;showSettings&quot;:true,&quot;showProcessors&quot;:true,&quot;detectImports&quot;:true,&quot;externalResourcesHidden&quot;:false,&quot;embeds&quot;:{&quot;showViewCompiled&quot;:true},&quot;actions&quot;:[{&quot;id&quot;:&quot;tidy_js&quot;,&quot;type&quot;:&quot;tidy_code&quot;,&quot;name&quot;:&quot;Format JavaScript&quot;,&quot;disabled_processors&quot;:[&quot;coffeescript, livescript&quot;]},{&quot;id&quot;:&quot;view_compiled_js&quot;,&quot;type&quot;:&quot;view_compiled&quot;,&quot;name&quot;:&quot;View Compiled JavaScript&quot;,&quot;disabled_processors&quot;:[&quot;none&quot;]},{&quot;id&quot;:&quot;analyze_js&quot;,&quot;type&quot;:&quot;analyze&quot;,&quot;name&quot;:&quot;Analyze JavaScript&quot;},{&quot;id&quot;:&quot;maximize_js_editor&quot;,&quot;type&quot;:&quot;maximize&quot;,&quot;name&quot;:&quot;Maximize JavaScript Editor&quot;},{&quot;id&quot;:&quot;minimize_js_editor&quot;,&quot;type&quot;:&quot;minimize&quot;,&quot;name&quot;:&quot;Minimize JavaScript Editor&quot;},{&quot;id&quot;:&quot;fold_all_js&quot;,&quot;type&quot;:&quot;fold_all&quot;,&quot;name&quot;:&quot;Fold All&quot;},{&quot;id&quot;:&quot;unfold_all_js&quot;,&quot;type&quot;:&quot;unfold_all&quot;,&quot;name&quot;:&quot;Unfold All&quot;}],&quot;processors&quot;:[{&quot;id&quot;:&quot;none&quot;,&quot;name&quot;:&quot;None&quot;},{&quot;id&quot;:&quot;babel&quot;,&quot;name&quot;:&quot;Babel&quot;},{&quot;id&quot;:&quot;typescript&quot;,&quot;name&quot;:&quot;TypeScript&quot;},{&quot;id&quot;:&quot;coffeescript&quot;,&quot;name&quot;:&quot;CoffeeScript&quot;},{&quot;id&quot;:&quot;livescript&quot;,&quot;name&quot;:&quot;LiveScript&quot;}]}],&quot;formatters&quot;:[{&quot;id&quot;:&quot;classic&quot;,&quot;name&quot;:&quot;Classic&quot;,&quot;runOn&quot;:[{&quot;eventType&quot;:&quot;demand&quot;}],&quot;url&quot;:&quot;https://fi593g2v2a.execute-api.us-west-2.amazonaws.com/production/format&quot;}],&quot;layout&quot;:{&quot;default&quot;:&quot;top&quot;},&quot;linters&quot;:[{&quot;id&quot;:&quot;classic&quot;,&quot;name&quot;:&quot;Classic&quot;,&quot;runOn&quot;:[{&quot;eventType&quot;:&quot;demand&quot;}],&quot;url&quot;:&quot;https://fi593g2v2a.execute-api.us-west-2.amazonaws.com/production/lint&quot;}],&quot;preview&quot;:{&quot;intervalMaxWaitMS&quot;:3500,&quot;intervalMS&quot;:1200},&quot;settings&quot;:[{&quot;id&quot;:&quot;behavior&quot;,&quot;name&quot;:&quot;Behavior&quot;,&quot;type&quot;:&quot;setting&quot;},{&quot;id&quot;:&quot;editor&quot;,&quot;name&quot;:&quot;Editor&quot;,&quot;type&quot;:&quot;setting&quot;}]},&quot;__item&quot;:&quot;{\&quot;editor_settings\&quot;:{\&quot;auto_run\&quot;:true,\&quot;autocomplete\&quot;:false,\&quot;code_folding\&quot;:true,\&quot;css_pre_processor\&quot;:\&quot;none\&quot;,\&quot;css_prefix\&quot;:\&quot;neither\&quot;,\&quot;css_starter\&quot;:\&quot;neither\&quot;,\&quot;emmet_active\&quot;:true,\&quot;font_size\&quot;:\&quot;15\&quot;,\&quot;font_type\&quot;:\&quot;system\&quot;,\&quot;format_on_save\&quot;:false,\&quot;html_pre_processor\&quot;:\&quot;none\&quot;,\&quot;indent_with\&quot;:\&quot;tabs\&quot;,\&quot;js_pre_processor\&quot;:\&quot;none\&quot;,\&quot;key_bindings\&quot;:\&quot;normal\&quot;,\&quot;line_numbers\&quot;:true,\&quot;line_wrapping\&quot;:true,\&quot;match_brackets\&quot;:true,\&quot;snippets\&quot;:{\&quot;markupSnippets\&quot;:{},\&quot;stylesheetSnippets\&quot;:{}},\&quot;tab_size\&quot;:2,\&quot;theme\&quot;:\&quot;twilight\&quot;,\&quot;id\&quot;:\&quot;YoYNve\&quot;,\&quot;auto_save\&quot;:true},\&quot;hashid\&quot;:\&quot;YoYNve\&quot;,\&quot;itemType\&quot;:\&quot;pen\&quot;,\&quot;resources\&quot;:[],\&quot;tags\&quot;:[\&quot;washing\&quot;,\&quot;machine\&quot;,\&quot;animation\&quot;,\&quot;animated\&quot;],\&quot;id\&quot;:37386081,\&quot;user_id\&quot;:1547401,\&quot;html\&quot;:\&quot;&lt;div id=\\\&quot;wrapper\\\&quot;&gt;\\t\\n\\t&lt;div id=\\\&quot;washingMachine\\\&quot; class=\\\&quot;isFilled isOpen\\\&quot;&gt;\\n\\t\\t&lt;div id=\\\&quot;controls\\\&quot;&gt;READY&lt;/div&gt;\\n\\t\\t&lt;div id=\\\&quot;door\\\&quot;&gt;&lt;/div&gt;\\n\\t\\t&lt;div id=\\\&quot;tub\\\&quot;&gt;\\n\\t\\t\\t&lt;span class=\\\&quot;clothes\\\&quot;&gt;&lt;/span&gt;\\n\\t\\t\\t&lt;span class=\\\&quot;clothes\\\&quot;&gt;&lt;/span&gt;\\n\\t\\t\\t&lt;span class=\\\&quot;clothes\\\&quot;&gt;&lt;/span&gt;\\n\\t\\t&lt;/div&gt;\\n\\t&lt;/div&gt;\\n\\t\\n\\t&lt;div id=\\\&quot;playground\\\&quot;&gt;\\n\\t\\t&lt;button id=\\\&quot;content\\\&quot;&gt;EMPTY&lt;/button&gt;\\n\\t\\t&lt;button id=\\\&quot;opening\\\&quot;&gt;CLOSE&lt;/button&gt;\\n\\t\\t&lt;button id=\\\&quot;power\\\&quot; disabled&gt;START&lt;/button&gt;\\n\\t&lt;/div&gt;\\n&lt;/div&gt;\&quot;,\&quot;css\&quot;:\&quot;@import url(&#39;https://fonts.googleapis.com/css?family=Nova+Mono&amp;display=swap&#39;);\\n\\n// GLOBAL ―――――――――――――――――――――――――\\n\\n* {\\n\\tbox-sizing: border-box;\\n\\tpadding: 0;\\n\\tmargin: 0;\\n}\\n\\nbody {\\n\\tdisplay: flex;\\n\\theight: 100vh;\\n\\tbackground:\\t#92bfd1;\\n\\tfont-size: 14px;\\n\\tfont-family: &#39;Nova Mono&#39;, monospace;\\n}\\n\\n#wrapper {\\n\\tmargin: auto;\\n\\tdisplay: flex;\\n\\tflex-direction: column;\\n\\talign-items: center;\\n}\\n\\n\\n// VARIABLES (Have fun) ―――――――――――――――――――――――――\\n\\n// Machine\\n\\n$WM-width: 300px;\\n$WM-height: $WM-width + $WM-width / 3.4;\\n$WM-borderRadius: 15px;\\n$WM-topHeight: 70px;\\n$WM-bottomHeight: 30px;\\n$WM-roationSpeed: 0.6s; // If changed, need to be updated in the JS as well\\n\\n// Colors\\n\\n$WM-mainColor: #ececf4; // White\\n$WM-secondaryColor: #c4c4d2; // Light grey\\n$WM-tertiaryColor: #80819c; // Dark grey\\n$WM-tubBackground: #453e57;\\n\\n// Effects\\n\\n$WM-insetShadowColor: rgba($WM-secondaryColor, 0.3);\\n$WM-insetShadowSize: 15px;\\n\\n// Controls\\n\\n$WM-controlsRatio: 2.2; // Higher numbers produce smaller size\\n$WM-screenTextSize: 1em;\\n$WM-screenTextColor: lightgreen;\\n\\n// Door\\n\\n$WM-doorRatio: 1.5; // Higher numbers produce smaller size\\n$WM-doorBorderSize: 25px;\\n\\n\\n// WASHING-MACHINE ―――――――――――――――――――――――――\\n\\n#washingMachine {\\n\\tbackground: $WM-mainColor;\\n\\twidth: $WM-width;\\n\\theight: $WM-height;\\n\\tborder-radius: $WM-borderRadius;\\n\\tborder-top: 15px solid $WM-tertiaryColor;\\n\\tdisplay: flex;\\n\\talign-items: center;\\n\\tjustify-content: center;\\n\\tposition: relative;\\n\\toverflow: hidden;\\n\\tbox-shadow: inset -#{$WM-insetShadowSize} -#{$WM-insetShadowSize} 0 0 $WM-insetShadowColor;\\n\\tpadding: ($WM-topHeight + 15px) 0 $WM-bottomHeight + 15px;\\n\\n\\t&amp;:before, &amp;:after {\\n\\t\\tcontent: \\\&quot;\\\&quot;;\\n\\t\\tposition: absolute;\\n\\t\\tborder: 4px solid transparent;\\n\\t\\twidth: 150%;\\n\\t}\\n\\t\\n\\t&amp;:before {\\n\\t\\tborder-bottom-color: $WM-secondaryColor;\\n\\t\\theight: $WM-topHeight;\\n\\t\\ttop: 0;\\n\\t\\tborder-radius: 50%;\\n\\t\\tbox-shadow: inset 0 -#{$WM-insetShadowSize} 0 0 $WM-insetShadowColor;\\n\\t}\\n\\n\\t&amp;:after {\\n\\t\\tborder-top-color: $WM-secondaryColor;\\n\\t\\theight: $WM-bottomHeight;\\n\\t\\tbottom: 0;\\n\\t}\\n\\n\\t#controls {\\n\\t\\t$WM-roundButtonSize: $WM-topHeight / $WM-controlsRatio;\\n\\t\\t$WM-elementsWidth: $WM-width / 5;\\n\\t\\t$WM-shift: $WM-insetShadowSize + 15px;\\n\\t\\t\\n\\t\\t// Screen\\n\\t\\n\\t\\ttop: ($WM-topHeight - $WM-roundButtonSize) / 2;\\n\\t\\ttext-align: center;\\n\\t\\tright: $WM-shift;\\n\\t\\tbackground: #242527;\\n\\t\\tcolor: $WM-screenTextColor;\\n\\t\\tborder-radius: 5px;\\n\\t\\tpadding: 3px 10px;\\n\\t\\tfont-weight: 500;\\n\\t\\tfont-size: $WM-screenTextSize;\\n\\t\\tjustify-content: center;\\n\\t\\t\\n\\t\\t&amp;, &amp;:before, &amp;:after { position: absolute; }\\n\\t\\t\\n\\t\\t&amp;, &amp;:after {\\n\\t\\t\\theight: $WM-roundButtonSize - ($WM-roundButtonSize / 4);\\n\\t\\t\\tmin-width: $WM-elementsWidth;\\n\\t\\t}\\n\\t\\t\\n\\t\\t&amp;, &amp;:before {\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\talign-items: center;\\n\\t\\t\\ttransition: all 0.2s cubic-bezier(.56,.35,0,1.35);\\n\\t\\t}\\n\\t\\t\\n\\t\\t// Round button\\n\\n\\t\\t&amp;:before {\\n\\t\\t\\tcontent: \\\&quot;━━\\\&quot;;\\n\\t\\t\\tfont-size: 14px;\\n\\t\\t\\tcolor: $WM-tertiaryColor;\\n\\t\\t\\tbox-shadow: inset 0px -#{$WM-insetShadowSize} 0px 0px $WM-insetShadowColor;\\n\\t\\t\\theight: $WM-roundButtonSize;\\n\\t\\t\\twidth: $WM-roundButtonSize;\\n\\t\\t\\tborder: 3px solid $WM-secondaryColor;\\n\\t\\t\\tborder-radius: 100%;\\n\\t\\t\\ttransform: rotate(0deg);\\n\\t\\t\\tleft: calc(100% + #{$WM-shift - $WM-width / 2 - $WM-roundButtonSize / 2});\\n\\t\\t}\\n\\t\\t\\n\\t\\t// Washing powder compartment\\n\\t\\t\\n\\t\\t&amp;:after {\\n\\t\\t\\tcontent: \\\&quot;\\\&quot;;\\n\\t\\t\\tleft: calc(100% + #{$WM-shift - $WM-width + $WM-shift});\\n\\t\\t\\tbackground: $WM-insetShadowColor;\\n\\t\\t\\tborder-radius: 3px 3px 10px 10px;\\n\\t\\t\\tborder: 3px solid $WM-secondaryColor;\\n\\t\\t\\tbox-shadow: inset 0 10px 0 0 $WM-secondaryColor;\\n\\t\\t}\\n\\t}\\n\\n\\t// Reused values ――\\n\\n\\t\\t$WM-tubBaseShadow: 0 0 0 7px $WM-insetShadowColor; // Light grey\\n\\n\\t\\t@function doorShadows($inside:transparent, $outside:transparent) {\\n\\t\\t\\t@return inset 5px 10px 0 0 $inside, 5px -1px 0 0  $outside;\\n\\t\\t};\\n\\n\\t// ――\\n\\n\\t#door, #tub { transition: all 0.2s ease-in-out; }\\n\\t\\n\\t#door {\\n\\t\\twidth: $WM-width / $WM-doorRatio;\\n\\t\\theight: $WM-width / $WM-doorRatio;\\n\\t\\tborder: $WM-doorBorderSize solid $WM-tertiaryColor;\\n\\t\\tborder-radius: 50%;\\n\\t\\tposition: absolute;\\n\\t\\tz-index: 1;\\n\\t\\tbox-shadow: doorShadows(rgba(black, 0.1));\\n\\t\\ttransform-origin: 0% 0%;\\n\\t\\ttransform: rotateY(0deg);\\n\\t\\t\\n\\t\\t&amp;:before, &amp;:after {\\n\\t\\t\\tcontent: \\\&quot;\\\&quot;;\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\ttop: 50%;\\n\\t\\t\\ttransform: translateY(-50%);\\n\\t\\t}\\n\\t\\t\\n\\t\\t// Door handle\\n\\t\\t\\n\\t\\t&amp;:after {\\n\\t\\t\\tbackground: darken($WM-tertiaryColor, 10%);\\n\\t\\t\\theight: 50%;\\n\\t\\t\\twidth: 17%;\\n\\t\\t\\tright: 0;\\n\\t\\t\\tborder-radius: 40% 30% 30% 40% / 50% 45% 45% 50%;\\n\\t\\t\\ttransition: all 0.2s ease-in-out;\\n\\t\\t\\tz-index: 3;\\n\\t\\t}\\n\\t\\t\\n\\t\\t// Reflection\\n\\t\\t\\n\\t\\t&amp;:before {\\n\\t\\t\\twidth: 60%;\\n\\t\\t\\theight: 60%;\\n\\t\\t\\tleft: 0;\\n\\t\\t\\tright: 0;\\n\\t\\t\\tmargin: auto;\\n\\t\\t\\tborder-radius: 50%;\\n\\t\\t\\tborder: 5px solid transparent;\\n\\t\\t\\tborder-left: 15px solid white;\\n\\t\\t\\ttransform: translateY(-50%) rotate(45deg);\\n\\t\\t\\topacity: 0.2;\\n\\t\\t\\tbox-shadow: inset -10px 10px 0 0 rgba(white, 0.2);\\n\\t\\t\\tborder-radius: 40% 30% 30% 40% / 50%;\\n\\t\\t\\tz-index: 2;\\n\\t\\t}\\n  }\\n\\n\\t#tub {\\n\\t\\twidth: $WM-width / $WM-doorRatio - $WM-doorBorderSize;\\n\\t\\theight: $WM-width / $WM-doorRatio - $WM-doorBorderSize;\\n\\t\\tbackground: $WM-tubBackground;\\n\\t\\tposition: relative;\\n\\t\\tborder-radius: 50%;\\n\\t\\toverflow: hidden;\\n\\t\\tz-index: 0;\\n\\t\\tbox-shadow: $WM-tubBaseShadow;\\n\\n\\t\\t.clothes {\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\topacity: 0;\\n\\t\\t\\ttransition: all 0.1s ease-in-out;\\n\\t\\t}\\n\\n\\t\\t.clothes:nth-child(1) {\\n\\t\\t\\tbackground: linear-gradient(#48873e, #7b9f17);\\n\\t\\t\\twidth: 70%;\\n\\t\\t\\theight: 25%;\\n\\t\\t\\tbottom: 10%;\\n\\t\\t\\tright: -20%;\\n\\t\\t\\ttransform: rotate(-20deg);\\n\\t\\t\\tborder-radius: 49% 38% 65% 8% / 30% 12% 51% 36%;\\n\\t\\t}\\n\\n\\t\\t.clothes:nth-child(2){\\n\\t\\t\\tbackground: linear-gradient(#c22323, #e15050);\\n\\t\\t\\twidth: 100%;\\n\\t\\t\\theight: 20%;\\n\\t\\t\\tborder-radius: 64% 40% 27% 47% / 63% 63% 32% 36%;\\n\\t\\t\\tbottom: 0;\\n\\t\\t}\\n\\n\\t\\t.clothes:nth-child(3) {\\n\\t\\t\\tbackground: linear-gradient(#5a5589, #4f46b4);\\n\\t\\t\\twidth: 70%;\\n\\t\\t\\theight: 25%;\\n\\t\\t\\ttransform: rotate(40deg);\\n\\t\\t\\tborder-radius: 41% 38% 71% 8% / 51% 36% 51% 24%;\\n\\t\\t\\tbottom: 0;\\n\\t\\t\\tleft: -10%;\\n\\t\\t}\\n\\t}\\n\\n\\t// ACTIONS\\n\\n\\t&amp;.isOpen {\\n\\t\\t#door {\\n\\t\\t\\ttransform: rotateY(45deg);\\n\\t\\t\\tbox-shadow: doorShadows($outside: lighten($WM-tertiaryColor, 20%));\\n\\t\\t\\t\\n\\t\\t\\t// Door handle\\n\\t\\t\\t&amp;:after { box-shadow: 5px -1px 0 0 darken($WM-tertiaryColor, 20%); }\\n\\t\\t}\\n\\t\\t\\n\\t\\t#tub { box-shadow: inset 5px 10px 0 0 rgba(black, 0.1), $WM-tubBaseShadow; }\\n\\t}\\n\\n\\t&amp;.isWashing {\\n\\t\\tanimation-name: shake;\\n\\t\\tanimation-duration: 100ms;\\n\\t\\tanimation-timing-function: ease-in-out;\\n\\t\\tanimation-iteration-count: infinite;\\n\\t\\t\\n\\t\\t#controls:before { transform: rotate(45deg); }\\n\\t\\t\\n\\t\\t#tub {\\n\\t\\t\\tanimation-name: rotate;\\n\\t\\t\\tanimation-duration: $WM-roationSpeed;\\n\\t\\t\\tanimation-timing-function: linear;\\n\\t\\t\\tanimation-iteration-count: infinite;\\n\\t\\t}\\n\\t}\\n\\n\\t&amp;.isFilled #tub .clothes { opacity: 1; }\\n\\n\\t&amp;.isStarting {\\n\\t\\tanimation-duration: 100ms * 2;\\n\\t\\tanimation-timing-function: cubic-bezier(0,-0.01,.61,.01);\\n\\t\\t\\n\\t\\t#tub {\\n\\t\\t\\tanimation-duration: $WM-roationSpeed * 2;\\n\\t\\t\\tanimation-timing-function: cubic-bezier(0,-0.01,.61,.01);\\n\\t\\t}\\n\\t}\\n}\\n\\n\\n// ANIMATIONS ―――――――――――――――――――――――――\\n\\n@keyframes shake {\\n  0%, 100% { transform:  translate(0, 0) rotate(0); }\\n  25%  { transform:  translate(-1.5px, 1.5px) rotate(0.5deg); }\\n  50%  { transform:  translate(-0.5px, -0.5px) rotate(0.5deg); }\\n}\\n\\n@keyframes rotate {\\n  from { transform: rotate(0deg); }\\n  to { transform: rotate(360deg); }\\n}\\n\\n\\n// PLAYGROUND ―――――――――――――――――――――――――\\n\\n#playground {\\n\\tmargin-top: 25px;\\n\\twidth: $WM-width;\\n\\tdisplay: flex;\\n\\t\\n\\tbutton {\\n\\t\\tflex: 1;\\n\\t\\tbackground: #ececf4;\\n\\t\\tborder: none;\\n\\t\\toutline: none;\\n\\t\\tborder-radius: 6px;\\n\\t\\tpadding: 7px 10px;\\n\\t\\tbox-shadow: -1px 2px 0 0 rgba(black, 0.2);\\n\\t\\ttransition: background 0.2s ease-in-out;\\n\\t\\tfont: inherit;\\n\\t\\tfont-size: 0.8em;\\n\\t\\t\\n\\t\\t&amp;#opening { margin: 0 15px; }\\n\\t\\t\\n\\t\\t&amp;:hover:not(:disabled) {\\n\\t\\t\\tbackground: white;\\n\\t\\t\\tcursor: pointer;\\n\\t\\t}\\n\\t\\t\\n\\t\\t&amp;::-moz-focus-inner { border:0; }\\n\\t\\t&amp;:active:not(:disabled) { box-shadow: 0px 1px 0 0 rgba(black, 0.2); }\\n\\t}\\n}\&quot;,\&quot;js\&quot;:\&quot;// VARIABLES ―――――――――――――――――――――――――\\n\\nconst washSpeed = 600; // If changed, need to be updated in the CSS as well\\nconst washingMachine = document.getElementById(&#39;washingMachine&#39;);\\nconst screen = document.getElementById(&#39;controls&#39;);\\n\\nconst status = {\\n\\topening: {\\n\\t\\tisActive: true,\\n\\t\\tstatusClass: &#39;isOpen&#39;,\\n\\t\\tcontroller: document.getElementById(&#39;opening&#39;),\\n\\t\\tcontrollerLabel: [\\\&quot;CLOSE\\\&quot;, \\\&quot;OPEN\\\&quot;]\\n\\t},\\n\\tcontent: {\\n\\t\\tisActive: true,\\n\\t\\tstatusClass:&#39;isFilled&#39;,\\n\\t\\tcontroller: document.getElementById(&#39;content&#39;),\\n\\t\\tcontrollerLabel: [\\\&quot;EMPTY\\\&quot;, \\\&quot;FILL\\\&quot;]\\n\\t},\\n\\tpower: {\\n\\t\\tisActive: false,\\n\\t\\tstatusClass: &#39;isWashing&#39;,\\n\\t\\tcontroller: document.getElementById(&#39;power&#39;),\\n\\t\\tcontrollerLabel: [\\\&quot;STOP\\\&quot;, \\\&quot;START\\\&quot;]\\n\\t}\\n};\\n\\n\\n// PLAYGROUND ―――――――――――――――――――――――――\\n\\nfor (let action in status) {\\n\\tconst { statusClass, controller, controllerLabel } = status[action];\\n\\t\\n\\tcontroller.addEventListener(&#39;click&#39;, function(event) {\\n\\t\\tconst { isActive } = status[action];\\n\\t\\twashingMachine.classList.toggle(statusClass);\\n\\t\\tthis.innerHTML = controllerLabel[isActive*1];\\n\\t\\t\\n\\t\\tif(action === \\\&quot;power\\\&quot; &amp;&amp; !isActive) { // Slow start\\n\\t\\t\\twashingMachine.classList.add(statusClass);\\n\\t\\t\\twashingMachine.classList.add(\\\&quot;isStarting\\\&quot;);\\n\\t\\t\\tsetTimeout(() =&gt; { washingMachine.classList.remove(\\\&quot;isStarting\\\&quot;); }, washSpeed * 2);\\n\\t\\t}\\n\\t\\t\\n\\t\\tstatus[action].isActive = !isActive;\\n\\t\\t\\n\\t\\tsetTimeout(function() {\\n\\t\\t\\tupdateMachine();\\n\\t\\t}, 100); // Timeout needed because of a bug on FF when updating innerHTML\\n\\t});\\n}\\n\\nfunction updateMachine() {\\t\\n\\tconst { opening, content, power } = status;\\n\\t\\n\\t// Update playground\\n\\t\\n\\topening.controller.disabled = power.isActive;\\n\\tcontent.controller.disabled = !opening.isActive;\\n\\tpower.controller.disabled = opening.isActive || !content.isActive;\\n\\t\\n\\t// Update screen text\\n\\t\\n\\tif(power.isActive) {\\n\\t\\tscreen.innerHTML = \\\&quot;💦\\\&quot;\\n\\t} else if(!content.isActive) {\\n\\t\\tscreen.innerHTML = \\\&quot;EMPTY\\\&quot;;\\n\\t} else if (opening.isActive) {\\n\\t\\t\\tscreen.innerHTML = \\\&quot;🙃\\\&quot;;\\n\\t} else {\\n\\t\\tscreen.innerHTML = \\\&quot;READY\\\&quot;;\\n\\t}\\n}\&quot;,\&quot;html_pre_processor\&quot;:\&quot;none\&quot;,\&quot;css_pre_processor\&quot;:\&quot;scss\&quot;,\&quot;js_pre_processor\&quot;:\&quot;babel\&quot;,\&quot;html_classes\&quot;:\&quot;\&quot;,\&quot;css_starter\&quot;:\&quot;neither\&quot;,\&quot;js_library\&quot;:null,\&quot;created_at\&quot;:\&quot;2019-06-28T12:15:18.000Z\&quot;,\&quot;updated_at\&quot;:\&quot;2019-09-23T14:44:53.000Z\&quot;,\&quot;title\&quot;:\&quot;CSS Washing machine\&quot;,\&quot;description\&quot;:\&quot;Another thing for my co-worker!\&quot;,\&quot;slug_hash\&quot;:\&quot;YoYNve\&quot;,\&quot;head\&quot;:\&quot;\&quot;,\&quot;private\&quot;:false,\&quot;has_animation\&quot;:true,\&quot;team_id\&quot;:0,\&quot;css_prefix\&quot;:\&quot;neither\&quot;,\&quot;template\&quot;:false,\&quot;parent_id\&quot;:0,\&quot;comments_count\&quot;:0,\&quot;custom_screenshot_filename\&quot;:null,\&quot;loves_count\&quot;:0,\&quot;pick\&quot;:false,\&quot;popularity_score\&quot;:0,\&quot;views_count\&quot;:0,\&quot;pick_visible_at\&quot;:null,\&quot;cpid\&quot;:\&quot;016b9e02-e3f0-7b4f-841e-7fc8dd64e558\&quot;,\&quot;is_new_editor_pen\&quot;:false,\&quot;protected\&quot;:false,\&quot;access\&quot;:\&quot;Public\&quot;,\&quot;pen_hash\&quot;:null}&quot;,&quot;__layoutType&quot;:&quot;left&quot;,&quot;__pageType&quot;:&quot;pen&quot;,&quot;__profiled&quot;:{&quot;base_url&quot;:&quot;/Arkellys&quot;,&quot;hashid&quot;:&quot;kNgNdK&quot;,&quot;id&quot;:1547401,&quot;name&quot;:&quot;Arkellys&quot;,&quot;type&quot;:&quot;user&quot;,&quot;username&quot;:&quot;Arkellys&quot;},&quot;__processorsMap&quot;:{&quot;autoprefixer&quot;:&quot;autoprefixer-10&quot;,&quot;babel&quot;:&quot;babel-7&quot;,&quot;coffeescript&quot;:&quot;coffeescript-2&quot;,&quot;format-1&quot;:&quot;format-1&quot;,&quot;flutter&quot;:&quot;flutter-1&quot;,&quot;haml&quot;:&quot;haml-4&quot;,&quot;less&quot;:&quot;less-3&quot;,&quot;lint-1&quot;:&quot;lint-1&quot;,&quot;livescript&quot;:&quot;livescript-1&quot;,&quot;markdown&quot;:&quot;markdown-11&quot;,&quot;postcss&quot;:&quot;postcss-7&quot;,&quot;pug&quot;:&quot;pug-2&quot;,&quot;sass&quot;:&quot;sass-1&quot;,&quot;scss&quot;:&quot;sass-1&quot;,&quot;sass-ruby-3&quot;:&quot;sass-ruby-3&quot;,&quot;sass-ruby-compass-3&quot;:&quot;sass-ruby-compass-3&quot;,&quot;slim&quot;:&quot;slim-3&quot;,&quot;stylus&quot;:&quot;stylus-0&quot;,&quot;typescript&quot;:&quot;typescript-4&quot;,&quot;vue&quot;:&quot;vue-2&quot;,&quot;vue3&quot;:&quot;vue-3&quot;},&quot;__rtData&quot;:&quot;{\&quot;maxMembers\&quot;:0,\&quot;roomID\&quot;:\&quot;YoYNve/live\&quot;,\&quot;roomType\&quot;:\&quot;live\&quot;,\&quot;updatedAt\&quot;:1569249893,\&quot;user\&quot;:{\&quot;id\&quot;:\&quot;apVaOQ\&quot;,\&quot;hashid\&quot;:\&quot;apVaOQ\&quot;,\&quot;name\&quot;:\&quot;Jacco Fluks\&quot;,\&quot;username\&quot;:\&quot;Jacco-Fluks\&quot;,\&quot;role\&quot;:\&quot;editor\&quot;}}&quot;,&quot;__eijs&quot;:&quot;https://cpwebassets.codepen.io/assets/embed/ei.js&quot;,&quot;__favicon_mask_icon&quot;:&quot;https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg&quot;,&quot;__favicon_shortcut_icon&quot;:&quot;https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico&quot;,&quot;__path_to_iframe_console_runner&quot;:&quot;https://cpwebassets.codepen.io/assets/editor/iframe/iframeConsoleRunner-6d8bf8b4b479137260842506acbb12717dace0823c023e08b96360e60b0840d9.js&quot;,&quot;__path_to_iframe_refresh_css&quot;:&quot;https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-44fe83e49b63affec96918c9af88c0d80b209a862cf87ac46bc933074b8c557d.js&quot;,&quot;__path_to_iframe_runtime_errors&quot;:&quot;https://cpwebassets.codepen.io/assets/editor/iframe/iframeRuntimeErrors-4f205f2c14e769b448bcf477de2938c681660d5038bc464e3700256713ebe261.js&quot;,&quot;__path_to_processor_worker&quot;:&quot;https://cpwebassets.codepen.io/assets/packs/router.js&quot;,&quot;__path_to_stop_execution_on_timeout&quot;:&quot;https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js&quot;,&quot;__pen_normalize_css_url&quot;:&quot;https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css&quot;,&quot;__pen_prefix_free_url&quot;:&quot;https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js&quot;,&quot;__pen_reset_css_url&quot;:&quot;https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css&quot;,&quot;__path_to_infinite_loop_detection&quot;:&quot;https://cpwebassets.codepen.io/assets/packs/js/infiniteLoopDetection-df943f36593958620c0e.js&quot;,&quot;__theme_url_twilight&quot;:&quot;https://cpwebassets.codepen.io/assets/editor/themes/twilight-8ea74c444cf457f9a50f818792c3de6bb5f118202377c4fb1b7b1cc973b4070c.css&quot;,&quot;__theme_url_solarized_dark&quot;:&quot;https://cpwebassets.codepen.io/assets/editor/themes/solarized-dark-fb5f1d9830f978169ccce3168b12ab1db5a2150702c168a4ae99630a7eab9fd9.css&quot;,&quot;__theme_url_tomorrow_night&quot;:&quot;https://cpwebassets.codepen.io/assets/editor/themes/tomorrow-night-47f38e0b6072782710073c0d119a885f8d8fa9515f51e4f505fd3bdd13002947.css&quot;,&quot;__theme_url_oceanic_dark&quot;:&quot;https://cpwebassets.codepen.io/assets/editor/themes/oceanic-dark-f52b71e393c57905043f6b691ab7e1f491644da39690fb7b0bc6f244284d956e.css&quot;,&quot;__theme_url_panda&quot;:&quot;https://cpwebassets.codepen.io/assets/editor/themes/panda-f1cb92c10b4aa39b6dcfa03738a84d2b4f8f0f90e72a42e88e601e73ce68c465.css&quot;,&quot;__theme_url_duotone_dark&quot;:&quot;https://cpwebassets.codepen.io/assets/editor/themes/duotone-dark-ebb2df4d1eb94f28c8a900aaa234137ffa559c23c012e779b8d16544ec3ed490.css&quot;,&quot;__theme_url_highcontrast_dark&quot;:&quot;https://cpwebassets.codepen.io/assets/editor/themes/highcontrast-dark-43cc852ab2f3e457c307da9f3e1f495548ff74097f5264fcdb5b3632fa584daf.css&quot;,&quot;__theme_url_classic&quot;:&quot;https://cpwebassets.codepen.io/assets/editor/themes/classic-6770b62f70ce50d8f8d2a29fc7d01d2d21d02b883c46f34d5a9e59b250acb5aa.css&quot;,&quot;__theme_url_solarized_light&quot;:&quot;https://cpwebassets.codepen.io/assets/editor/themes/solarized-light-9a16c7bf92fa36dae8d89a45cb19833b040cd6df25fc357784fb8903b2c9af10.css&quot;,&quot;__theme_url_xq_light&quot;:&quot;https://cpwebassets.codepen.io/assets/editor/themes/xq-light-69c7b1c747987916ce33e1e98437272ea59073bf7db6c68a7585751bfa328ab6.css&quot;,&quot;__theme_url_oceanic_light&quot;:&quot;https://cpwebassets.codepen.io/assets/editor/themes/oceanic-light-b47baf704e0fabfb3f2b207ec6d26501af134aabe292c319b5adb5ddae937066.css&quot;,&quot;__theme_url_mdn_like&quot;:&quot;https://cpwebassets.codepen.io/assets/editor/themes/mdn-like-5380d1257ad92137adf1916272e32aad24d45f8577ca6a693cc0b871a8cbdfbe.css&quot;,&quot;__theme_url_duotone_light&quot;:&quot;https://cpwebassets.codepen.io/assets/editor/themes/duotone-light-f66b494986164c775a9f4a61c574a8d59ffbddbd2ba7dd0e2e299567e1f73f5c.css&quot;,&quot;__theme_url_highcontrast_light&quot;:&quot;https://cpwebassets.codepen.io/assets/editor/themes/highcontrast-light-40c9a2a28c9c383affad477c0e981cfa90d97da029a9c78e1bacfa0ae8302314.css&quot;,&quot;__theme_url_scoped_twilight&quot;:&quot;https://cpwebassets.codepen.io/assets/editor/themes/scoped/twilight-9b183fa39a2199e3f075a5b25535f79e92968183addaf780b60e2381c242681f.css&quot;,&quot;__theme_url_scoped_solarized_dark&quot;:&quot;https://cpwebassets.codepen.io/assets/editor/themes/scoped/solarized-dark-2e3da440b4e41b34d96f70368459e6c4ea4f83f134495b1de1279bec56510437.css&quot;,&quot;__theme_url_scoped_tomorrow_night&quot;:&quot;https://cpwebassets.codepen.io/assets/editor/themes/scoped/tomorrow-night-bd9c982da80e4cbb970cef65e70c09dd1f3d543125c7480b5a7068ecc249f813.css&quot;,&quot;__theme_url_scoped_oceanic_dark&quot;:&quot;https://cpwebassets.codepen.io/assets/editor/themes/scoped/oceanic-dark-dfb87a42c99a8c092fcd97bbd4e7afb8e15b0cd7fccbe4aedd3765774a053443.css&quot;,&quot;__theme_url_scoped_panda&quot;:&quot;https://cpwebassets.codepen.io/assets/editor/themes/scoped/panda-263a3c336073cce95c9b6158a68a4eb165704bd967e6c58cb779e4e8c84b96c1.css&quot;,&quot;__theme_url_scoped_duotone_dark&quot;:&quot;https://cpwebassets.codepen.io/assets/editor/themes/scoped/duotone-dark-815c104921cc5fcce373bf8b58c825049571b90404152b2ab4991f13c9d62b8a.css&quot;,&quot;__theme_url_scoped_highcontrast_dark&quot;:&quot;https://cpwebassets.codepen.io/assets/editor/themes/scoped/highcontrast-dark-7ab54e0cb944b71eaf6b5149ffcfe07aca0b4ee5381edfe868111a8a525fa8de.css&quot;,&quot;__theme_url_scoped_classic&quot;:&quot;https://cpwebassets.codepen.io/assets/editor/themes/scoped/classic-061457a5ac602b1e9f0a405cfc9094b8bb8faa3e3b00d1c0d0777e056eee9910.css&quot;,&quot;__theme_url_scoped_solarized_light&quot;:&quot;https://cpwebassets.codepen.io/assets/editor/themes/scoped/solarized-light-47b66fd7a5fb1811808ca3e6bb73a2379e1c0b056394967ca14f73f2adb345f9.css&quot;,&quot;__theme_url_scoped_xq_light&quot;:&quot;https://cpwebassets.codepen.io/assets/editor/themes/scoped/xq-light-060b5af2d01daa3de9a99394ae7c103f926939ad4d31afb86d5cd1d07aa87f16.css&quot;,&quot;__theme_url_scoped_oceanic_light&quot;:&quot;https://cpwebassets.codepen.io/assets/editor/themes/scoped/oceanic-light-f4de83d7709e2f4cc4c2d725fdf9f99e8450df5db5bafa17e84ba01fefd1329f.css&quot;,&quot;__theme_url_scoped_mdn_like&quot;:&quot;https://cpwebassets.codepen.io/assets/editor/themes/scoped/mdn-like-e676eadf8d9291d35266600772b548381208757fadba37f0640864f8d92bc32b.css&quot;,&quot;__theme_url_scoped_duotone_light&quot;:&quot;https://cpwebassets.codepen.io/assets/editor/themes/scoped/duotone-light-e7d4a5c143a236e253db935af0dadc9c12c8ece88daae01055760ddd401c2b31.css&quot;,&quot;__theme_url_scoped_highcontrast_light&quot;:&quot;https://cpwebassets.codepen.io/assets/editor/themes/scoped/highcontrast-light-f52c03c6b3ebbcd5a58e8b1659abf09916db74d8aa275372cacbf8ce05cbf0db.css&quot;}</textarea>
<script src="https://cpwebassets.codepen.io/assets/common/browser_support-2c1a3d31dbc6b5746fb7dacdbc81dd613906db219f13147c66864a6c3448246c.js"></script>
<script src="https://cpwebassets.codepen.io/assets/common/everypage-b1fe1ca71dab80c49b8e5ebed21506a80cb6fe64ecaa8c6dddae5aca7b1e34d7.js"></script>
<script src="https://cpwebassets.codepen.io/assets/packs/js/vendor-7c30cf8d3fdf1182c3fb.chunk.js"></script>
<script src="https://cpwebassets.codepen.io/assets/packs/js/1-8af552c96b4c8caf9980.chunk.js"></script>
<script src="https://cpwebassets.codepen.io/assets/packs/js/everypage-75b15b887a92b7f5e436.js"></script>
<script src="https://cpwebassets.codepen.io/assets/packs/js/vendor-7c30cf8d3fdf1182c3fb.chunk.js"></script>
<script src="https://cpwebassets.codepen.io/assets/packs/js/1-8af552c96b4c8caf9980.chunk.js"></script>
<script src="https://cpwebassets.codepen.io/assets/packs/js/processorRouter-c818faa77d403f258f38.js"></script>
<script src="https://static.filestackapi.com/filestack-js/3.x.x/filestack.min.js"></script>
<script src="https://cpwebassets.codepen.io/assets/editor/global/commonLibs-18d595d95e5894ceae5661c7e40deeca7df254309b42f89edce76949b15a0f31.js"></script>
<script src="https://cpwebassets.codepen.io/assets/editor/global/codemirror-e628acccbc140ed80f9daa48b5e64c775855e64a41d7fad48e7583a7819aa9d6.js"></script>
<script src="https://cpwebassets.codepen.io/assets/libs/emmet-codemirror-plugin-f3955bea0403e8137caacd73a1e42bb551794f7ce15ae59103c64a2736b2757c.js"></script>
<script src="https://cpwebassets.codepen.io/assets/editor/pen/index-3bdffcc6ea191c778f00e1fabe3c5e238c123d4cd48e6fedc377b46ad1706c80.js"></script>
</body>
</html>