Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="sizeControl" class="controller">
  Block size: <span id="size"></span>
  <span id="plus">+</span>
  <span id="minus">-</span>
  <br><br>
  Border radius:
  <span id="border"></span>
  <br><br>
  Click to swing Guybrush: <span id="anim" data-anijs="if:click, do: swing animated, to: #guybrush"></span>
</div>
<div id="guybrush" class="guybrush char"></div>

<img src="http://media-cache-ec0.pinimg.com/736x/0e/e2/25/0ee225463b4f337b3572a518c3477910.jpg" style="float:right; width:350px; margin-top:-385px; display:none;">
              
            
!

CSS

              
                $smartphone: "only screen and (min-device-width : 320px) and (max-device-width : 480px)";
$smartphoneLandscape: "only screen and (min-width : 321px)";
$smartphonePortrait: "only screen and (max-width : 320px)";
$iPad: "only screen and (min-device-width : 768px) and (max-device-width : 1024px)";
$iPadLandscape: "only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)";
$iPadPortrait: "only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)";
$desktop: "only screen and (min-width : 1224px)";
$desktopXL: "only screen and (min-width : 1824px)";
$iPhone4: "only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5)";


@mixin respond-to($media) {
  @if $media == smartphone {
    @media #{$smartphone} { @content; }
  }
  @else if $media == smartphoneLandscape {
    @media #{$smartphoneLandscape} { @content; }
  }
  @else if $media == smartphonePortrait {
    @media #{$smartphonePortrait} { @content; }
  }
  @if $media == iPad {
    @media #{$iPad} { @content; }
  }
  @else if $media == iPadLandscape {
    @media #{$iPadLandscape} { @content; }
  }
  @else if $media == iPadPortrait {
    @media #{$iPadPortrait} { @content; }
  }
  @if $media == desktop {
    @media #{$desktop} { @content; }
  }
  @else if $media == desktopXL {
    @media #{$desktopXL} { @content; }
  }
  @else if $media == iPhone4 {
    @media #{$iPhone4} { @content; }
  }
}


