jquery:on\nhash:off\nbookmark:on\nmodernizr:off\nundo:on\nobfuscate:off\nexitprompt:off\nblankcss:off\n

#passages, .passage {\nmargin: 0 !important; \nborder:0;\npadding: 0 !important;\n}\n

divide into man/woman. \nbackground changes with clicks\nstart writing text\n

<div class="credits2" style="font-size: 16px; line-height: 1.6em; padding: 30px 0 0 50px; overflow: scroll !important;">\n\n[[RESTART|Start]]\n\n\tA short interactive piece by Shelly Alon (<a href="http://www.twitter.com/shellyalon" target="_blank">@shellyalon</a>)<br>\n\tMade for the One Game A Month Challenge.<br>The topic GENDER was given by <a href="http://www.twitter.com/mar_ott" target="_blank">Mareike Ottrand</a>.<br>Look at the previous games at <a href="http://shellyalon.itch.io" target="_blank">itch.io</a>\n\nTyped in <a href="https://fonts.google.com/specimen/News+Cycle" target="_blank">News Cycle</a>\n\nSOUNDS BY\nAdam Joseph (http://freesound.org/people/Adam_Joseph/)\nLG (http://freesound.org/people/LG/)\nJoe Deshon (http://freesound.org/people/joedeshon/)\ngusgus26 (http://freesound.org/people/gusgus26/)\nlebcraftlp (http://freesound.org/people/lebcraftlp/)\n7778 (http://freesound.org/people/7778/)\nmastersdisaster (http://freesound.org/people/mastersdisaster/)\nannabloom (http://freesound.org/people/annabloom/)\nhukleesyr (http://freesound.org/people/hukleesyr/)\nkwahmah-02 (http://freesound.org/people/kwahmah_02/)\nsoundsofawesome (http://freesound.org/people/soundsofawesome/)\nadcbicycle (http://freesound.org/people/adcbicycle/)\n123jorre456 (http://freesound.org/people/123jorre456/)\nswagmuffinplus (http://freesound.org/people/swagmuffinplus/)\nmetrostock99 (http://freesound.org/people/metrostock99/)\nAlien_s (http://freesound.org/people/alien_s/)\nRocotiloS (http://freesound.org/people/rocotilos/)\nS Ruelas (http://freesound.org/people/sruelas/)\n\n</div>

(function(){version.extensions.replaceMacrosCombined={major:1,minor:1,revision:7};var nullobj={handler:function(){}};function showVer(n,notrans){if(!n){return;}n.innerHTML="";\nnew Wikifier(n,n.tweecode);n.setAttribute("data-enabled","true");n.style.display="inline";n.classList.remove("revision-span-out");if(!notrans){n.classList.add("revision-span-in");\nif(n.timeout){clearTimeout(n.timeout);}n.timeout=setTimeout(function(){n.classList.remove("revision-span-in");n=null;},20);}}function hideVer(n,notrans){if(!n){return;\n}n.setAttribute("data-enabled","false");n.classList.remove("revision-span-in");if(n.timeout){clearTimeout(n.timeout);}if(!notrans){n.classList.add("revision-span-out");\nn.timeout=setTimeout(function(){if(n.getAttribute("data-enabled")=="false"){n.classList.remove("revision-span-out");n.style.display="none";n.innerHTML="";}n=null;\n},1000);}else{n.style.display="none";n.innerHTML="";n=null;}}function tagcontents(b,starttags,desttags,endtags,k){var l=0,c="",tg,a,i;function tagfound(i,e,endtag){for(var j=0;\nj<e.length;j++){if(a.indexOf("<<"+e[j]+(endtag?">>":""),i)==i){return e[j];}}}a=b.source.slice(k);for(i=0;i<a.length;i++){if(tg=tagfound(i,starttags)){l++;}else{if((tg=tagfound(i,desttags,true))&&l==0){b.nextMatch=k+i+tg.length+4;\nreturn[c,tg];}else{if(tg=tagfound(i,endtags,true)){l--;if(l<0){return null;}}}}c+=a.charAt(i);}return null;}var begintags=[];var endtags=[];function revisionSpanHandler(g,e,f,b){var k=b.source.indexOf(">>",b.matchStart)+2,vsns=[],vtype=e,flen=f.length,becomes,c,cn,m,h,vsn;\nfunction mkspan(vtype){h=insertElement(m,"span",null,"revision-span "+vtype);h.setAttribute("data-enabled",false);h.style.display="none";h.tweecode="";return h;}if(this.shorthand&&flen){while(f.length>0){vsns.push([f.shift(),(this.flavour=="insert"?"gains":"becomes")]);\n}}else{if(this.flavour=="insert"||(this.flavour=="continue"&&this.trigger=="time")){vsns.push(["","becomes"]);}}if(this.flavour=="continue"&&flen){b.nextMatch=k+b.source.slice(k).length;\nvsns.push([b.source.slice(k),vtype]);}else{becomes=["becomes","gains"];c=tagcontents(b,begintags,becomes.concat(endtags),endtags,k);if(c&&endtags.indexOf(c[1])==-1){while(c){vsns.push(c);\nc=tagcontents(b,begintags,becomes,endtags,b.nextMatch);}c=tagcontents(b,begintags,["end"+e],endtags,b.nextMatch);}if(!c){throwError(g,"can't find matching end"+e);\nreturn;}vsns.push(c);if(this.flavour=="continue"){k=b.nextMatch;b.nextMatch=k+b.source.slice(k).length;vsns.push([b.source.slice(k),""]);}}if(this.flavour=="remove"){vsns.push(["","becomes"]);\n}cn=0;m=insertElement(g,"span",null,e);m.setAttribute("data-flavour",this.flavour);h=mkspan("initial");vsn=vsns.shift();h.tweecode=vsn[0];showVer(h,true);while(vsns.length>0){if(vsn){vtype=vsn[1];\n}vsn=vsns.shift();h=mkspan(vtype);h.tweecode=vsn[0];}if(typeof this.setup=="function"){this.setup(m,g,f);}}function quantity(m){return(m.children.length-1)+(m.getAttribute("data-flavour")=="remove");\n}function revisionSetup(m,g,f){m.className+=" "+f[0].replace(" ","_");}function keySetup(m,g,f){var key=f[0];m.setEventListener("keydown",function l(e){var done=!revise("revise",m);\nif(done){m.removeEventListener("keydown",l);}});}function timeSetup(m,g,f){function cssTimeUnit(s){if(typeof s=="string"){if(s.slice(-2).toLowerCase()=="ms"){return Number(s.slice(0,-2))||0;\n}else{if(s.slice(-1).toLowerCase()=="s"){return Number(s.slice(0,-1))*1000||0;}}}throwError(g,s+" isn't a CSS time unit");return 0;}var tm=cssTimeUnit(f[0]);var s=state.history[0].passage.title;\nsetTimeout(function timefn(){if(state.history[0].passage.title==s){var done=!revise("revise",m);if(!done){setTimeout(timefn,tm);}}},tm);}function hoverSetup(m){var fn,noMouseEnter=(document.head.onmouseenter!==null),m1=m.children[0],m2=m.children[1],gains=m2.className.indexOf("gains")>-1;\nif(!m1||!m2){return;}m1.onmouseenter=function(e){var efp=document.elementFromPoint(e.clientX,e.clientY);while(efp&&efp!==this){efp=efp.parentNode;}if(!efp){return;\n}if(this.getAttribute("data-enabled")!="false"){revise("revise",this.parentNode);}};m2.onmouseleave=function(e){var efp=document.elementFromPoint(e.clientX,e.clientY);\nwhile(efp&&efp!==this){efp=efp.parentNode;}if(efp){return;}if(this.getAttribute("data-enabled")!="false"){revise("revert",this.parentNode);}};if(gains){m1.onmouseleave=m2.onmouseleave;\n}if(noMouseEnter){fn=function(n){return function(e){if(!event.relatedTarget||(event.relatedTarget!=this&&!(this.compareDocumentPosition(event.relatedTarget)&Node.DOCUMENT_POSITION_CONTAINED_BY))){this[n]();\n}};};m1.onmouseover=fn("onmouseenter");m2.onmouseout=fn("onmouseleave");if(gains){m1.onmouseout=m2.onmouseout;}}m=null;}function mouseSetup(m){var evt=(document.head.onmouseenter===null?"onmouseenter":"onmouseover");\nm[evt]=function(){var done=!revise("revise",this);if(done){this[evt]=null;}};m=null;}function linkSetup(m,g,f){var l=Wikifier.createInternalLink(),p=m.parentNode;\nl.className="internalLink replaceLink";p.insertBefore(l,m);l.insertBefore(m,null);l.onclick=function(){var p,done=false;if(m&&m.parentNode==this){done=!revise("revise",m);\nscrollWindowTo(m);}if(done){this.parentNode.insertBefore(m,this);this.parentNode.removeChild(this);}};l=null;}function visitedSetup(m,g,f){var i,done,shv=state.history[0].variables,os="once seen",d=(m.firstChild&&(this.flavour=="insert"?m.firstChild.nextSibling:m.firstChild).tweecode);\nshv[os]=shv[os]||{};if(d&&!shv[os].hasOwnProperty(d)){shv[os][d]=1;}else{for(i=shv[os][d];i>0&&!done;i--){done=!revise("revise",m,true);}if(shv[os].hasOwnProperty(d)){shv[os][d]+=1;\n}}}[{name:"insert",flavour:"insert",trigger:"link",setup:linkSetup},{name:"timedinsert",flavour:"insert",trigger:"time",setup:timeSetup},{name:"insertion",flavour:"insert",trigger:"revisemacro",setup:revisionSetup},{name:"later",flavour:"insert",trigger:"visited",setup:visitedSetup},{name:"keyinsert",flavour:"insert",trigger:"key",setup:keySetup},{name:"replace",flavour:"replace",trigger:"link",setup:linkSetup},{name:"timedreplace",flavour:"replace",trigger:"time",setup:timeSetup},{name:"mousereplace",flavour:"replace",trigger:"mouse",setup:mouseSetup},{name:"hoverreplace",flavour:"replace",trigger:"hover",setup:hoverSetup},{name:"revision",flavour:"replace",trigger:"revisemacro",setup:revisionSetup},{name:"keyreplace",flavour:"replace",trigger:"key",setup:keySetup},{name:"timedremove",flavour:"remove",trigger:"time",setup:timeSetup},{name:"mouseremove",flavour:"remove",trigger:"mouse",setup:mouseSetup},{name:"hoverremove",flavour:"remove",trigger:"hover",setup:hoverSetup},{name:"removal",flavour:"remove",trigger:"revisemacro",setup:revisionSetup},{name:"once",flavour:"remove",trigger:"visited",setup:visitedSetup},{name:"keyremove",flavour:"remove",trigger:"key",setup:keySetup},{name:"continue",flavour:"continue",trigger:"link",setup:linkSetup},{name:"timedcontinue",flavour:"continue",trigger:"time",setup:timeSetup},{name:"mousecontinue",flavour:"continue",trigger:"mouse",setup:mouseSetup},{name:"keycontinue",flavour:"continue",trigger:"key",setup:keySetup},{name:"cycle",flavour:"cycle",trigger:"revisemacro",setup:revisionSetup},{name:"mousecycle",flavour:"cycle",trigger:"mouse",setup:mouseSetup},{name:"timedcycle",flavour:"cycle",trigger:"time",setup:timeSetup},{name:"keycycle",flavour:"replace",trigger:"key",setup:keySetup}].forEach(function(e){e.handler=revisionSpanHandler;\ne.shorthand=(["link","mouse","hover"].indexOf(e.trigger)>-1);macros[e.name]=e;macros["end"+e.name]=nullobj;begintags.push(e.name);endtags.push("end"+e.name);});function insideDepartingSpan(elem){var r=elem.parentNode;\nwhile(!r.classList.contains("passage")){if(r.classList.contains("revision-span-out")){return true;}r=r.parentNode;}}function reviseAll(rt,rname){var rall=document.querySelectorAll(".passage [data-flavour]."+rname),ret=false;\nfor(var i=0;i<rall.length;i++){if(!insideDepartingSpan(rall[i])){ret=revise(rt,rall[i])||ret;}}return ret;}function revise(rt,r,notrans){var ind2,curr,next,ind=-1,rev=(rt=="revert"),rnd=(rt.indexOf("random")>-1),fl=r.getAttribute("data-flavour"),rc=r.childNodes,cyc=(fl=="cycle"),rcl=rc.length-1;\nfunction doToGainerSpans(n,fn){for(var k=n-1;k>=0;k--){if(rc[k+1].classList.contains("gains")){fn(rc[k],notrans);}else{break;}}}for(var k=0;k<=rcl;k++){if(rc[k].getAttribute("data-enabled")=="true"){ind=k;\n}}if(rev){ind-=1;}curr=(ind>=0?rc[ind]:(cyc?rc[rcl]:null));ind2=ind;if(rnd){ind2=(ind+(Math.floor(Math.random()*rcl)))%rcl;}next=((ind2<rcl)?rc[ind2+1]:(cyc?rc[0]:null));\nvar docurr=(rev?showVer:hideVer);var donext=(rev?hideVer:showVer);var currfn=function(){if(!(next&&next.classList.contains("gains"))||rnd){docurr(curr,notrans);doToGainerSpans(ind,docurr,notrans);\n}};var nextfn=function(){donext(next,notrans);if(rnd){doToGainerSpans(ind2+1,donext,notrans);}};if(!rev){currfn();nextfn();}else{nextfn();currfn();}return(cyc?true:(rev?(ind>0):(ind2<rcl-1)));\n}macros.revert=macros.revise=macros.randomise=macros.randomize={handler:function(a,b,c){var l,rev,rname;function disableLink(l){l.style.display="none";}function enableLink(l){l.style.display="inline";\n}function updateLink(l){if(l.className.indexOf("random")>-1){enableLink(l);return;}var rall=document.querySelectorAll(".passage [data-flavour]."+rname),cannext,canprev,i,ind,r,fl;\nfor(i=0;i<rall.length;i++){r=rall[i],fl=r.getAttribute("data-flavour");if(insideDepartingSpan(r)){continue;}if(fl=="cycle"){cannext=canprev=true;}else{if(r.firstChild.getAttribute("data-enabled")==!1+""){canprev=true;\n}if(r.lastChild.getAttribute("data-enabled")==!1+""){cannext=true;}}}var can=(l.classList.contains("revert")?canprev:cannext);(can?enableLink:disableLink)(l);}function toggleText(w){w.classList.toggle(rl+"Enabled");\nw.classList.toggle(rl+"Disabled");w.style.display=((w.style.display=="none")?"inline":"none");}var rl="reviseLink";if(c.length<2){throwError(a,b+" macro needs 2 parameters");\nreturn;}rname=c.shift().replace(" ","_");l=Wikifier.createInternalLink(a,null);l.className="internalLink "+rl+" "+rl+"_"+rname+" "+b;var v="";var end=false;var out=false;\nif(c.length>1&&c[0][0]=="$"){v=c[0].slice(1);c.shift();}switch(c[c.length-1]){case"end":end=true;c.pop();break;case"out":out=true;c.pop();break;}var h=state.history[0].variables;\nfor(var i=0;i<c.length;i++){var on=(i==Math.max(c.indexOf(h[v]),0));var d=insertElement(null,"span",null,rl+((on)?"En":"Dis")+"abled");if(on){h[v]=c[i];l.setAttribute("data-cycle",i);\n}else{d.style.display="none";}insertText(d,c[i]);l.appendChild(d);}l.onclick=function(){reviseAll(b,rname);var t=this.childNodes,u=this.getAttribute("data-cycle")-0,m=t.length,n,lall,i;\nif((end||out)&&u>=m-(end?2:1)){if(end){n=this.removeChild(t[u+1]||t[u]);n.className=rl+"End";n.style.display="inline";this.parentNode.replaceChild(n,this);}else{this.parentNode.removeChild(this);\nreturn;}}else{toggleText(t[u]);u=(u+1)%m;if(v){h[v]=c[u];}toggleText(t[u]);this.setAttribute("data-cycle",u);}lall=document.getElementsByClassName(rl+"_"+rname);\nfor(i=0;i<lall.length;i++){updateLink(lall[i]);}};disableLink(l);setTimeout((function(l){return function(){updateLink(l);};}(l)),1);l=null;}};macros.mouserevise=macros.hoverrevise={handler:function(a,b,c,d){var endtags=["end"+b],evt=(window.onmouseenter===null?"onmouseenter":"onmouseover"),t=tagcontents(d,[b],endtags,endtags,d.source.indexOf(">>",d.matchStart)+2);\nif(t){var rname=c[0].replace(" ","_"),h=insertElement(a,"span",null,"hoverrevise hoverrevise_"+rname),f=function(){var done=!reviseAll("revise",rname);if(b!="hoverrevise"&&done){this[evt]=null;\n}};new Wikifier(h,t[0]);if(b=="hoverrevise"){h.onmouseover=f;h.onmouseout=function(){reviseAll("revert",rname);};}else{h[evt]=f;}h=null;}}};macros.instantrevise={handler:function(a,b,c,d){reviseAll("revise",c[0].replace(" ","_"));\n}};macros.endmouserevise=nullobj;macros.endhoverrevise=nullobj;}());

<<nobr>>\n<div id="overlay" style="width:100vw; height:100vh; background-color:#7413ec;">\n<div class="desktoponly">Desktop only, sorry!</div>\n</div>\n\n\n\n\n<div id="manContainer" class="container">\n\n<div class="sentence">\n<span class="manChar">m</span>\n<span class="manChar">a</span>\n<span class="manChar">n</span>\n</div>\n\n<br>\n\n<div class="iam" id="iamman">\n<span onclick="manClick()"> \n<<replace>><span class="line">A how-to guide</span>\n<<becomes>><span class="line">Men are strong</span>\n<<becomes>><span class="line">Men are competitive</span><br>\n<span class="line">Men are wild</span><br>\n<span class="line">Be a gentleman</span>\n<<becomes>><span class="line">Men play sports</span><br>\n<span class="line">Do you work out?</span>\n<<becomes>><span class="line">What car do you have?</span><br>\n<span class="line">Did your wife picked it?</span><br>\n<span class="line">Overcompensating for something?</span>\n<<becomes>><span class="line">Be fashionable</span><br>\n<span class="line">Feel comfortable in your clothes</span><br>\n<span class="line">Can I wear skirts and dresses?</span>\n<<becomes>><span class="line">Talk about your feelings</span><br>\n<span class="line">You're pretty sensible for a guy</span>\n<<becomes>><span class="line">Men don't have to be strong nowadays</span><br>\n<span class="line">Can some men help me carry this?</span><br>\n<span class="line">Look at his biceps!</span>\n<<becomes>><span class="line">Men are responsible</span><br>\n<span class="line">Have some balls</span><br>\n<span class="line">You're no fun!</span>\n<<becomes>><span class="line">Men work hard and have careers</span><br>\n<span class="line">Women love stay-at-home dads</span><br>\n<span class="line">Can't you take care of her?</span>\n<<becomes>><span class="line">Don't command your wife around</span><br>\n<span class="line">You let her talk to you like that?</span><br>\n<span class="line">Who's wearing the pants in the house?</span>\n<<becomes>><span class="line">It's okay to be emotional</span><br>\n<span class="line">But don't cry in public </span>\n<<becomes>><span class="line">Men are not afraid</span><br>\n<span class="line">I am terrified</span>\n<<becomes>><span class="line">Man up</span>\n<<becomes>><span class="line">I'm not like my father</span><br>\n<span class="line">Should I be like my father?</span>\n<<becomes>><span class="line">Men know to seduce</span><br>\n<span class="line">Oh, you're a virgin?</span><br>\n<span class="line">I just want to feel attractive</span>\n<<becomes>><span class="line">Men mark their territory</span><br>\n<span class="line">Stand up for yourself</span><br>\n<span class="line">I just want someone to hold me</span>\n<<becomes>><span class="line">Are you man enough?</span>\n<<becomes>><span class="line">What kind of man are you?</span><br>\n<<becomes>>I feel lost\n<<endreplace>>\n</span>\n</div>\n\n</div><div id="womanContainer" class="container">\n\n<div class="sentence">\n<span class="womanChar">w</span>\n<span class="womanChar">o</span>\n<span class="womanChar">m</span>\n<span class="womanChar">a</span>\n<span class="womanChar">n</span>\n</div>\n\n<br>\n\n<div class="iam" id="iamwoman">\n<span onclick="womanClick()"> \n<<replace>><span class="line">A how-to guide</span>\n<<becomes>><span class="line">Women are pretty</span>\n<<becomes>><span class="line">Wear make-up</span><br>\n<span class="line">Embrace your natural beauty</span><br>\n<<becomes>><span class="line">Eat what and how much you want</span><br>\n<span class="line">A4 waist challenge</span><br>\n<span class="line">I'm confused?</span>\n<<becomes>><span class="line">Dress cute and sexy</span><br>\n<span class="line">Don't look too pretty</span><br>\n<span class="line">What were you wearing that night?</span>\n<<becomes>><span class="line">Don't be such an attention whore</span><br>\n<span class="line">Be glad they were looking at you</span><br>\n<span class="line">That's just the way it is</span>\n<<becomes>><span class="line">Women like horses</span><br>\n<span class="line">Women bake cupcakes</span><br>\n<span class="line">Don't be too girly</span>\n<<becomes>><span class="line">Be polite and friendly</span><br>\n<span class="line">Don't start an argument</span><br>\n<span class="line">Say NO forcefully, otherwise it won't be heard</span>\n<<becomes>><span class="line">Why aren't you smiling?</span><br>\n<span class="line">A smile would look good on you</span>\n<<becomes>><span class="line">Women are princesses?</span>\n<<becomes>><span class="line">Work hard to earn your position</span><br>\n<span class="line">But don't ask for a raise</span><br>\n<span class="line">And definitely don't be bossy</span>\n<<becomes>><span class="line">Oh, you're the doctor?</span>\n<<becomes>><span class="line">Don't be weak</span><br>\n<span class="line">Women need to be tough</span><br>\n<span class="line">But no one likes an ice queen</span>\n<<becomes>><span class="line">Flirt and initiate</span><br>\n<span class="line">But don't be slutty</span><br>\n<span class="line">I want to be left alone?</span>\n<<becomes>><span class="line">Don't mention your boyfriend</span><br>\n<span class="line">But who will take care of you?</span>\n<<becomes>><span class="line">Are you his girlfriend?</span><br>\n<span class="line">Oh, you're the developer?</span>\n<<becomes>><span class="line">You'll be a great mother</span><br>\n<span class="line">Don't you want to have a career?</span><br>\n<span class="line">Will I be fulfilled?</span>\n<<becomes>><span class="line">Be the best mother in the world</span><br>\n<span class="line">God forbid never breast-feed in public</span>\n<<becomes>><span class="line">Stand up for yourself</span><br>\n<span class="line">Don't talk about feminism too much</span>\n<<becomes>><span class="line">Independent women are sexy</span><br>\n<span class="line">You didn't change your last name?</span>\n<<becomes>><span class="line">I'm not like my mother</span><br>\n<span class="line">Should I be like my mother?</span>\n<<becomes>><span class="line">What kind of woman are you?</span><br>\n<<becomes>>I feel lost\n<<endreplace>>\n</span>\n</div>\n\n</div>\n\n<div id="iamhuman">\n<span class="humanChar">o</span>\n<span class="humanChar">k</span>\n<span class="humanChar">a</span>\n<span class="humanChar">y</span>\n<span class="humanChar">?</span>\n\n\t<div class="credits">\n\t<br>\n\t<br>\n\tA short interactive piece by Shelly Alon (<a href="http://www.twitter.com/shellyalon" target="_blank">@shellyalon</a>)<br>\n\tMade for the One Game A Month Challenge.<br>The topic GENDER was given by <a href="http://www.twitter.com/mar_ott" target="_blank">Mareike Ottrand</a>.<br>Look at the previous games at <a href="http://shellyalon.itch.io" target="_blank">itch.io</a><br>\n\t<br>\n\tTyped in <a href="https://fonts.google.com/specimen/News+Cycle" target="_blank">News Cycle</a><br>\n\t<br>\n\tSounds from freesounds.com by [[various artists]]\n\t</div>\n\n</div>\n\n\n<div style="display:none;"><img src="!@#$" onerror="fuckHuman();" /></div>\n<<endnobr>><<nobr>>\n<audio class="audioFile" src="sounds/60844__adam-joseph__phone-pickup-click-22.mp3" type="audio/mpeg">\n<audio class="audioFile" src="sounds/72185__lg__switch-32.mp3" type="audio/mpeg">\n<audio class="audioFile" src="sounds/119415__joedeshon__rocker-switch.mp3" type="audio/mpeg">\n<audio class="audioFile" src="sounds/121192__gusgus26__biro.mp3" type="audio/mpeg">\n<audio class="audioFile" src="sounds/192277__lebcraftlp__click.mp3" type="audio/mpeg">\n<audio class="audioFile" src="sounds/202312__7778__dbl-click.mp3" type="audio/mpeg">\n<audio class="audioFile" src="sounds/218115__mastersdisaster__switch-on-livingroom.mp3" type="audio/mpeg">\n<audio class="audioFile" src="sounds/219067__annabloom__click3.mp3" type="audio/mpeg">\n<audio class="audioFile" src="sounds/234127__hukleesyr__staple-gun.mp3" type="audio/mpeg">\n<audio class="audioFile" src="sounds/256116__kwahmah-02__click.mp3" type="audio/mpeg">\n<audio class="audioFile" src="sounds/349330__soundsofawesome__click.mp3" type="audio/mpeg">\n<audio class="audioFile" src="sounds/atmen_-03.mp3" type="audio/mpeg">\n<audio class="audioFile" src="sounds/atmen_-06.mp3" type="audio/mpeg">\n<audio class="audioFile" src="sounds/atmen_-08.mp3" type="audio/mpeg">\n<audio class="audioFile" src="sounds/14157__adcbicycle__9.mp3" type="audio/mpeg">\n<audio class="audioFile" src="sounds/46625__123jorre456__dropping-and-sliding-paper.mp3" type="audio/mpeg">\n<audio class="audioFile" src="sounds/176146__swagmuffinplus__sliding-doors.wav" type="audio/wav">\n<audio class="audioFile" src="sounds/345102__metrostock99__shower-curtain-sliding.mp3" type="audio/mpeg">\n\n<audio class="audioFile" src="sounds/170894__alien-s__drawer.mp3" type="audio/mpeg">\n<audio class="audioFile" src="sounds/245782__rocotilos__open-drawer.mp3" type="audio/mpeg">\n<audio class="audioFile" src="sounds/334495__sruelas__drawer-open.mp3" type="audio/mpeg">\n\n\n\n</audio>\n\n\n\n\n<<endnobr>>

\n.manChar{\n\tposition: relative;\n\tz-index: 5;\n\tleft: 0px;\n\ttop: 0px;\n\ttransition: left 4s ease-out, top 4s ease-out, opacity 4s ease-in;\n\t-webkit-transition: left 4s ease-out, top 4s ease-out, opacity 4s ease-in;\n\topacity: 1;\n}\n\n\n.humanChar{\n\tposition: relative;\n\tz-index: 5;\n\tleft: 0px;\n\ttop: 0px;\n\ttransition: left 4s ease-out, top 4s ease-out;\n\t-webkit-transition: left 4s ease-out, top 4s ease-out;\n\topacity: 0;\n}\n\n.womanChar{\n\tposition: relative;\n\tz-index: 5;\n\tleft: 0px;\n\ttop: 0px;\n\ttransition: left 4s ease-in, top 4s ease-in, opacity 4s ease-in;\n\t-webkit-transition: left 4s ease-in, top 4s ease-in, opacity 4s ease-in;\n\t\topacity: 1;\n}\n\n.iam{\nopacity: 1;\ntransition: 8s;\n-webkit-transition: 8s;\n}\n\n#iamman{\nopacity: 1;\ntransition: 8s;\n-webkit-transition: 8s;\n}\n\n#iamwoman{\nopacity: 1;\ntransition: 8s;\n-webkit-transition: 8s;\n}\n\n.credits{\n\tposition: relative;\n\ttop: 50px;\n\topacity: 0;\n\tz-index: 101;\n\tfont-size: 16px;\n\tline-height: 1.7em;\n\ttext-align: center;\n\tmargin: 0 auto;\n\tmax-width: 80%;\n\n\tvisibility: hidden;\n\ttransition: top 4s ease-out, opacity 4s ease-in;\n\t-webkit-transition: top 4s ease-out, opacity 4s ease-in;\n}\n\n.credits a, a.externalLink{\npadding-bottom: 0px;\nborder-bottom: 2px solid white;\ntransition: padding-bottom .2s;\n-webkit-transition: padding-bottom .2s;\n}\n\n.credits a:hover, a.externalLink:hover{\npadding-bottom: 2px;\n}\n\n\n.credits2 a, a.externalLink{\npadding-bottom: 0px;\nborder-bottom: 2px solid white;\ntransition: padding-bottom .2s;\n-webkit-transition: padding-bottom .2s;\n}\n\n.credits2 a.externalLink:hover, a:hover{\npadding-bottom: 2px;\n}

MEN/WOMEN

shelly alon

//requires jquery\n\nvar manNr = 1; \nvar manClicks = 0;\nvar womanNr = 1;\nvar womanClicks = 0;\n\nvar pastR = 0;\nvar pastE = 0;\n\nfunction makeSound(){\n\tvar r = getRandom(0, 17);\n\twhile (r == pastR){\n\t\tvar r = getRandom(0, 17);\n\t}\t\n\tpastR = r;\n\t$('.audioFile').each(function(i, obj){\n\t\tif(i == r){\n\t\t\t$(this).trigger("play");\n\t\t}\n\t});\n}\n\nfunction makeSlideSound(){\n\tvar e = getRandom(0, 3);\n\twhile (e == pastE){\n\t\tvar e = getRandom(0, 3);\n\t}\t\n\tpastE = e;\n\t$('.slideAudio').each(function(i, obj){\t\t\n\t\tif(i == e){\n\t\t\t$(this).trigger("play").delay(1000);\n\t\t}\n\t});\n}\n\n\n\n\n\nwindow.womanClick = function(){\n\twomanClicks += 1;\n\t$('#womanContainer').css("background-color", getWomanColor(womanClicks));\n\tcountClicks();\n\tif(womanClicks > 20){\n\t\t$('.womanChar').each(function(t, obj) {\n\t\t\t$(this).css("opacity", 0);\n\t\t}); \n\t\treturn;\n\t}\n\t$('.womanChar').each(function(t, obj) {\n\t\t$(this).css("left", getRandom(-2, 2)*womanNr);\n\t\t$(this).css("top", getRandom(-2, 2)*womanNr);\n\t}); \n\twomanNr = womanNr * 1.4;\n\tmakeSound();\n\n};\n\nwindow.manClick = function(){\n\tmanClicks++;\n\t$('#manContainer').css("background-color", getManColor(manClicks));\n\tcountClicks();\n\tif(manClicks > 18){\n\t\t$('.manChar').each(function(t, obj) {\n\t\t\t$(this).css("opacity", 0);\n\t\t}); \n\t\treturn;\n\t}\n\t$('.manChar').each(function(i, obj) {\n\t\t$(this).css("left", getRandom(-2, 2)*manNr);\n\t\t$(this).css("top", getRandom(-2, 2)*manNr);\n\t}); \n\tmanNr = manNr * 1.4;\n\tmakeSound();\n};\n\nfunction getManColor(i){\n\tif(i == 3){\n\t\treturn "#1c77ff";\n\t}\n\telse if(i == 6){\n\t\treturn "#2569f2";\n\t}\n\telse if(i == 9){\n\t\treturn "#2745dd";\n\t}\n\telse if(i == 15){\n\t\t$('#iamman').css("opacity", 0.7);\n\t\treturn "#3a2edd";\t\n\t}\n\telse if(i == 17){\n\t\treturn "#7413ec";\n\t}\n\telse if(i == 19){\n\t\t$('#iamman').css("opacity", 0);\n\t}\n}\n\nfunction countClicks(){\n\tvar i = manClicks + womanClicks;\n\tif(i == 10){\n\t\tresetHuman(0.8);\n\t\t\t$('.test').css("display", "block");\n\t\t\t$('.test').css("opacity", 1);\n\t\t\t$('.test').css("top", 0);\n\t}\n\telse if(i == 15){\n\t\tresetHuman(0.6);\n\t}\n\telse if(i == 26){\n\t\tresetHuman(0.5);\n\t}\n\telse if(i == 30){\n\t\tresetHuman(0.3);\n\t}\n\telse if(i == 37){\n\t\tresetHuman(0.2);\n\t}\n\telse if(i == 38){\n\t\tresetHuman(0.27);\n\t}\n\telse if(i == 39){\n\t\tresetHuman(0.17);\n\t}\n\telse if(i == 40){\n\t\tresetHuman(0.13);\n\t}\n\telse if(i == 41){\n\t\t$('.credits').delay(6000).queue(function (next) {\n\t\t\t$(this).css("visibility", "visible");\n\t\t\t$(this).css("opacity", 1);\n\t\t\t$(this).css("top", 0);\n\t\t});\n\t\t$('.humanChar').each(function(i, obj) {\n\t\t\t$(this).css("left", 0);\n\t\t\t$(this).css("top", 0);\n\t\t}); \n\t\tmakeSlideSound();\n\t}\n}\n\nfunction getWomanColor(i){\n\tif(i == 3){\n\t\treturn "#f661b2";\n\t}\n\telse if(i == 6){\n\t\treturn "#ef52c1";\n\t}\n\telse if(i == 9){\n\t\treturn "#b72ff0";\n\t}\n\telse if(i == 15){\n\t\t$('#iamwoman').css("opacity", 0.7);\n\t\treturn "#832ee2";\n\t}\n\telse if(i == 20){\n\t\treturn "#7413ec";\n\t}\n\telse if(i == 22){\n\t\t$('#iamwoman').css("opacity", 0);\n\t}\n}\n\n function getRandom(min, max) { \n\treturn Math.floor(Math.random() * (max - min + 1)) + min; \n}\n\nwindow.creditsClick = function(){\n\t$('#passages').css("overflow", "scroll");\n}\n\nwindow.fuckHuman = function(){\n\tmanNr = 1; \n\tmanClicks = 0;\n\twomanNr = 1;\n\twomanClicks = 0;\n\tvar xArray = [-1338,1928,-937,1893,-1000,990,-1230,1403,-1500,1111]\n\tvar yArray = [1338,-1928,937,-1893,1000,-990,1230,-1403,1500,-1111]\n\t$('.humanChar').each(function(i, obj) {\n\t\t$(this).css("left", xArray[i]+getRandom(-300,300));\n\t\t$(this).css("top", yArray[i]+getRandom(-300,300));\n\t}); \n}\n\nfunction resetHuman(t){\nvar xArray = [-1338,1928,-937,1893,-1000,990,-1230,1403,-1500,1111]\n\tvar yArray = [1338,-1928,937,-1893,1000,-990,1230,-1403,1500,-1111]\n\t$('.humanChar').each(function(i, obj) {\n\t\t$(this).css("opacity", 1);\n\t\t$(this).css("left", xArray[i]*t+getRandom(-50,50));\n\t\t$(this).css("top", yArray[i]*t+getRandom(-50,50));\n\t}); \n}\n

@import url('https://fonts.googleapis.com/css?family=Fjalla+One');\n\n@import url('https://fonts.googleapis.com/css?family=Oswald');\n\n@import url('https://fonts.googleapis.com/css?family=News+Cycle:400,700');\n\n.revision-span-in {\n\topacity: 0;\n}\n.revision-span:not(.revision-span-out) {\n\ttransition: .5s; -webkit-transition: 1s;\n\t-webkit-transition-delay: 0.2s; /* Safari */\n transition-delay: 0.2s;\n}\n.revision-span-out {\n\tposition:absolute;\n\topacity: 0;\n\n}\n\n\n\nbody {\n\tmargin:0;\n\tpadding:0;\n\tbackground:#7413ec;\n\tcolor:white;\n\tfont-family: 'News Cycle', sans-serif;\n\tfont-weight: 700;\n\tfont-size:20px;\n\tline-height:1.4em;\n\ttext-align: center;\n\n\t-webkit-touch-callout: none;\n-webkit-user-select: none;\n-khtml-user-select: none;\n-moz-user-select: none;\n-ms-user-select: none;\nuser-select: none;\n}\n\n/* hide sidebar */\n#sidebar { \n\tdisplay:none;\n}\n\n/* center layout */\n#passages {\nmargin: 0 !important; \nborder:0;\npadding: 0 !important;\noverflow: hidden;\n}\n\n\n.passage a{\ntext-decoration: none;\ncolor: white;\n}\n.passage a:hover{\ntext-decoration: none;\ncolor: white;\n}\n\n.line{\nposition:relative;\npadding-bottom: 0px;\nborder-bottom: 2px solid white;\ntransition: padding-bottom .3s;\n-webkit-transition: padding-bottom .3s;\n}\n\n.line:hover{\npadding-bottom: 3px;\nborder-bottom: 2px solid white;\n}\n\n.passage img {\nmargin:0 auto;\ndisplay:block;\nmax-width:120px;\nheight:auto;\n}\n\ndiv{\npadding: 0;\nmargin: 0;\n}\n\np{\nmargin: 0;\n}\n\n.container{\n\theight: 100vh;\n\tmin-height: 200px;\n\twidth: 50%;\n\ttop:0;\n\tposition: relative;\n\tfloat: left;\n\ttransition: background-color 5s ease-in;\n}\n\n.sentence{\n\tmargin-left: auto;\n\tmargin-right: auto;\n\tposition: absolute;\n\ttop: 40%;\n\twidth: 100%;\n\ttext-align: center;\n\tfont-size: 72px;\n\tfont-family: 'News Cycle', sans-serif;\n\tfont-weight: 700;\n\ttext-transform: uppercase;\n}\n\n.iam{\n\tmargin-left: auto;\n\tmargin-right: auto;\n\tposition: absolute;\n\ttop: 55%;\n\twidth: 100%;\n\ttext-align: center;\n\theight: 10em;\n\tmax-width: 80vw;\n\tz-index: 100;\n}\n\n#manContainer{\n\tbackground-color: #1c8cff;\n}\n\n#womanContainer{\n\tbackground-color: #ff73ab;\n}\n\n#iamhuman{\n\tmargin-left: auto;\n\tmargin-right: auto;\n\tposition: absolute;\n\ttop: 40%;\n\twidth: 100%;\n\ttext-align: center;\n\tfont-size: 72px;\n\tfont-family: 'News Cycle', sans-serif;\n\tfont-weight: 700;\n\ttext-transform: uppercase;\n}\n\n.desktoponly{\n\tmargin-left: auto;\n\tmargin-right: auto;\n\tposition: absolute;\n\ttop: 40%;\n\twidth: 100%;\n\ttext-align: center;\n\tfont-size: 62px;\n\tline-height: 60px;\n\tfont-family: 'News Cycle', sans-serif;\n\tfont-weight: 700;\n\ttext-transform: uppercase;\n}\n\n#overlay{\n\t\tdisplay: none;\n\t\tz-index: 6000;\n\t\tposition: absolute;\n\t}\n\n@media only screen \n and (max-device-width: 736px) \n and (orientation: portrait) { \n\t#overlay{\n\t\tdisplay: block;\n\t\tz-index: 6000;\n\t\tposition: absolute;\n\t}\n}\n\n\n