<head>

</head>

a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

html{

position: absolute;

height: 100%;

width: 100%;

padding: env(safe-area-inset-top) 0 calc(env(safe-area-inset-bottom) + 34px) 0;

}

#pepe{

width: 100%;

height: 100%;

position: absolute;

box-sizing: border-box;

display: flex;

align-items: center;

top: 0;

}

#background{

width: 100%;

height: 100%;

position: fixed;

overflow: hidden;

}

#flash{

background: #FFF;

opacity: 0;

width: 100%;

height: 100%;

transition: ease opacity 200ms;

}

#background.blue {

background: linear-gradient(-45deg, #2200ff, #0076ff, #00abff, #00d5ff);

background-size: 400% 400%;

animation: gradient 15s ease infinite;

background-attachment: fixed;

}

#background.yellow {

background: linear-gradient(-45deg, #ffc60d, #ffd601, #ffe600, #fff700);

background-size: 400% 400%;

animation: gradient 10s ease infinite;

background-attachment: fixed;

}

#background.green {

background: linear-gradient(-45deg, #2eab00, #30c600, #2fe200, #2bff00);

background-size: 400% 400%;

animation: gradient 10s ease infinite;

background-attachment: fixed;

}

#background.red {

background: linear-gradient(-45deg, #ff0077, #ff075e, #ff2145, #ff3729);

background-size: 400% 400%;

animation: gradient 10s ease infinite;

background-attachment: fixed;

}

@keyframes gradient { 0% {background-position: 0% 50%;} 50% {background-position: 100% 50%;} 100% {background-position: 0% 50%;} }

section {

display: grid;

grid-template-columns: repeat(16, 1fr);

grid-template-rows: repeat(16, 1fr);

gap: 0;

place-items: start;

width: 80vw;

height: 80vw;

margin: auto auto auto -40vw;

left: 50%;

position: absolute;

}

