heptal/glyphy.markdown

## glyphy.markdown

      
    Raw
  

              glyphy.markdown
            
          
    glyphy

A Pen by heptal on CodePen.
License.

  
## index.html
<!DOCTYPE html>
<html>

<head>
  <title>graphmemes</title>
</head>

<body>
  <div id="content">
    <div id="welcome">
      <h1>glyph substitut0r</h1>
      <p>Type in the box for unicode shuffling</p>
    </div>
    <div id="main">
      <textarea id="input" cols="30" rows="2" spellcheck="false"></textarea>
      <textarea id="output" cols="30" rows="2" readonly="true"></textarea>
    </div>
    <div id="footer">
      <p>Content from RelatedCharDB.sqlite3 in CharacterPallete.app internals</p>
    </div>
  </div>
  <div id="lorem" class="background lorem 12 24"></div>
  <script>
    window.onload = () => document.querySelectorAll("#lorem p")
      .forEach(l => l.textContent = transform(l.textContent))
  </script>
</body>

</html>

## script.js
const glyphs = new Map([
    "AaªÀÁÂÃÄÅàáâãäåĀāĂăĄąǍǎǞǟǠǡǺǻȀȁȂȃȦȧᴬᵃḀḁẠạẢảẤấẦầẨẩẪẫẬậẮắẰằẲẳẴẵẶặÅ⒜ⒶⓐＡａ𝐀𝐚𝐴𝑎𝑨𝒂𝒜𝒶𝓐𝓪𝔄𝔞𝔸𝕒𝕬𝖆𝖠𝖺𝗔𝗮𝘈𝘢𝘼𝙖𝙰𝚊",
    "BbʙᴮᵇḂḃḄḅḆḇℬ⒝ⒷⓑＢｂ𝐁𝐛𝐵𝑏𝑩𝒃𝒷𝓑𝓫𝔅𝔟𝔹𝕓𝕭𝖇𝖡𝖻𝗕𝗯𝘉𝘣𝘽𝙗𝙱𝚋",
    "CcÇçĆćĈĉĊċČčḈḉℂℭⅭⅽ⒞ⒸⓒＣｃ𝐂𝐜𝐶𝑐𝑪𝒄𝒞𝒸𝓒𝓬𝔠𝕔𝕮𝖈𝖢𝖼𝗖𝗰𝘊𝘤𝘾𝙘𝙲𝚌",
    "DdĎďᴰᵈḊḋḌḍḎḏḐḑḒḓⅅⅆⅮⅾ⒟ⒹⓓＤｄ𝐃𝐝𝐷𝑑𝑫𝒅𝒟𝒹𝓓𝓭𝔇𝔡𝔻𝕕𝕯𝖉𝖣𝖽𝗗𝗱𝘋𝘥𝘿𝙙𝙳𝚍",
    "EeÈÉÊËèéêëĒēĔĕĖėĘęĚěȄȅȆȇȨȩᴱᵉḔḕḖḗḘḙḚḛḜḝẸẹẺẻẼẽẾếỀềỂểỄễỆệℯℰⅇ⒠ⒺⓔＥｅ𝐄𝐞𝐸𝑒𝑬𝒆𝓔𝓮𝔈𝔢𝔼𝕖𝕰𝖊𝖤𝖾𝗘𝗲𝘌𝘦𝙀𝙚𝙴𝚎",
    "FfḞḟℱ⒡ⒻⓕＦｆ𝐅𝐟𝐹𝑓𝑭𝒇𝒻𝓕𝓯𝔉𝔣𝔽𝕗𝕱𝖋𝖥𝖿𝗙𝗳𝘍𝘧𝙁𝙛𝙵𝚏",
    "GgĜĝĞğĠġĢģǦǧǴǵɡɢᴳᵍḠḡℊ⒢ⒼⓖＧｇ𝐆𝐠𝐺𝑔𝑮𝒈𝒢𝓖𝓰𝔊𝔤𝔾𝕘𝕲𝖌𝖦𝗀𝗚𝗴𝘎𝘨𝙂𝙜𝙶𝚐",
    "HhĤĥȞȟʜʰᴴḢḣḤḥḦḧḨḩḪḫẖℋℌℍℎ⒣ⒽⓗＨｈ𝐇𝐡𝐻𝑯𝒉𝒽𝓗𝓱𝔥𝕙𝕳𝖍𝖧𝗁𝗛𝗵𝘏𝘩𝙃𝙝𝙷𝚑",
    "IiÌÍÎÏìíîïĨĩĪīĬĭĮįİıǏǐȈȉȊȋɪᴵᵢḬḭḮḯỈỉỊịⁱℐℑℹⅈⅠⅰ⒤ⒾⓘＩｉ𝐈𝐢𝐼𝑖𝑰𝒊𝒾𝓘𝓲𝔦𝕀𝕚𝕴𝖎𝖨𝗂𝗜𝗶𝘐𝘪𝙄𝙞𝙸𝚒",
    "JjĴĵǰʲᴶⅉ⒥ⒿⓙＪｊ𝐉𝐣𝐽𝑗𝑱𝒋𝒥𝒿𝓙𝓳𝔍𝔧𝕁𝕛𝕵𝖏𝖩𝗃𝗝𝗷𝘑𝘫𝙅𝙟𝙹𝚓",
    "KkĶķǨǩᴷᵏḰḱḲḳḴḵK⒦ⓀⓚＫｋ𝐊𝐤𝐾𝑘𝑲𝒌𝒦𝓀𝓚𝓴𝔎𝔨𝕂𝕜𝕶𝖐𝖪𝗄𝗞𝗸𝘒𝘬𝙆𝙠𝙺𝚔",
    "LlĹĺĻļĽľʟˡᴸḶḷḸḹḺḻḼḽℒℓⅬⅼ⒧ⓁⓛＬｌ𝐋𝐥𝐿𝑙𝑳𝒍𝓁𝓛𝓵𝔏𝔩𝕃𝕝𝕷𝖑𝖫𝗅𝗟𝗹𝘓𝘭𝙇𝙡𝙻𝚕",
    "MmᴹᵐḾḿṀṁṂṃℳⅯⅿ⒨ⓂⓜＭｍ𝐌𝐦𝑀𝑚𝑴𝒎𝓂𝓜𝓶𝔐𝔪𝕄𝕞𝕸𝖒𝖬𝗆𝗠𝗺𝘔𝘮𝙈𝙢𝙼𝚖",
    "NnÑñŃńŅņŇňǸǹɴᴺṄṅṆṇṈṉṊṋⁿℕ⒩ⓃⓝＮｎ𝐍𝐧𝑁𝑛𝑵𝒏𝒩𝓃𝓝𝓷𝔑𝔫𝕟𝕹𝖓𝖭𝗇𝗡𝗻𝘕𝘯𝙉𝙣𝙽𝚗",
    "OoºÒÓÔÕÖòóôõöŌōŎŏŐőƠơǑǒǪǫǬǭȌȍȎȏȪȫȬȭȮȯȰȱᴼᵒṌṍṎṏṐṑṒṓỌọỎỏỐốỒồỔổỖỗỘộỚ",
    "PpᴾᵖṔṕṖṗℙ⒫ⓅⓟＰｐ𝐏𝐩𝑃𝑝𝑷𝒑𝒫𝓅𝓟𝓹𝔓𝔭𝕡𝕻𝖕𝖯𝗉𝗣𝗽𝘗𝘱𝙋𝙥𝙿𝚙",
    "Qqℚ⒬ⓆⓠＱｑ𝐐𝐪𝑄𝑞𝑸𝒒𝒬𝓆𝓠𝓺𝔔𝔮𝕢𝕼𝖖𝖰𝗊𝗤𝗾𝘘𝘲𝙌𝙦𝚀𝚚",
    "RrŔŕŖŗŘřƦȐȑȒȓʀʳᴿᵣṘṙṚṛṜṝṞṟℛℜℝ⒭ⓇⓡＲｒ𝐑𝐫𝑅𝑟𝑹𝒓𝓇𝓡𝓻𝔯𝕣𝕽𝖗𝖱𝗋𝗥𝗿𝘙𝘳𝙍𝙧𝚁𝚛",
    "SsŚśŜŝŞşŠšſȘșˢṠṡṢṣṤṥṦṧṨṩẛ⒮ⓈⓢＳｓ𝐒𝐬𝑆𝑠𝑺𝒔𝒮𝓈𝓢𝓼𝔖𝔰𝕊𝕤𝕾𝖘𝖲𝗌𝗦𝘀𝘚𝘴𝙎𝙨𝚂𝚜",
    "TtŢţŤťȚțᵀᵗṪṫṬṭṮṯṰṱẗ⒯ⓉⓣＴｔ𝐓𝐭𝑇𝑡𝑻𝒕𝒯𝓉𝓣𝓽𝔗𝔱𝕋𝕥𝕿𝖙𝖳𝗍𝗧𝘁𝘛𝘵𝙏𝙩𝚃𝚝",
    "UuÙÚÛÜùúûüŨũŪūŬŭŮůŰűŲųƯưǓǔǕǖǗǘǙǚǛǜȔȕȖȗᵁᵘᵤṲṳṴṵṶṷṸṹṺṻỤụỦủỨứỪừỬửỮữỰự⒰ⓊⓤＵｕ𝐔𝐮𝑈𝑢𝑼𝒖𝒰𝓊𝓤𝓾𝔘𝔲𝕌𝕦𝖀𝖚𝖴𝗎𝗨𝘂𝘜𝘶𝙐𝙪𝚄𝚞",
    "VvᵛᵥṼṽṾṿⅤⅴ⒱ⓋⓥＶｖ𝐕𝐯𝑉𝑣𝑽𝒗𝒱𝓋𝓥𝓿𝔙𝔳𝕍𝕧𝖁𝖛𝖵𝗏𝗩𝘃𝘝𝘷𝙑𝙫𝚅𝚟",
    "WwŴŵʷᵂẀẁẂẃẄẅẆẇẈẉẘ⒲ⓌⓦＷｗ𝐖𝐰𝑊𝑤𝑾𝒘𝒲𝓌𝓦𝔀𝔚𝔴𝕎𝕨𝖂𝖜𝖶𝗐𝗪𝘄𝘞𝘸𝙒𝙬𝚆𝚠",
    "XxˣẊẋẌẍⅩⅹ⒳ⓍⓧＸｘ𝐗𝐱𝑋𝑥𝑿𝒙𝒳𝓍𝓧𝔁𝔛𝔵𝕏𝕩𝖃𝖝𝖷𝗑𝗫𝘅𝘟𝘹𝙓𝙭𝚇𝚡",
    "YyÝýÿŶŷŸȲȳʏʸẎẏẙỲỳỴỵỶỷỸỹ⒴ⓎⓨＹｙ𝐘𝐲𝑌𝑦𝒀𝒚𝒴𝓎𝓨𝔂𝔜𝔶𝕐𝕪𝖄𝖞𝖸𝗒𝗬𝘆𝘠𝘺𝙔𝙮𝚈𝚢",
    "ZzŹźŻżŽžẐẑẒẓẔẕℤℨ⒵ⓏⓩＺｚ𝐙𝐳𝑍𝑧𝒁𝒛𝒵𝓏𝓩𝔃𝔷𝕫𝖅𝖟𝖹𝗓𝗭𝘇𝘡𝘻𝙕𝙯𝚉𝚣",
  ].map(([k, , ...v]) => [k, v]));