body {background:#999990}

p {
  font-family: 'Press Start 2P', cursive;
  color:purple;
}

.char {
  font-size: 4px; /* Control block size */ 
  position: absolute;
  left: 30%;
  top: 0;
  z-index:0;
  // @include respond-to(smartphonePortrait) { font-size: 8px; };
  // @include respond-to(smartphoneLandscape) { font-size: 12px; };
  // @include respond-to(desktopXL) { font-size: 4px; };
}
.border::before {border-radius:1px;}

.controller {
  font-family: Arial, sans-serif;
  font-size:15px;
  font-weight:bold;
  color:#000;
  position:absolute;
  margin:15px;
  z-index:10;
  SPAN {
    box-sizing: border-box;
    border:1px solid #000;
    width:20px;
    height:20px;
    display:inline-block;
    text-align:center;
    vertical-align:middle;
    cursor:pointer;
    &:first-child {
      border:0;
      margin-right:10px;
      cursor:default;
      &:hover {
        background-color:#999990;
        color:#000;
      }
    }
    &:hover{
      background-color:#000;
      color:#999990;
    }
  }
}

.guybrush::before {
content : '';
display : block;
width   : 1em;
height  : 1em;
margin  : -1em 0 0 -1em;
}

.guybrush::before{
box-shadow:
  12em 1em #fff,
  12em 2em #fff,
  12em 3em #fff,
  12em 4em #fff,
  12em 5em #fff,
  12em 6em #fff,
  12em 7em #fff,
  12em 8em #fff,
  12em 9em #fff,
  12em 10em #fff,
  12em 11em #fff,
  12em 12em #fff,
  12em 13em #fff,
  12em 14em #fff,
  12em 15em #fff,
  12em 16em #fff,
  12em 17em #fff,
  12em 18em #fff,
  12em 19em #fff,
  12em 20em #fff, 13em 20em #ffcccc,
  10em 21em #ffcccc, 11em 21em #f9ece3, 12em 21em #f9ece3, 13em 21em #ffcccc,
  10em 22em #ffcccc, 11em 22em #f9ece3, 12em 22em #f9ece3, 13em 22em #ffcccc,
  10em 23em #ffcccc, 11em 23em #f9ece3, 12em 23em #f9ece3, 13em 23em #ffcccc,
  11em 24em #ffd700, 12em 24em #f9ece3, 13em 24em #ffcccc,
  11em 25em #ffd700, 12em 25em #fff, 13em 25em #ffd700,
  11em 26em #8f476b, 12em 26em #fff, 13em 26em #ffd700,
  11em 27em #ffd700, 12em 27em #fff, 13em 27em #8f476b, 14em 27em #8f476b,
  10em 28em #6699ff, 11em 28em #6699ff, 12em 28em #fff, 13em 28em #ffd700, 14em 28em #ffd700,
  10em 29em #6699ff, 11em 29em #fff, 12em 29em #0033cc, 13em 29em #0033cc, 14em 29em #0033cc,
  10em 30em #6699ff, 11em 30em #fff, 12em 30em #6699ff, 13em 30em #0033cc, 14em 30em #0033cc,
  10em 31em #6699ff, 11em 31em #fff, 12em 31em #6699ff, 13em 31em #0033cc, 14em 31em #0033cc,
  10em 32em #6699ff, 11em 32em #fff, 12em 32em #0033cc, 13em 32em #6699ff, 14em 32em #0033cc,
  10em 33em #6699ff, 11em 33em #0033cc, 12em 33em #0033cc, 13em 33em #0033cc, 14em 33em #0033cc, 15em 33em #0033cc,
  10em 34em #6699ff, 11em 34em #0033cc, 12em 34em #0033cc, 13em 34em #0033cc, 14em 34em #0033cc, 15em 34em #0033cc,
  3em 35em #ba8867, 4em 35em #ba8867, 5em 35em #ba8867, 6em 35em #ba8867, 7em 35em #ba8867, 8em 35em #ba8867, 9em 35em #ba8867, 10em 35em #6699ff, 11em 35em #6699ff, 12em 35em #0033cc, 13em 35em #0033cc, 14em 35em #0033cc, 15em 35em #0033cc,
 2em 36em #ba8867, 3em 36em #ba8867, 4em 36em #cc9966, 5em 36em #cc9966, 6em 36em #b77677, 7em 36em #b77677, 8em 36em #ba8867, 9em 36em #6699ff, 10em 36em #6699ff, 11em 36em #6699ff, 12em 36em #6699ff, 13em 36em #0033cc, 14em 36em #0033cc, 15em 36em #0033cc,
  1em 37em #ba8867, 2em 37em #b77677, 3em 37em #b77677, 4em 37em #b77677, 5em 37em #b77677, 6em 37em #ba8867, 7em 37em #ba8867, 8em 37em #cc9966, 9em 37em #6699ff, 10em 37em #6699ff, 11em 37em #6699ff, 12em 37em #6699ff, 13em 37em #6699ff, 14em 37em #0033cc, 15em 37em #0033cc,
  0em 38em #ba8867, 1em 38em #b77677, 2em 38em #b77677, 3em 38em #b77677, 4em 38em #ffcccc, 5em 38em #ffcccc, 6em 38em #ba8867, 7em 38em #cc9966, 8em 38em #cc9966, 9em 38em #6699ff, 10em 38em #6699ff, 11em 38em #6699ff, 12em 38em #0033cc, 13em 38em #0033cc, 14em 38em #0033cc, 15em 38em #0033cc,
  2em 39em #cc9966, 3em 39em #b77677, 4em 39em #b77677, 5em 39em #ffcccc, 6em 39em #ffcccc, 7em 39em #ba8867, 8em 39em #ba8867, 9em 39em #6699ff, 10em 39em #6699ff, 11em 39em #6699ff, 12em 39em #6699ff, 13em 39em #0033cc, 14em 39em #0033cc, 15em 39em #0033cc,
  2em 40em #cc9966, 3em 40em #cc9966, 4em 40em #000, 5em 40em #ffcccc, 6em 40em #ffcccc, 7em 40em #b77677, 8em 40em #b77677, 9em 40em #6699ff, 10em 40em #6699ff, 11em 40em #6699ff, 12em 40em #6699ff, 13em 40em #6699ff, 14em 40em #0033cc, 15em 40em #0033cc, 16em 40em #0033cc,
  1em 41em #ffcccc, 2em 41em #ffcccc, 3em 41em #ffcccc, 4em 41em #ffcccc, 5em 41em #ffcccc, 6em 41em #ffcccc, 7em 41em #ffcccc, 8em 41em #ffcccc, 9em 41em #6699ff, 10em 41em #6699ff, 11em 41em #6699ff, 12em 41em #0033cc, 13em 41em #0033cc, 14em 41em #0033cc, 15em 41em #0033cc, 16em 41em #0033cc,
  2em 42em #cc9966, 3em 42em #cc9966, 4em 42em #ffcccc, 5em 42em #ffcccc, 6em 42em #ffcccc, 7em 42em #ffcccc, 8em 42em #ffcccc, 9em 42em #0033cc, 10em 42em #6699ff, 11em 42em #6699ff, 12em 42em #6699ff, 13em 42em #0033cc, 14em 42em #0033cc, 15em 42em #6699ff, 16em 42em #0033cc,
  3em 43em #ba8867, 4em 43em #cc9966, 5em 43em #ffcccc, 6em 43em #ffcccc, 7em 43em #ffcccc, 8em 43em #b77677, 9em 43em #0033cc, 10em 43em #0033cc, 11em 43em #6699ff, 12em 43em #6699ff, 13em 43em #6699ff, 14em 43em #6699ff, 15em 43em #6699ff, 16em 43em #0033cc,
  3em 44em #ffcccc, 4em 44em #cc9966, 5em 44em #ffcccc, 6em 44em #cc9966, 7em 44em #cc9966, 8em 44em #b77677, 9em 44em #cc6666, 10em 44em #6699ff, 11em 44em #0033cc, 12em 44em #6699ff, 13em 44em #6699ff, 14em 44em #6699ff, 15em 44em #0033cc, 16em 44em #0033cc, 17em 44em #0033cc, 18em 44em #0033cc,
  3em 45em #ba8867, 4em 45em #ba8867, 5em 45em #ba8867, 6em 45em #ffcccc, 7em 45em #ffcccc, 8em 45em #8f476b, 9em 45em #cc6666, 10em 45em #6699ff, 11em 45em #6699ff, 12em 45em #0033cc, 13em 45em #0033cc, 14em 45em #0033cc, 15em 45em #0033cc, 16em 45em #0033cc, 17em 45em #0033cc, 18em 45em #0033cc,
  6em 46em #ffcccc, 7em 46em #ffcccc, 8em 46em #fff, 9em 46em #8f476b, 10em 46em #cc6666, 11em 46em #6699ff, 12em 46em #6699ff, 13em 46em #6699ff, 14em 46em #6699ff, 15em 46em #0033cc, 16em 46em #0033cc, 17em 46em #0033cc, 18em 46em #0033cc, 19em 46em #0033cc, 20em 46em #0033cc,
  6em 47em #cc6666, 7em 47em #ffcccc, 8em 47em #ffcccc, 9em 47em #8f476b, 10em 47em #cc6666, 11em 47em #cc6666, 12em 47em #6699ff, 13em 47em #6699ff, 14em 47em #6699ff, 15em 47em #6699ff, 16em 47em #6699ff, 17em 47em #6699ff, 18em 47em #6699ff, 19em 47em #6699ff, 20em 47em #0033cc, 21em 47em #0033cc, 22em 47em #0033cc, 
  6em 48em #cc6666, 7em 48em #fff, 8em 48em #ffcccc, 9em 48em #fff, 10em 48em #fff, 11em 48em #cc6666, 12em 48em #8f476b, 13em 48em #0033cc, 14em 48em #0033cc, 15em 48em #6699ff, 16em 48em #6699ff, 17em 48em #0033cc, 18em 48em #0033cc, 19em 48em #0033cc, 20em 48em #0033cc, 21em 48em #0033cc, 22em 48em #0033cc, 23em 48em #6699ff, 24em 48em #6699ff,
  6em 49em #cc6666, 7em 49em #cc6666, 8em 49em #fff, 9em 49em #ffcccc, 10em 49em #fff, 11em 49em #8f476b, 12em 49em #ffd700, 13em 49em #8f476b, 14em 49em #0033cc, 15em 49em #0033cc, 16em 49em #6699ff, 17em 49em #6699ff, 18em 49em #6699ff, 19em 49em #6699ff, 20em 49em #6699ff, 21em 49em #6699ff, 22em 49em #6699ff, 23em 49em #6699ff, 24em 49em #6699ff, 25em 49em #0033cc,  
  6em 50em #0033cc, 7em 50em #cc6666, 8em 50em #fff, 9em 50em #fff, 10em 50em #fff, 11em 50em #8f476b, 12em 50em #cc6666, 13em 50em #8f476b, 14em 50em #0033cc, 15em 50em #0033cc, 16em 50em #0033cc, 17em 50em #0033cc, 18em 50em #0033cc, 19em 50em #0033cc, 20em 50em #6699ff, 21em 50em #6699ff, 22em 50em #6699ff, 23em 50em #6699ff, 24em 50em #0033cc, 25em 50em #0033cc,
  6em 51em #6699ff, 7em 51em #cc6666, 8em 51em #cc6666, 9em 51em #fff, 10em 51em #fff, 11em 51em #8f476b, 12em 51em #cc6666, 13em 51em #ffd700, 14em 51em #8f476b, 15em 51em #0033cc, 16em 51em #0033cc, 17em 51em #0033cc, 18em 51em #0033cc, 19em 51em #0033cc, 20em 51em #0033cc, 21em 51em #0033cc, 22em 51em #0033cc, 23em 51em #0033cc, 24em 51em #0033cc, 25em 51em #0033cc,
  6em 52em #6699ff, 7em 52em #cc6666, 8em 52em #cc6666, 9em 52em #666, 10em 52em #fff, 11em 52em #fff, 12em 52em #8f476b, 13em 52em #fff, 14em 52em #cc6666, 15em 52em #8f476b, 16em 52em #0033cc, 17em 52em #6699ff, 18em 52em #6699ff, 19em 52em #0033cc, 20em 52em #0033cc, 21em 52em #0033cc, 22em 52em #0033cc, 23em 52em #0033cc, 24em 52em #0033cc, 25em 52em #0033cc, 26em 52em #0033cc,
  7em 53em #6699ff, 8em 53em #cc6666, 9em 53em #666, 10em 53em #666, 11em 53em #fff, 12em 53em #8f476b, 13em 53em #fff, 14em 53em #f9c494, 15em 53em #8f476b, 16em 53em #0033cc, 17em 53em #6699ff, 18em 53em #6699ff, 19em 53em #6699ff, 20em 53em #6699ff, 21em 53em #0033cc, 22em 53em #0033cc, 23em 53em #0033cc, 24em 53em #0033cc, 25em 53em #0033cc, 26em 53em #0033cc,
  7em 54em #0033cc, 8em 54em #6699ff, 9em 54em #cc6666, 10em 54em #6699ff, 11em 54em #0033cc, 12em 54em #0033cc, 13em 54em #fff, 14em 54em #cc6666, 15em 54em #8f476b, 16em 54em #0033cc, 17em 54em #0033cc, 18em 54em #0033cc, 19em 54em #6699ff, 20em 54em #6699ff, 21em 54em #6699ff, 22em 54em #6699ff, 23em 54em #6699ff, 24em 54em #6699ff, 25em 54em #6699ff, 26em 54em #6699ff, 27em 54em #666699,
  7em 55em #6699ff, 8em 55em #0033cc, 9em 55em #cc6666, 10em 55em #6699ff, 11em 55em #0033cc, 12em 55em #0033cc, 13em 55em #0033cc, 14em 55em #0033cc, 15em 55em #cc6666, 16em 55em #0033cc, 17em 55em #0033cc, 18em 55em #0033cc, 19em 55em #0033cc, 20em 55em #6699ff, 21em 55em #6699ff, 22em 55em #6699ff, 23em 55em #6699ff, 24em 55em #6699ff, 25em 55em #0033cc, 26em 55em #0033cc, 27em 55em #666699,
  7em 56em #6699ff, 8em 56em #6699ff, 9em 56em #cc6666, 10em 56em #0033cc, 11em 56em #6699ff, 12em 56em #0033cc, 13em 56em #0033cc, 14em 56em #0033cc, 15em 56em #0033cc, 16em 56em #ffd700, 17em 56em #0033cc, 18em 56em #0033cc, 19em 56em #0033cc, 20em 56em #0033cc, 21em 56em #0033cc, 22em 56em #0033cc, 23em 56em #0033cc, 24em 56em #0033cc, 25em 56em #0033cc, 26em 56em #666699, 27em 56em #666699,
  7em 57em #6699ff, 8em 57em #6699ff, 9em 57em #6699ff, 10em 57em #cc6666, 11em 57em #0033cc, 12em 57em #0033cc, 13em 57em #0033cc, 14em 57em #0033cc, 15em 57em #0033cc, 16em 57em #0033cc, 17em 57em #cc6666, 18em 57em #0033cc, 19em 57em #0033cc, 20em 57em #0033cc, 21em 57em #0033cc, 22em 57em #0033cc, 23em 57em #0033cc, 24em 57em #0033cc, 25em 57em #666699, 26em 57em #333366, 27em 57em #333366,
  7em 58em #6699ff, 8em 58em #0033cc, 9em 58em #6699ff, 10em 58em #cc6666, 11em 58em #0033cc, 12em 58em #0033cc, 13em 58em #0033cc, 14em 58em #0033cc, 15em 58em #0033cc, 16em 58em #0033cc, 17em 58em #000, 18em 58em #ffd700, 19em 58em #0033cc, 20em 58em #0033cc, 21em 58em #0033cc, 22em 58em #0033cc, 23em 58em #0033cc, 24em 58em #ffd700, 25em 58em #666699, 26em 58em #333366, 27em 58em #993366, 28em 58em #cc6666, 29em 58em #cc6666, 30em 58em #cc6666,
  7em 59em #6699ff, 8em 59em #6699ff, 9em 59em #0033cc, 10em 59em #0033cc, 11em 59em #cc6666, 12em 59em #0033cc, 13em 59em #0033cc, 14em 59em #0033cc, 15em 59em #0033cc, 16em 59em #0033cc, 17em 59em #0033cc, 18em 59em #cc6666, 19em 59em #0033cc, 20em 59em #0033cc, 21em 59em #0033cc, 22em 59em #0033cc, 23em 59em #0033cc, 24em 59em #666699, 25em 59em #333366, 26em 59em #333366, 27em 59em #cc6666, 28em 59em #cc6666, 29em 59em #cc6666, 30em 59em #cc6666, 31em 59em #333366, 32em 59em #993366, 33em 59em #993366,
  8em 60em #6699ff, 9em 60em #6699ff, 10em 60em #0033cc, 11em 60em #cc6666, 12em 60em #0033cc, 13em 60em #0033cc, 14em 60em #0033cc, 15em 60em #0033cc, 16em 60em #0033cc, 17em 60em #666699, 18em 60em #cc6666, 19em 60em #0033cc, 20em 60em #0033cc, 21em 60em #0033cc, 22em 60em #0033cc, 23em 60em #ffd700, 24em 60em #666699, 25em 60em #333366, 26em 60em #333366, 27em 60em #cc6666, 28em 60em #993366, 29em 60em #993366, 30em 60em #cc6666, 31em 60em #333366, 32em 60em #993366, 33em 60em #cc6666,
  8em 61em #0033cc, 9em 61em #6699ff, 10em 61em #0033cc, 11em 61em #cc6666, 12em 61em #cc6666, 13em 61em #0033cc, 14em 61em #0033cc, 15em 61em #0033cc, 16em 61em #666699, /* GAP */ 19em 61em #ffd700, 20em 61em #0033cc, 21em 61em #0033cc, 22em 61em #0033cc, 23em 61em #ffd700, 24em 61em #666699, 25em 61em #cc6666, 26em 61em #cc6666, 27em 61em #993366, 28em 61em #993366, 29em 61em #993366, 30em 61em #993366, 31em 61em #333366, 32em 61em #993366, 33em 61em #cc6666,
  8em 62em #0033cc, 9em 62em #0033cc, 10em 62em #0033cc, 11em 62em #0033cc, 12em 62em #cc6666, 13em 62em #0033cc, 14em 62em #0033cc, 15em 62em #0033cc, 16em 62em #666699, /* GAP */ 19em 62em #333366, 20em 62em #cc6666, 21em 62em #ffd700, 22em 62em #ffd700, 23em 62em #0033cc, 24em 62em #666699, 25em 62em #993366, 26em 62em #993366, 27em 62em #993366, 28em 62em #993366, 29em 62em #993366, 30em 62em #993366, 31em 62em #333366, 32em 62em #993366, 33em 62em #cc6666,
  8em 63em #ffd700, 9em 63em #0033cc, 10em 63em #0033cc, 11em 63em #0033cc, 12em 63em #cc6666, 13em 63em #0033cc, 14em 63em #0033cc, 15em 63em #666699, /* GAP */ 21em 63em #666699, 22em 63em #666699, 23em 63em #666699, 24em 63em #8f476b, 25em 63em #333366, 26em 63em #993366, 27em 63em #993366, 28em 63em #993366, 29em 63em #993366, 30em 63em #333366, 31em 63em #333366, 32em 63em #993366, 33em 63em #cc6666,
  8em 64em #993366, 9em 64em #ffd700, 10em 64em #ffd700, 11em 64em #ffd700, 12em 64em #cc6666, 13em 64em #666699, 14em 64em #666699, /* GAP */ 21em 64em #333366, 22em 64em #993366, 23em 64em #993366, 24em 64em #993366, 25em 64em #993366, 26em 64em #333366, 27em 64em #993366, 28em 64em #993366, 29em 64em #333366, 30em 64em #333366, 31em 64em #993366, 32em 64em #993366, 33em 64em #cc6666,
  9em 65em #993366, 10em 65em #993366, 11em 65em #993366, 13em 65em #666699, /* GAP */ 22em 65em #993366, 23em 65em #993366, 24em 65em #993366, 25em 65em #333366, 26em 65em #333366, 27em 65em #333366, 28em 65em #333366, 30em 65em #993366, 31em 65em #993366, 32em 65em #993366, 33em 65em #cc6666,
  10em 66em #ffcccc, 11em 66em #ffcccc, /* GAP */ 25em 66em #333366, 26em 66em #333366, 27em 66em #333366, 28em 66em #333366, 30em 66em #993366, 31em 66em #993366, 32em 66em #993366, 33em 66em #993366,
  
  9em 67em #ffcccc, 10em 67em #ffcccc, 11em 67em #ffcccc, /* GAP */ 25em 67em #993366, 26em 67em #993366, 27em 67em #333366, 31em 67em #993366, 32em 67em #993366, 33em 67em #993366,
  
  9em 68em orange, 10em 68em #ffd700, 11em 68em #ffcccc, /* GAP */ 25em 68em #993366, 26em 68em #993366, 27em 68em #333366, 31em 68em #993366, 32em 68em #993366, 33em 68em #993366,
  
  5em 69em #8f476b, 6em 69em #000, 7em 69em #000, 8em 69em #ffcccc, 9em 69em #ffcccc, 10em 69em #000, 11em 69em #ffcccc, 12em 69em #000, 13em 69em #8f476b, 14em 69em #cc3333,/* GAP */ 25em 69em #993366, 26em 69em #993366, 27em 69em #333366, 31em 69em #993366, 32em 69em #993366,
  
  2em 70em #8f476b, 3em 70em #87476b, 4em 70em #cc3333, 5em 70em #cc6633, 6em 70em #cc6633, 7em 70em #cc3333, 8em 70em #ffcccc, 9em 70em #ffcccc, 10em 70em #000, 11em 70em #ffcccc, 12em 70em #8f476b, 13em 70em #000, 14em 70em #cc6633, 15em 70em #cc3333, 16em 70em #8f476b, 17em 70em #8f476b, /* GAP */ 26em 70em #993366, 27em 70em #333366,
  
  1em 71em #cc9966, 2em 71em #8f476b, 3em 71em #cc6633, 4em 71em #cc3333, 5em 71em #cc6633, 6em 71em #cc3333, 7em 71em #d6bcc7, 8em 71em #8f476b, 9em 71em #8f476b, 10em 71em #000, 11em 71em #cc3333, 12em 71em #cc3333, 13em 71em #000, 14em 71em #cc3333, 15em 71em #cc6633, 16em 71em #edb278, 17em 71em #cc6666,
  
  1em 72em #cc9966, 2em 72em #cc6633, 3em 72em #8f476b, 4em 72em #8f476b, 5em 72em #cc3333, 6em 72em #cc3333, 7em 72em #cc3333, 8em 72em #cc9966, 9em 72em #000, 10em 72em #000, 11em 72em #8f476b, 12em 72em #cc6633, 13em 72em #cc9966, 14em 72em #8f476b, 15em 72em #8f476b, 16em 72em #cc6633, 17em 72em #8f476b,
  
  1em 73em #cc3333, 2em 73em #cc9966, 3em 73em #cc9966, 4em 73em #cc9966, 5em 73em #8f476b, 6em 73em #cc3333, 7em 73em #000, 8em 73em #000, 9em 73em #000, 10em 73em #000, 11em 73em #000, 12em 73em #000, 13em 73em #000, 14em 73em #000, 15em 73em #000, 16em 73em #000, 17em 73em #000,
  
   1em 74em #cc3333, 2em 74em #ff6633, 3em 74em #ff6633, 4em 74em #d6bcc7, 5em 74em #cc9966, 6em 74em #cc6633, 7em 74em #cc6633, 8em 74em #ff6633, 9em 74em #000, 10em 74em #000, 11em 74em #ff6633, 12em 74em #d6bcc7, 13em 74em #cc9966, 14em 74em #cc3333, 15em 74em #cc9966, 16em 74em #cc9966, 17em 74em #8f476b,
  
  1em 75em #cc3333, 2em 75em #ff6633, 3em 75em #ff6633, 4em 75em #ff6633, 5em 75em #cc6633, 6em 75em #cc6633, 7em 75em #ff6633, 8em 75em #ff6633, 9em 75em #000, 10em 75em #8f476b, 11em 75em #edb278, 12em 75em #edb278, 13em 75em #cc3333, 14em 75em #edb278, 15em 75em #cc3333, 16em 75em #edb278, 17em 75em #000,
  
  1em 76em #cc3333, 2em 76em #ff6633, 3em 76em #cc9966, 4em 76em #ff6633, 5em 76em #cc6633, 6em 76em #cc9966, 7em 76em #000, 8em 76em #46485c, 9em 76em #000, 10em 76em #8f476b, 11em 76em #000, 12em 76em #edb278, 13em 76em #cc3333, 14em 76em #edb278, 15em 76em #edb278, 16em 76em #edb278, 17em 76em #000;
}
              
            
!

JS

              
                /* 

white:        #fff
black:        #000
light blue:   #6699ff
blue:         #0033cc
purple:       #666699
dark purple:  #333366
gold:         #ffd700

dark magenta: #8f476b
light red:    #cc6666

brown:        #ba8867
light brown:  #f9c494
skin:         #ffcccc


BigWhoop:
dark orange:  #cc3333
orange:       #cc6633, #ff6633
light orange: #cc9966
dark grey:    #46485c


http://lparchive.org/Monkey-Island-2/Update%201/1-mi_01_01.gif <- reference

<link href='https://fonts.googleapis.com/css?family=Press+Start+2P' rel='stylesheet' type='text/css'>
*/
var fontSize = parseInt($('.char').css("font-size"));
$('#size').text(fontSize + "px");

$('#plus').click(function(){ //increase "pixel" size
    var fontSize = parseInt($('.char').css("font-size"));
    fontSize = fontSize + 1 + "px";
    $('.char').css({'font-size':fontSize});
    $('#size').text(fontSize);
});

$('#minus').click(function(){ //decrease "pixel" size
    var fontSize = parseInt($('.char').css("font-size"));
    fontSize = fontSize - 1 + "px";
    if (fontSize == "0px") fontSize = "1px";
    $('.char').css({'font-size':fontSize});
    $('#size').text(fontSize);
});

$('#border').click(function(){ //controls border-radius to show "pixels"
  if ($('.char').hasClass('border')) {
    $('.char').removeClass('border');
    $('#border').text(' ');
  } else {
    $('.char').addClass('border');
    $('#border').text('V');
  }
});
              
            
!
999px

Console