@media all and (orientation: landscape){

section{width: 80vh; height: 80vh; margin: auto auto auto -40vh;}

body {

grid-template-areas:

". . . . . . . . . . . . . . . ."

". . x x x x x x x x x x x x . ."

". . . . . . . . . . . . . . . ."

". . . . . . . . . . . . . . . .";

}

.body * { width:100%; height:100%; grid-area:x; }

.part * { width:100%; height:100%; }

</style><style id="base">

/* Pepe Base */

.base * { background: #00cc66;}

.base *:nth-child(1) { grid-column :7;grid-row :4;}

.base *:nth-child(2) { grid-column :8;grid-row :4;}

.base *:nth-child(3) { grid-column :10;grid-row :4;}

.base *:nth-child(4) { grid-column :11;grid-row :4;}

.base *:nth-child(5) { grid-column :4;grid-row :7;}

.base *:nth-child(6) { grid-column :6;grid-row :5;}

.base *:nth-child(7) { grid-column :7;grid-row :5;}

.base *:nth-child(8) { grid-column :8;grid-row :5;}

.base *:nth-child(9) { grid-column :9;grid-row :5;}

.base *:nth-child(10) { grid-column :10;grid-row :5;}

.base *:nth-child(11) { grid-column :11;grid-row :5;}

.base *:nth-child(12) { grid-column :12;grid-row :5;}

.base *:nth-child(13) { grid-column :7;grid-row :7;}

.base *:nth-child(14) { grid-column :6;grid-row :6;}

.base *:nth-child(15) { grid-column :7;grid-row :6;}

.base *:nth-child(16) { grid-column :8;grid-row :6;}

.base *:nth-child(17) { grid-column :9;grid-row :6;}

.base *:nth-child(18) { grid-column :10;grid-row :6;}

.base *:nth-child(19) { grid-column :11;grid-row :6;}

.base *:nth-child(20) { grid-column :12;grid-row :6;}

.base *:nth-child(21) { grid-column :13;grid-row :6;}

.base *:nth-child(22) { grid-column :5;grid-row :7;}

.base *:nth-child(23) { grid-column :6;grid-row :7;}

.base *:nth-child(24) { grid-column :7;grid-row :7;}

.base *:nth-child(25) { grid-column :8;grid-row :7;}

.base *:nth-child(26) { grid-column :9;grid-row :7;}

.base *:nth-child(27) { grid-column :10;grid-row :7;}

.base *:nth-child(28) { grid-column :11;grid-row :7;}

.base *:nth-child(29) { grid-column :12;grid-row :7;}

.base *:nth-child(30) { grid-column :13;grid-row :7;}

.base *:nth-child(31) { grid-column :5;grid-row :8;}

.base *:nth-child(32) { grid-column :6;grid-row :8;}

.base *:nth-child(33) { grid-column :7;grid-row :8;}

.base *:nth-child(34) { grid-column :8;grid-row :8;}

.base *:nth-child(35) { grid-column :9;grid-row :8;}

.base *:nth-child(36) { grid-column :10;grid-row :8;}

.base *:nth-child(37) { grid-column :11;grid-row :8;}

.base *:nth-child(38) { grid-column :12;grid-row :8;}

.base *:nth-child(39) { grid-column :5;grid-row :9;}

.base *:nth-child(40) { grid-column :4;grid-row :10;}

.base *:nth-child(41) { grid-column :6;grid-row :9;}

.base *:nth-child(42) { grid-column :7;grid-row :9;}

.base *:nth-child(43) { grid-column :8;grid-row :9;}

.base *:nth-child(44) { grid-column :9;grid-row :9;}

.base *:nth-child(45) { grid-column :10;grid-row :9;}

.base *:nth-child(46) { grid-column :11;grid-row :9;}

.base *:nth-child(47) { grid-column :12;grid-row :9;}

.base *:nth-child(48) { grid-column :13;grid-row :9;}

.base *:nth-child(49) { grid-column :5;grid-row :10;}

.base *:nth-child(50) { grid-column :6;grid-row :10;}

.base *:nth-child(51) { grid-column :7;grid-row :10;}

.base *:nth-child(52) { grid-column :8;grid-row :10;}

.base *:nth-child(53) { grid-column :9;grid-row :10;}

.base *:nth-child(54) { grid-column :10;grid-row :10;}

.base *:nth-child(55) { grid-column :11;grid-row :10;}

.base *:nth-child(56) { grid-column :12;grid-row :10;}

.base *:nth-child(57) { grid-column :13;grid-row :10;}

.base *:nth-child(58) { grid-column :4;grid-row :9;}

.base *:nth-child(59) { grid-column :5;grid-row :11;}

.base *:nth-child(60) { grid-column :6;grid-row :11;}

.base *:nth-child(61) { grid-column :7;grid-row :11;}

.base *:nth-child(62) { grid-column :8;grid-row :11;}

.base *:nth-child(63) { grid-column :9;grid-row :11;}

.base *:nth-child(64) { grid-column :10;grid-row :11;}

.base *:nth-child(65) { grid-column :11;grid-row :11;}

.base *:nth-child(66) { grid-column :12;grid-row :11;}

.base *:nth-child(67) { grid-column :5;grid-row :6;}

.base *:nth-child(68) { grid-column :4;grid-row :8;}

.base *:nth-child(69) { grid-column :6;grid-row :12;}

.base *:nth-child(70) { grid-column :7;grid-row :12;}

.base *:nth-child(71) { grid-column :8;grid-row :12;}

.base *:nth-child(72) { grid-column :9;grid-row :12;}

.base *:nth-child(73) { grid-column :10;grid-row :12;}

.base *:nth-child(74) { grid-column :11;grid-row :12;}

.part * { width:100%; height:100%; }

</style><style id="eyes">

/* eyes */

.eye * { background :#339966;}

/* left eye */

.eye *:nth-child(1) { grid-column :8;grid-row :7;background: white;}

.eye *:nth-child(2) { grid-column :9;grid-row :7;background: black;}

.eye *:nth-child(3) { grid-column :10;grid-row :7;background :white;}

/* shadow */

.eye *:nth-child(4) { grid-column :7;grid-row :7;}

/* right eye */

.eye *:nth-child(5) { grid-column :11;grid-row :7;background: white;}

.eye *:nth-child(6) { grid-column :12;grid-row :7;background: black;}

.eye *:nth-child(7) { grid-column :13;grid-row :7;background :white;}

/* Look Left*/

.eye.lookleft *:nth-child(1) { grid-column :11;grid-row :7;background: white;}

.eye.lookleft *:nth-child(2) { grid-column :12;grid-row :7;background: white;}

.eye.lookleft *:nth-child(3) { grid-column :13;grid-row :7;background: black;}

.eye.lookleft *:nth-child(5) { grid-column :8;grid-row :7;background: white;}

.eye.lookleft *:nth-child(6) { grid-column :9;grid-row :7;background: white;}

.eye.lookleft *:nth-child(7) { grid-column :10;grid-row :7;background: black;}

</style><style id="mouth">

/* Straight */

.mouth * { background: red; margin-top: 0;}

@media all and (orientation:landscape) {.mouth *{margin-top: 0;}}

/* top lips */

.mouth *:nth-child(1) { grid-column :8;grid-row :10;}

.mouth *:nth-child(2) { grid-column :9;grid-row :10;}

.mouth *:nth-child(3) { grid-column :10;grid-row :10;}

.mouth *:nth-child(4) { grid-column :11;grid-row :10;}

.mouth *:nth-child(5) { grid-column :12;grid-row :10;}

.mouth *:nth-child(6) { grid-column :13;grid-row :10;}

/* sad and happy extra pixels */

.mouth *:nth-child(7) { grid-column :7;grid-row :9; display:none}

.mouth *:nth-child(8) { grid-column :7;grid-row :11; display:none}

/* mouth happy */

.mouth.happy *:nth-child(7){ grid-column: 7; grid-row: 9; display:block;}

/* mouth sad */

.mouth.sad *:nth-child(8){ grid-column: 7; grid-row: 11; display:block;}

/* Rendering here */

</style><section class="part base">

</section><section class="part eye">

</section><section class="part mouth">

/* interactions */

#pepe.bounce{

animation: bounce 1s ease;

}

@keyframes bounce {

0%, 30%, 50%, 80%, 100% {transform: translateY(0);}

20% {transform: translateY(-20px);}

40% {transform: translateY(-10px);}

}

</style><script id="interactions">

let pxl = document.getElementById("pepe");

let bg = document.getElementById("background");

let flash = document.getElementById("flash");

let mouth = document.querySelector(".mouth");

let eye_ = document.querySelector(".eye");

let look_left = false;

let look_interval;

let colors = ["blue","yellow","green","red"];

let current_bg = colors[Math.floor(Math.random() * colors.length)];

let moods = ["happy", "neutral", "sad"];

let current_mood = moods[Math.floor(Math.random() * moods.length)];

bg.classList.add(current_bg);

if (mouth !== null){

mouth.classList.add(current_mood);

}

let stats_on = false;

let tappedTwice = false;

let current_animation = '';

let interact = function(animation){

if(!tappedTwice) {

if(pxl.classList.contains(current_animation)){

pxl.classList.remove(current_animation);

}

void bg.offsetWidth;

flash.style.cssText = "opacity: 0.420";

setTimeout(function(){

//bg

bg.classList.remove(current_bg);

current_bg = colors[Math.floor(Math.random() * colors.length)];

bg.classList.add(current_bg);

//mood

if (mouth !== null) {

mouth.classList.remove(current_mood);

}

current_mood = moods[Math.floor(Math.random() * moods.length)];

if (mouth !== null) {

mouth.classList.add(current_mood);

}

if(current_mood == "neutral"){

clearInterval(look_interval);

look_interval = setInterval(function(){

if(eye_ !== null){

eye_.classList.add('lookleft');

setTimeout(function(){

eye_.classList.remove('lookleft');

}, 6000)

}

}, 5000);

}else{

lookleft = false;

clearInterval(look_left);

}

}, 100)

setTimeout(function(){

flash.style.cssText = ""

},200)

void pepe.offsetWidth;

current_animation = animation;

pepe.classList.add(current_animation);

tappedTwice = true;

setTimeout( function() { tappedTwice = false; }, 300 );

return false;

}

setTimeout(function(){

stats_on = true;

stats.style.cssText = "top: 0;";

document.getElementById('stats').classList.add('stats_on');

},200)

}

let close_stats = function(){

stats_on = false;

stats.style.cssText = "";

}

document.getElementById("pepe").addEventListener('click', function(){interact('bounce');});

document.getElementById("pepe").addEventListener('touchstart', function(){interact('bounce');});

document.getElementById("pepe").addEventListener('touchstart', function (e) {e.preventDefault();});

</script></body>

</html>