Array.prototype.random = function() { return this[Math.floor(Math.random() * this.length)]; };
Map.prototype.iget = function(key) { return this.get(key.toUpperCase()); };
const glyph = ([letter, array = glyphs.iget(letter)]) => array && array.random() || letter;
const transform = src => [...src].map(chr => glyph(chr)).join("").normalize();
const [input, output] = ["#input", "#output"].map(id => document.querySelector(id));
input.oninput = event => (output.textContent = transform(event.target.value));

## scripts
<script src="https://ramachandrajr.github.io/lorem-js/lorem-js/lorem.min.js"></script>

## style.css
@import url("https://fonts.googleapis.com/css?family=Noto+Sans");

.lorem {
  position: absolute;
  overflow: hidden;
  top: 20px;
  left: 0;
  margin: auto;
  right: 0;
  z-index: -99;
  font-size: 14px;
  width: 80%;
  opacity: 0.2;
  color: #333366;
}
#content {
  padding: 10px;
  font-size: 1.2em;
  display: flex;
  flex-direction: column;
  margin: auto;
  width: 500px;
}
h1 {
  font-weight: bold;
  font-family: monospace;
}
textarea {
  width: 100%;
  resize: none;
  margin: 5px;
}
#input {
  height: 2.8em;
  font-size: 1.4em;
  border: 2px solid #ccc;
  background-color: #eee;
}
#output {
  height: 3.2em;
  font-size: 1.6em;
  border: 2px solid #666;
}
#footer {
  font-size: 12px;
}
	<!DOCTYPE html>
	<html>

	<head>
	<title>graphmemes</title>
	</head>

	<body>
	<div id="content">
	<div id="welcome">
	<h1>glyph substitut0r</h1>
	<p>Type in the box for unicode shuffling</p>
	</div>
	<div id="main">
	<textarea id="input" cols="30" rows="2" spellcheck="false"></textarea>
	<textarea id="output" cols="30" rows="2" readonly="true"></textarea>
	</div>
	<div id="footer">
	<p>Content from RelatedCharDB.sqlite3 in CharacterPallete.app internals</p>
	</div>
	</div>
	<div id="lorem" class="background lorem 12 24"></div>
	<script>
	window.onload = () => document.querySelectorAll("#lorem p")
	.forEach(l => l.textContent = transform(l.textContent))
	</script>
	</body>

	</html>
	const glyphs = new Map([
	"AaªÀÁÂÃÄÅàáâãäåĀāĂăĄąǍǎǞǟǠǡǺǻȀȁȂȃȦȧᴬᵃḀḁẠạẢảẤấẦầẨẩẪẫẬậẮắẰằẲẳẴẵẶặÅ⒜ⒶⓐＡａ𝐀𝐚𝐴𝑎𝑨𝒂𝒜𝒶𝓐𝓪𝔄𝔞𝔸𝕒𝕬𝖆𝖠𝖺𝗔𝗮𝘈𝘢𝘼𝙖𝙰𝚊",
	"BbʙᴮᵇḂḃḄḅḆḇℬ⒝ⒷⓑＢｂ𝐁𝐛𝐵𝑏𝑩𝒃𝒷𝓑𝓫𝔅𝔟𝔹𝕓𝕭𝖇𝖡𝖻𝗕𝗯𝘉𝘣𝘽𝙗𝙱𝚋",
	"CcÇçĆćĈĉĊċČčḈḉℂℭⅭⅽ⒞ⒸⓒＣｃ𝐂𝐜𝐶𝑐𝑪𝒄𝒞𝒸𝓒𝓬𝔠𝕔𝕮𝖈𝖢𝖼𝗖𝗰𝘊𝘤𝘾𝙘𝙲𝚌",
	"DdĎďᴰᵈḊḋḌḍḎḏḐḑḒḓⅅⅆⅮⅾ⒟ⒹⓓＤｄ𝐃𝐝𝐷𝑑𝑫𝒅𝒟𝒹𝓓𝓭𝔇𝔡𝔻𝕕𝕯𝖉𝖣𝖽𝗗𝗱𝘋𝘥𝘿𝙙𝙳𝚍",
	"EeÈÉÊËèéêëĒēĔĕĖėĘęĚěȄȅȆȇȨȩᴱᵉḔḕḖḗḘḙḚḛḜḝẸẹẺẻẼẽẾếỀềỂểỄễỆệℯℰⅇ⒠ⒺⓔＥｅ𝐄𝐞𝐸𝑒𝑬𝒆𝓔𝓮𝔈𝔢𝔼𝕖𝕰𝖊𝖤𝖾𝗘𝗲𝘌𝘦𝙀𝙚𝙴𝚎",
	"FfḞḟℱ⒡ⒻⓕＦｆ𝐅𝐟𝐹𝑓𝑭𝒇𝒻𝓕𝓯𝔉𝔣𝔽𝕗𝕱𝖋𝖥𝖿𝗙𝗳𝘍𝘧𝙁𝙛𝙵𝚏",
	"GgĜĝĞğĠġĢģǦǧǴǵɡɢᴳᵍḠḡℊ⒢ⒼⓖＧｇ𝐆𝐠𝐺𝑔𝑮𝒈𝒢𝓖𝓰𝔊𝔤𝔾𝕘𝕲𝖌𝖦𝗀𝗚𝗴𝘎𝘨𝙂𝙜𝙶𝚐",
	"HhĤĥȞȟʜʰᴴḢḣḤḥḦḧḨḩḪḫẖℋℌℍℎ⒣ⒽⓗＨｈ𝐇𝐡𝐻𝑯𝒉𝒽𝓗𝓱𝔥𝕙𝕳𝖍𝖧𝗁𝗛𝗵𝘏𝘩𝙃𝙝𝙷𝚑",
	"IiÌÍÎÏìíîïĨĩĪīĬĭĮįİıǏǐȈȉȊȋɪᴵᵢḬḭḮḯỈỉỊịⁱℐℑℹⅈⅠⅰ⒤ⒾⓘＩｉ𝐈𝐢𝐼𝑖𝑰𝒊𝒾𝓘𝓲𝔦𝕀𝕚𝕴𝖎𝖨𝗂𝗜𝗶𝘐𝘪𝙄𝙞𝙸𝚒",
	"JjĴĵǰʲᴶⅉ⒥ⒿⓙＪｊ𝐉𝐣𝐽𝑗𝑱𝒋𝒥𝒿𝓙𝓳𝔍𝔧𝕁𝕛𝕵𝖏𝖩𝗃𝗝𝗷𝘑𝘫𝙅𝙟𝙹𝚓",
	"KkĶķǨǩᴷᵏḰḱḲḳḴḵK⒦ⓀⓚＫｋ𝐊𝐤𝐾𝑘𝑲𝒌𝒦𝓀𝓚𝓴𝔎𝔨𝕂𝕜𝕶𝖐𝖪𝗄𝗞𝗸𝘒𝘬𝙆𝙠𝙺𝚔",
	"LlĹĺĻļĽľʟˡᴸḶḷḸḹḺḻḼḽℒℓⅬⅼ⒧ⓁⓛＬｌ𝐋𝐥𝐿𝑙𝑳𝒍𝓁𝓛𝓵𝔏𝔩𝕃𝕝𝕷𝖑𝖫𝗅𝗟𝗹𝘓𝘭𝙇𝙡𝙻𝚕",
	"MmᴹᵐḾḿṀṁṂṃℳⅯⅿ⒨ⓂⓜＭｍ𝐌𝐦𝑀𝑚𝑴𝒎𝓂𝓜𝓶𝔐𝔪𝕄𝕞𝕸𝖒𝖬𝗆𝗠𝗺𝘔𝘮𝙈𝙢𝙼𝚖",
	"NnÑñŃńŅņŇňǸǹɴᴺṄṅṆṇṈṉṊṋⁿℕ⒩ⓃⓝＮｎ𝐍𝐧𝑁𝑛𝑵𝒏𝒩𝓃𝓝𝓷𝔑𝔫𝕟𝕹𝖓𝖭𝗇𝗡𝗻𝘕𝘯𝙉𝙣𝙽𝚗",
	"OoºÒÓÔÕÖòóôõöŌōŎŏŐőƠơǑǒǪǫǬǭȌȍȎȏȪȫȬȭȮȯȰȱᴼᵒṌṍṎṏṐṑṒṓỌọỎỏỐốỒồỔổỖỗỘộỚ",
	"PpᴾᵖṔṕṖṗℙ⒫ⓅⓟＰｐ𝐏𝐩𝑃𝑝𝑷𝒑𝒫𝓅𝓟𝓹𝔓𝔭𝕡𝕻𝖕𝖯𝗉𝗣𝗽𝘗𝘱𝙋𝙥𝙿𝚙",
	"Qqℚ⒬ⓆⓠＱｑ𝐐𝐪𝑄𝑞𝑸𝒒𝒬𝓆𝓠𝓺𝔔𝔮𝕢𝕼𝖖𝖰𝗊𝗤𝗾𝘘𝘲𝙌𝙦𝚀𝚚",
	"RrŔŕŖŗŘřƦȐȑȒȓʀʳᴿᵣṘṙṚṛṜṝṞṟℛℜℝ⒭ⓇⓡＲｒ𝐑𝐫𝑅𝑟𝑹𝒓𝓇𝓡𝓻𝔯𝕣𝕽𝖗𝖱𝗋𝗥𝗿𝘙𝘳𝙍𝙧𝚁𝚛",
	"SsŚśŜŝŞşŠšſȘșˢṠṡṢṣṤṥṦṧṨṩẛ⒮ⓈⓢＳｓ𝐒𝐬𝑆𝑠𝑺𝒔𝒮𝓈𝓢𝓼𝔖𝔰𝕊𝕤𝕾𝖘𝖲𝗌𝗦𝘀𝘚𝘴𝙎𝙨𝚂𝚜",
	"TtŢţŤťȚțᵀᵗṪṫṬṭṮṯṰṱẗ⒯ⓉⓣＴｔ𝐓𝐭𝑇𝑡𝑻𝒕𝒯𝓉𝓣𝓽𝔗𝔱𝕋𝕥𝕿𝖙𝖳𝗍𝗧𝘁𝘛𝘵𝙏𝙩𝚃𝚝",
	"UuÙÚÛÜùúûüŨũŪūŬŭŮůŰűŲųƯưǓǔǕǖǗǘǙǚǛǜȔȕȖȗᵁᵘᵤṲṳṴṵṶṷṸṹṺṻỤụỦủỨứỪừỬửỮữỰự⒰ⓊⓤＵｕ𝐔𝐮𝑈𝑢𝑼𝒖𝒰𝓊𝓤𝓾𝔘𝔲𝕌𝕦𝖀𝖚𝖴𝗎𝗨𝘂𝘜𝘶𝙐𝙪𝚄𝚞",
	"VvᵛᵥṼṽṾṿⅤⅴ⒱ⓋⓥＶｖ𝐕𝐯𝑉𝑣𝑽𝒗𝒱𝓋𝓥𝓿𝔙𝔳𝕍𝕧𝖁𝖛𝖵𝗏𝗩𝘃𝘝𝘷𝙑𝙫𝚅𝚟",
	"WwŴŵʷᵂẀẁẂẃẄẅẆẇẈẉẘ⒲ⓌⓦＷｗ𝐖𝐰𝑊𝑤𝑾𝒘𝒲𝓌𝓦𝔀𝔚𝔴𝕎𝕨𝖂𝖜𝖶𝗐𝗪𝘄𝘞𝘸𝙒𝙬𝚆𝚠",
	"XxˣẊẋẌẍⅩⅹ⒳ⓍⓧＸｘ𝐗𝐱𝑋𝑥𝑿𝒙𝒳𝓍𝓧𝔁𝔛𝔵𝕏𝕩𝖃𝖝𝖷𝗑𝗫𝘅𝘟𝘹𝙓𝙭𝚇𝚡",
	"YyÝýÿŶŷŸȲȳʏʸẎẏẙỲỳỴỵỶỷỸỹ⒴ⓎⓨＹｙ𝐘𝐲𝑌𝑦𝒀𝒚𝒴𝓎𝓨𝔂𝔜𝔶𝕐𝕪𝖄𝖞𝖸𝗒𝗬𝘆𝘠𝘺𝙔𝙮𝚈𝚢",
	"ZzŹźŻżŽžẐẑẒẓẔẕℤℨ⒵ⓏⓩＺｚ𝐙𝐳𝑍𝑧𝒁𝒛𝒵𝓏𝓩𝔃𝔷𝕫𝖅𝖟𝖹𝗓𝗭𝘇𝘡𝘻𝙕𝙯𝚉𝚣",
	].map(([k, , ...v]) => [k, v]));

	Array.prototype.random = function() { return this[Math.floor(Math.random() * this.length)]; };
	Map.prototype.iget = function(key) { return this.get(key.toUpperCase()); };
	const glyph = ([letter, array = glyphs.iget(letter)]) => array && array.random() \|\| letter;
	const transform = src => [...src].map(chr => glyph(chr)).join("").normalize();
	const [input, output] = ["#input", "#output"].map(id => document.querySelector(id));
	input.oninput = event => (output.textContent = transform(event.target.value));
	@import url("https://fonts.googleapis.com/css?family=Noto+Sans");

	.lorem {
	position: absolute;
	overflow: hidden;
	top: 20px;
	left: 0;
	margin: auto;
	right: 0;
	z-index: -99;
	font-size: 14px;
	width: 80%;
	opacity: 0.2;
	color: #333366;
	}
	#content {
	padding: 10px;
	font-size: 1.2em;
	display: flex;
	flex-direction: column;
	margin: auto;
	width: 500px;
	}
	h1 {
	font-weight: bold;
	font-family: monospace;
	}
	textarea {
	width: 100%;
	resize: none;
	margin: 5px;
	}
	#input {
	height: 2.8em;
	font-size: 1.4em;
	border: 2px solid #ccc;
	background-color: #eee;
	}
	#output {
	height: 3.2em;
	font-size: 1.6em;
	border: 2px solid #666;
	}
	#footer {
	font-size: 12px;
	}