@font-face {
  font-family: 'Nintendo';
  src: url('../font/ensconcesansdemo-condensed-webfont.woff2') format('woff2'),
       url('../font/ensconcesansdemo-condensed-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}





/**************/
/* CSS REMEDY */
/**************/
*, *::after, *::before {
  box-sizing:border-box;  
}

button:not([disabled]), .button {
  cursor:url(../images/mariocursor-1.cur), auto;
  transition: .2s;
}





/****************/
/* CUSTOM PROPS */
/****************/

:root {
  --color-background-main:rgb(219, 172, 41);
  --color-background-dimmed:rgb(63, 63, 63);
  --drop-shadow:0em .3em .3em var(--color-controller-shadow);

  --size-button:4.5em;
  --color-button-hover:rgb(216 216 216);
  --color-button-active:rgb(122 122 122);

  --size-controller-height:19em;
  --size-controller-width:45em;

  --color-controller-main:#d1d1d1;
  --color-controller-dark:#777777;
  --color-controller-highlight:#fff8;
  --color-controller-shadow:#0003;

  --size-d-pad:10.625em;
  --color-d-pad-main:#4e4e4e;
  --color-d-pad-highlight:#fff6;
  --color-d-pad-highlightje:#fff4;
  --color-d-pad-shadow:#0006;
  --color-d-pad-shadowtje:#0004;

  --size-face-buttons:17.5em;
  --color-face-buttons-background:#8d8d8d;
  --color-face-buttons-highlight:#fff5;
  --color-face-buttons-shadow:#0005;
  --color-face-buttons-a:red;
  --color-face-buttons-b:rgb(253 187 5);
  --color-face-buttons-x:rgb(14 25 185);
  --color-face-buttons-y:rgb(15 153 27);

  --size-start-select:8.4375em;
  --size-start-select-button-height:1.375em;
  --color-start-select-button-background:rgb(158 158 158);
  --color-start-select-button-hightlight: #fff4;
  --color-start-select-button-hightlightje: #fff2;
  --color-start-select-button-shadow: #000;
  --color-start-select-button-shadowtje: #0002;
  --color-start-select-button-shadowtjetje: #0004;
  --color-start-select-button-shadowtjetjetje: #0006;
  --color-start-select-button-shadowtjetjetjetje: #0008;
  --color-start-select-button-shadowtjetjetjetjetje: #0000;

  --size-shoulder:10.625em;
  --color-shoulder:rgb(190, 190, 190);
  --color-shoulder-highlight:#fff8;
  --color-shoulder-highlightje:#fff6;
  --color-shoulder-shadow:#0003;
  --color-shoulder-shadowtje:#0002;
}





/***************/
/* GENERAL CSS */
/***************/
html {
  height:100%;
}

body {
  margin:0;
  overflow:hidden;
  background-color: var(--color-background-main);
  font-family: "Nintendo";
}

body.colorchange {
  background-color: var(--color-background-dimmed);
}





/**********/
/* button */
/**********/

button {
  position: absolute;
  bottom: calc(var(--size-button) / 4);
  right: calc(var(--size-button) / 4);
  
  width: var(--size-button);
  aspect-ratio:1/1;

  appearance:none;
  border-radius: 50%;
  border:none;
  box-shadow:var(--drop-shadow);
}

button:hover, button:focus {
  background-color: var(--color-button-hover);
}

button:active {
  background-color: var(--color-button-active);
}





/********/
/* MAIN */
/********/

main {
  position: absolute;
  width: 100%;
  height: 100%;

  display:grid;
  grid-template-rows:1fr 1fr;
}





/**************/
/* CONTROLLER */
/**************/

.controller {
  font-size: 1em;
  position: relative;
  place-self:start center;

  display:grid;
  grid-template-columns:
    calc(var(--size-controller-height) / 2) 
    calc(var(--size-controller-height)  / 2) 
    calc(var(--size-controller-width) - var(--size-controller-height) * 2) 
    calc(var(--size-controller-height)  / 2)
    calc(var(--size-controller-height)  / 2);
  place-items:center;
  isolation: isolate;

  filter:drop-shadow(var(--drop-shadow));

  font-size: min(2vw, 1em);
}







/*******************/
/* main controller */
/*******************/

.balk {
  position: relative;
  align-self: start;
  grid-area: 1 / 2 / 2 / 5;

  width: calc(var(--size-controller-width) - var(--size-controller-height)); 
  aspect-ratio:1/.62;

  display:grid;
  place-items:center;

  background-color: var(--color-controller-main);
  box-shadow: inset 0 .8em .3em -.3em var(--color-controller-highlight);
}

.balk::after {
  content:"";
  position:absolute;
  top:calc(100% - 1px);

  width: 15.75em;
  height: 1em;
  clip-path:polygon(0 0, 100% 0, calc(100% - .6875em) 100%, .6875em 100%, 0 0);

  background-color: var(--color-controller-main);
  background-image:
    linear-gradient(
      transparent .25em,
      var(--color-controller-shadow) .875em
    );
  -webkit-mask:linear-gradient(
    to right,
    transparent .1875em,
    red 12px calc(100% - .75em),
    transparent calc(100% - .25em)
  );
  mask:linear-gradient(
    to right,
    transparent .1875em,
    red 12px calc(100% - .75em),
    transparent calc(100% - .25em)
  );
}

.cirkel {
  width: var(--size-controller-height);
  aspect-ratio:1/1;
  
  background-color: var(--color-controller-main);
  border-radius: 50%;
  box-shadow: 
    inset .5em .5em .3em var(--color-controller-highlight),
    inset -.5em -.5em .3em var(--color-controller-shadow);
}

.cirkel.links{
  grid-area: 1 / 1 / 2 / 3;
}

.cirkel.rechts {
  grid-area: 1 / 4 / 2 / 6;
}





/********/
/* logo */
/********/

.logo {
  position:absolute;
  top: 1em;

  display:grid;
  text-align:center;

  user-select:none;
}

/* tekst */
h1 {
  margin:0;
  transform: skew(-6deg);
  font-size: 2.3em;
  color: var(--color-controller-dark);
}

h2  {
  justify-self:center;
  margin:0;
  padding: .2em;
  transform: scalex(2) skew(-4deg);
  background-color: var(--color-controller-dark);
  font-size: .5em;
  letter-spacing: .162em;
  color: var(--color-controller-main);
}

/* beeldmerk */
.beeldmerk {
  position:absolute;
  left:-2.875em;
	top:.5em;

  filter:drop-shadow(1.2em .6em 0 var(--color-controller-dark));
}

.bol {
  width: 1.1875em;
  height: 1.1875em;
  left: 10%;

  background:radial-gradient( at 0.1em 1em, transparent .6em, var(--color-controller-dark) .6em) center center / 1.2em 1.2em no-repeat;
  border-radius: 50%;
}

.ovaal {
  position: absolute;
  top: 1em;
  left: -.6em;

  width: 1.25em;
  height: .6em;

  background-color: var(--color-controller-dark);
  border-radius: 50%;  
}





/*********/
/* d-pad */
/*********/

.d-pad-container {
  position: absolute;
  top: calc((var(--size-controller-height) - var(--size-d-pad)) / 2);
  left: calc((var(--size-controller-height) - var(--size-d-pad)) / 2);

  width: var(--size-d-pad);
  aspect-ratio:1/1;

  display:grid;
  place-items:center;

  border-radius: 50%;
  box-shadow: 
    inset .1em .1em .15em var(--color-d-pad-shadowtje),
    inset -.1em -.1em .15em var(--color-d-pad-highlightje),
    -.1em -.1em .15em var(--color-d-pad-shadowtje),
    .1em .1em .15em var(--color-d-pad-highlightje);
}

/* d-pad background */
.d-pad-bg {
  position:absolute;
  width: 6.75em;
  aspect-ratio:1/1;

  display:grid;
  place-items:center;
}

.d-pad-bg div {
  position: absolute;

  background-color: black;
  border-radius: .3em;
  box-shadow: 0 0 .1em .25em #000;
}

.d-pad-bg div:first-child {
  width: 100%;
  aspect-ratio:3/1;
}

.d-pad-bg div:last-child {
  height: 100%;
  aspect-ratio:1/3;
}

/* d-pad control */
.d-pad {
  position: relative;
  width: 6.625em;
  aspect-ratio:1/1;

  display:grid;
  place-items:center;


  transform-origin: center center -1em;
  transform: perspective(5em) rotatey(0deg) scale(.82);
  transition: .2s;  
}

.d-pad.left  { transform: perspective(5em) rotatey(-5deg) scale(.82); }
.d-pad.right { transform: perspective(5em) rotatey(5deg)  scale(.82); }
.d-pad.up    { transform: perspective(5em) rotatex(5deg)  scale(.82); }
.d-pad.down  { transform: perspective(5em) rotatex(-5deg) scale(.82); }

/* d-pad button */
.d-pad-button {
  position: absolute;
  
  width: 2.25em;
  aspect-ratio:1/1;

  display: grid;
  place-items: center;

  background-color: var(--color-d-pad-main);
}

.d-pad-button.left {
  justify-self: start;

  border-radius: .5em 0em 0em .5em;
  box-shadow: 
    inset .2em .2em .15em -.1em var(--color-d-pad-highlight),
    inset 0em -.3em .15em -.2em var(--color-d-pad-shadow);
}

.d-pad-button.up {
  align-self: start;
  
  border-radius: .5em .5em 0em 0em;
  box-shadow: 
    inset .2em .2em .15em -.1em var(--color-d-pad-highlight),
    inset -.3em 0em .15em -.2em var(--color-d-pad-shadow);
}

.d-pad-button.down {
  align-self: end;
  
  border-radius: 0 0 .5em .5em;
  box-shadow: 
    inset .3em 0em .15em -.2em var(--color-d-pad-highlight),
    inset -.2em -.2em .15em -.1em var(--color-d-pad-shadow);
}

.d-pad-button.right {
  justify-self: end;
  
  border-radius: 0 .5em .5em 0em;
  box-shadow: 
    inset 0em .3em .15em -.2em var(--color-d-pad-highlight),
    inset -.2em -.2em .15em -.1em var(--color-d-pad-shadow);
}

/* d-pad button vormpjes */
.d-pad-button div {
  width: 1em;
  aspect-ratio:1/1;
  transform: rotate(45deg);
}

.d-pad-button.left div {
  background: linear-gradient(
      45deg,
      transparent 43%, 
      var(--color-d-pad-highlightje) 50%, 
      transparent 54%
    );
  box-shadow: 
    inset .2em 0em .1em -.1em var(--color-d-pad-shadowtje),
    inset 0em -.2em .1em -.1em var(--color-d-pad-shadowtje),
    -.15em 0em .1em -.1em var(--color-d-pad-shadowtje),
    0em .15em .1em -.1em var(--color-d-pad-shadowtje);
}

.d-pad-button.up div {
  background: linear-gradient(
      135deg, 
      transparent 43%, 
      var(--color-d-pad-highlightje) 50%, 
      transparent 54%
    );
  box-shadow: 
    inset .2em .2em .1em -.1em var(--color-d-pad-shadowtje),
    inset 0em 0em .1em -.1em var(--color-d-pad-shadowtje),
    0em -.15em .1em -.1em var(--color-d-pad-shadowtje),
    -.15em 0em .1em -.1em var(--color-d-pad-shadowtje);
}

.d-pad-button.right div {
  background: linear-gradient(
      45deg, 
      transparent 43%, 
      var(--color-d-pad-shadowtje) 50%, 
      transparent 54%
    );
  box-shadow: 
    inset -.15em 0em .05em -.1em var(--color-d-pad-highlightje),
    inset 0em .2em .05em -.1em var(--color-d-pad-shadowtje),
    .15em 0em .1em -.1em var(--color-d-pad-highlightje),
    0em -.15em .1em -.1em var(--color-d-pad-shadowtje);
}

.d-pad-button.down div {
  background: linear-gradient(
      135deg, 
      transparent 43%, 
      var(--color-d-pad-shadowtje) 50%, 
      transparent 54%
    );
  box-shadow: 
    inset -.2em -.45em .1em -.4em var(--color-d-pad-shadowtje),
    inset -.4em 0em .1em -.4em var(--color-d-pad-highlightje),
    0em .15em .1em -.1em var(--color-d-pad-shadowtje),
    .15em 0em .1em -.1em var(--color-d-pad-highlightje);
}

.d-pad-button.middle div {
  width: 1.25em;
  transform: rotate(0);

  border-radius: 50%;
  box-shadow: 
    inset -.05em -.05em .1em var(--color-d-pad-highlightje),
    inset .05em .05em .1em var(--color-d-pad-shadowtje),
    .025em .025em .05em var(--color-d-pad-highlightje),
    -.025em -.025em .05em var(--color-d-pad-shadowtje);
}





/****************/
/* face buttons */
/****************/

.face-buttons-container {
  position:absolute;
  top: calc( (var(--size-controller-height) - var(--size-face-buttons)) / 2);
  right: calc( (var(--size-controller-height) - var(--size-face-buttons)) / 2);

  width: var(--size-face-buttons);
  aspect-ratio: 1/1;
  display: flex;
  justify-content:center;
  align-content:center;
  flex-wrap: wrap;

  border-radius: 50%;
  background-color: var(--color-face-buttons-background);
  
  box-shadow:
    0 -.1em .1em var(--color-face-buttons-shadow),
    -.1em 0 .1em var(--color-face-buttons-shadow),
    inset 0 .1em .1em var(--color-face-buttons-highlight),
    inset .1em 0 .1em var(--color-face-buttons-highlight),
    inset 0 -.1em .1em var(--color-face-buttons-shadow),
    inset -.1em 0 .1em var(--color-face-buttons-shadow),
    0 .1em .1em var(--color-face-buttons-highlight),
    .1em 0 .1em var(--color-face-buttons-highlight);
}

/* groep van 2 face-buttons */
.face-buttons-group {
  width: 11.25em;
  height: 5em;
  padding:.5em;

  display:flex;
  justify-content: space-between;

  background-color: var(--color-controller-main);
  border-radius: 10em;
  box-shadow:
    0 -.1em .1em var(--color-face-buttons-shadow),
    inset 0 .1em .1em var(--color-face-buttons-highlight),
    inset 0 -.1em .1em var(--color-face-buttons-shadow),
    0em .1em .1em var(--color-face-buttons-highlight);
}

.face-buttons-group:nth-of-type(1) {
  transform: translate(-2.25em, .2875em) rotate(-45deg);
}

.face-buttons-group:nth-of-type(2) {
  transform: translate(2.25em, -.2875em) rotate(-45deg);
}

/* een face-button */
.face-button {
  width: 4em;
  height: 4em;
  border-radius: 50%;

  box-shadow: 
  0 -.15em .15em var(--color-face-buttons-shadow),
  inset 0 0 0 var(--color-face-buttons-shadow),
  inset 0 .25em .25em var(--color-face-buttons-highlight),
  inset 0 -.25em .25em var(--color-face-buttons-shadow),
  0em .15em .15em var(--color-face-buttons-highlight);
}

.face-button.a {
  background-color: var(--color-face-buttons-a);
}
.face-button.b {
  background-color: var(--color-face-buttons-b);
}
.face-button.x {
  background-color: var(--color-face-buttons-x);
}
.face-button.y {
  background-color: var(--color-face-buttons-y);
}
.face-button:active {
  box-shadow: 
    0 -.15em .15em var(--color-face-buttons-shadow),
    inset 0 .4em .4em .1em var(--color-face-buttons-shadow),
    inset 0 .25em .25em var(--color-face-buttons-highlight),
    inset 0 -.25em .25em var(--color-face-buttons-highlight),
    0em .15em .15em var(--color-face-buttons-highlight);
}





/****************/
/* start-select */
/****************/

.start-select-container {
  position: absolute;
  top: 53%;
  left: 37%;
  
  width: var(--size-start-select);
  aspect-ratio:1/.6;
  transform: rotate(-41deg);

  display:grid;
  grid-template-rows: 1fr 1fr;
}

/* start-select button */
.start-select {
  height: var(--size-start-select-button-height);
  aspect-ratio:3.2/1;

  border-radius: calc(var(--size-start-select-button-height) / 2);
  background-color: var(--color-start-select-button-background);

  box-shadow: 
  inset -.2em .2em .5em var(--color-start-select-button-hightlight),
  inset -.4em .4em .5em var(--color-start-select-button-hightlight),
  inset 0em 0em 2em var(--color-start-select-button-shadowtjetjetjetjetje),

  inset .2em -.2em .5em var(--color-start-select-button-shadowtje),
  inset .4em -.4em .5em var(--color-start-select-button-shadowtje),

  0em 0em .2em var(--color-start-select-button-shadow),
  0em 0em .4em var(--color-start-select-button-shadow),
  0em 0em .6em var(--color-start-select-button-shadowtjetjetje);
}

.start-select.select {
  place-self: end;
}

.start-select:active {
  box-shadow: 
  inset -.2em .2em .5em var(--color-start-select-button-shadowtjetje),
  inset -.4em .4em .5em var(--color-start-select-button-shadowtjetje),
  inset 0em 0em 2em var(--color-start-select-button-shadowtjetjetjetje),

  inset .2em -.2em .5em var(--color-start-select-button-hightlightje),
  inset .4em -.4em .5em var(--color-start-select-button-hightlightje),

  0em 0em .2em var(--color-start-select-button-shadow),
  0em 0em .4em var(--color-start-select-button-shadow),
  0em 0em .6em var(--color-start-select-button-shadowtjetjetje);
}





/********************/
/* shoulder buttons */
/********************/

.shoulder {
  position: absolute;
  top: -.5em;
  z-index: -1;

  width: var(--size-shoulder);
  aspect-ratio:1/.24;
  
  background-color: var(--color-shoulder);
  box-shadow: inset 0em .2em .1em var(--color-shoulder-highlight);
}

.shoulder.l {
  left: 11%;

  border-radius: 50% .4em 0 0;
  box-shadow: 
  inset 0em .2em .1em var(--color-shoulder-highlightje),
  inset -.3em 0em .2em var(--color-shoulder-shadowtje),
  inset .3em 0em .2em var(--color-shoulder-shadow);
}

.shoulder.r {
  right: 11%;
  border-radius: .4em 50% 0 0;
  box-shadow: 
    inset 0em .2em .1em var(--color-shoulder-highlightje),
    inset .3em 0em .2em var(--color-shoulder-shadowtje),
    inset -.3em 0em .2em var(--color-shoulder-shadow);
}

.shoulder.l:active {
  transform: translate(2%, 10%);
}

.shoulder.r:active {
  transform: translate(-2%, 10%);
}





/**********/
/* PLAYER */
/**********/

@keyframes jump {
  100% {
    transform: translateY(-5em);
  }
}

.player {
  --pixel-size:5px;

  width: var(--pixel-size);
  aspect-ratio:1/1;
  place-self:center;

	background-color: #500000;
}

.player.spring {
  animation: jump .2s 2 cubic-bezier(0.230, 1.000, 0.320, 1.000) alternate;
}

.player {
  box-shadow:
		calc(var(--pixel-size) * 1) calc(var(--pixel-size) * 0) #500000,
    calc(var(--pixel-size) * 2) calc(var(--pixel-size) * 0) #500000,
    calc(var(--pixel-size) * 3) calc(var(--pixel-size) * 0) #500000,
    calc(var(--pixel-size) * 4) calc(var(--pixel-size) * 0) #500000,

    calc(var(--pixel-size) * -1) calc(var(--pixel-size) * 1) #500000,
    calc(var(--pixel-size) * 0) calc(var(--pixel-size) * 1) #f84070,
    calc(var(--pixel-size) * 1) calc(var(--pixel-size) * 1) #f8d870,
    calc(var(--pixel-size) * 2) calc(var(--pixel-size) * 1) #f84070,
    calc(var(--pixel-size) * 3) calc(var(--pixel-size) * 1) #f84070,
    calc(var(--pixel-size) * 4) calc(var(--pixel-size) * 1) #f84070,
    calc(var(--pixel-size) * 5) calc(var(--pixel-size) * 1) #500000,
    calc(var(--pixel-size) * 6) calc(var(--pixel-size) * 1) #500000,
    
    calc(var(--pixel-size) * -1) calc(var(--pixel-size) * 2) #500000,
    calc(var(--pixel-size) * 0) calc(var(--pixel-size) * 2) #ffffff,
    calc(var(--pixel-size) * 1) calc(var(--pixel-size) * 2) #f8d870,
    calc(var(--pixel-size) * 2) calc(var(--pixel-size) * 2) #d8a038,
    calc(var(--pixel-size) * 3) calc(var(--pixel-size) * 2) #b02860,
    calc(var(--pixel-size) * 4) calc(var(--pixel-size) * 2) #b02860,
    calc(var(--pixel-size) * 5) calc(var(--pixel-size) * 2) #f84070,
    calc(var(--pixel-size) * 6) calc(var(--pixel-size) * 2) #f84070,
    calc(var(--pixel-size) * 7) calc(var(--pixel-size) * 2) #500000,
    
    calc(var(--pixel-size) * -2) calc(var(--pixel-size) * 3) #000,
    calc(var(--pixel-size) * -1) calc(var(--pixel-size) * 3) #000,
    calc(var(--pixel-size) * 0) calc(var(--pixel-size) * 3) #000,
    calc(var(--pixel-size) * 1) calc(var(--pixel-size) * 3) #000,
    calc(var(--pixel-size) * 2) calc(var(--pixel-size) * 3) #000,
    calc(var(--pixel-size) * 3) calc(var(--pixel-size) * 3) #000,
    calc(var(--pixel-size) * 4) calc(var(--pixel-size) * 3) #b02860,
    calc(var(--pixel-size) * 5) calc(var(--pixel-size) * 3) #b02860,
    calc(var(--pixel-size) * 6) calc(var(--pixel-size) * 3) #f84070,
    calc(var(--pixel-size) * 7) calc(var(--pixel-size) * 3) #b02860,
    calc(var(--pixel-size) * 8) calc(var(--pixel-size) * 3) #500000,
    
    calc(var(--pixel-size) * -3) calc(var(--pixel-size) * 4) #000,
    calc(var(--pixel-size) * -2) calc(var(--pixel-size) * 4) #000,
    calc(var(--pixel-size) * -1) calc(var(--pixel-size) * 4) #000,
    calc(var(--pixel-size) * 0) calc(var(--pixel-size) * 4) #000,
    calc(var(--pixel-size) * 1) calc(var(--pixel-size) * 4) #000,
    calc(var(--pixel-size) * 2) calc(var(--pixel-size) * 4) #000,
    calc(var(--pixel-size) * 3) calc(var(--pixel-size) * 4) #000,
    calc(var(--pixel-size) * 4) calc(var(--pixel-size) * 4) #000,
    calc(var(--pixel-size) * 5) calc(var(--pixel-size) * 4) #000,
    calc(var(--pixel-size) * 6) calc(var(--pixel-size) * 4) #b02860,
    calc(var(--pixel-size) * 7) calc(var(--pixel-size) * 4) #b02860,
    calc(var(--pixel-size) * 8) calc(var(--pixel-size) * 4) #b02860,
    calc(var(--pixel-size) * 9) calc(var(--pixel-size) * 4) #500000,
    
    calc(var(--pixel-size) * 0) calc(var(--pixel-size) * 5) #f87068,
    calc(var(--pixel-size) * 1) calc(var(--pixel-size) * 5) #000,
    calc(var(--pixel-size) * 2) calc(var(--pixel-size) * 5) #f87068,
    calc(var(--pixel-size) * 3) calc(var(--pixel-size) * 5) #000,
    calc(var(--pixel-size) * 4) calc(var(--pixel-size) * 5) #f87068,
    calc(var(--pixel-size) * 5) calc(var(--pixel-size) * 5) #000,
    calc(var(--pixel-size) * 6) calc(var(--pixel-size) * 5) #000,
    calc(var(--pixel-size) * 7) calc(var(--pixel-size) * 5) #000,
    calc(var(--pixel-size) * 8) calc(var(--pixel-size) * 5) #f8d0c0,
    calc(var(--pixel-size) * 9) calc(var(--pixel-size) * 5) #500000,
    
    calc(var(--pixel-size) * -2) calc(var(--pixel-size) * 6) #885818,
    calc(var(--pixel-size) * -1) calc(var(--pixel-size) * 6) #885818,
    calc(var(--pixel-size) * 0) calc(var(--pixel-size) * 6) #f8d0c0,
    calc(var(--pixel-size) * 1) calc(var(--pixel-size) * 6) #000,
    calc(var(--pixel-size) * 2) calc(var(--pixel-size) * 6) #f8d0c0,
    calc(var(--pixel-size) * 3) calc(var(--pixel-size) * 6) #000,
    calc(var(--pixel-size) * 4) calc(var(--pixel-size) * 6) #f8d0c0,
    calc(var(--pixel-size) * 5) calc(var(--pixel-size) * 6) #f87068,
    calc(var(--pixel-size) * 6) calc(var(--pixel-size) * 6) #000,
    calc(var(--pixel-size) * 7) calc(var(--pixel-size) * 6) #f8d0c0,
    calc(var(--pixel-size) * 8) calc(var(--pixel-size) * 6) #885818,
    calc(var(--pixel-size) * 9) calc(var(--pixel-size) * 6) #f8d0c0,
    calc(var(--pixel-size) * 10) calc(var(--pixel-size) * 6) #500000,

    calc(var(--pixel-size) * -3) calc(var(--pixel-size) * 7) #885818,
    calc(var(--pixel-size) * -2) calc(var(--pixel-size) * 7) #f8d0c0,
    calc(var(--pixel-size) * -1) calc(var(--pixel-size) * 7) #f8d0c0,
    calc(var(--pixel-size) * 0) calc(var(--pixel-size) * 7) #f8d0c0,
    calc(var(--pixel-size) * 1) calc(var(--pixel-size) * 7) #f8d0c0,
    calc(var(--pixel-size) * 2) calc(var(--pixel-size) * 7) #f8d0c0,
    calc(var(--pixel-size) * 3) calc(var(--pixel-size) * 7) #f8d0c0,
    calc(var(--pixel-size) * 4) calc(var(--pixel-size) * 7) #f8d0c0,
    calc(var(--pixel-size) * 5) calc(var(--pixel-size) * 7) #000,
    calc(var(--pixel-size) * 6) calc(var(--pixel-size) * 7) #000,
    calc(var(--pixel-size) * 7) calc(var(--pixel-size) * 7) #f8d0c0,
    calc(var(--pixel-size) * 8) calc(var(--pixel-size) * 7) #885818,
    calc(var(--pixel-size) * 9) calc(var(--pixel-size) * 7) #f87068,
    calc(var(--pixel-size) * 10) calc(var(--pixel-size) * 7) #500000,
    
    calc(var(--pixel-size) * -3) calc(var(--pixel-size) * 8) #885818,
    calc(var(--pixel-size) * -2) calc(var(--pixel-size) * 8) #f87068,
    calc(var(--pixel-size) * -1) calc(var(--pixel-size) * 8) #f87068,
    calc(var(--pixel-size) * 0) calc(var(--pixel-size) * 8) #f87068,
    calc(var(--pixel-size) * 1) calc(var(--pixel-size) * 8) #f87068,
    calc(var(--pixel-size) * 2) calc(var(--pixel-size) * 8) #f87068,
    calc(var(--pixel-size) * 3) calc(var(--pixel-size) * 8) #000,
    calc(var(--pixel-size) * 4) calc(var(--pixel-size) * 8) #f8d0c0,
    calc(var(--pixel-size) * 5) calc(var(--pixel-size) * 8) #f8d0c0,
    calc(var(--pixel-size) * 6) calc(var(--pixel-size) * 8) #000,
    calc(var(--pixel-size) * 7) calc(var(--pixel-size) * 8) #f8d0c0,
    calc(var(--pixel-size) * 8) calc(var(--pixel-size) * 8) #f87068,
    calc(var(--pixel-size) * 9) calc(var(--pixel-size) * 8) #000,
    calc(var(--pixel-size) * 10) calc(var(--pixel-size) * 8) #500000,
    
    calc(var(--pixel-size) * -2) calc(var(--pixel-size) * 9) #000,
    calc(var(--pixel-size) * -1) calc(var(--pixel-size) * 9) #000,
    calc(var(--pixel-size) * 0) calc(var(--pixel-size) * 9) #000,
    calc(var(--pixel-size) * 1) calc(var(--pixel-size) * 9) #000,
    calc(var(--pixel-size) * 2) calc(var(--pixel-size) * 9) #000,
    calc(var(--pixel-size) * 3) calc(var(--pixel-size) * 9) #000,
    calc(var(--pixel-size) * 4) calc(var(--pixel-size) * 9) #000,
    calc(var(--pixel-size) * 5) calc(var(--pixel-size) * 9) #f8d0c0,
    calc(var(--pixel-size) * 6) calc(var(--pixel-size) * 9) #f87068,
    calc(var(--pixel-size) * 7) calc(var(--pixel-size) * 9) #f87068,
    calc(var(--pixel-size) * 8) calc(var(--pixel-size) * 9) #000,
    calc(var(--pixel-size) * 9) calc(var(--pixel-size) * 9) #000,
    
    calc(var(--pixel-size) * -1) calc(var(--pixel-size) * 10) #000,
    calc(var(--pixel-size) * 0) calc(var(--pixel-size) * 10) #000,
    calc(var(--pixel-size) * 1) calc(var(--pixel-size) * 10) #000,
    calc(var(--pixel-size) * 2) calc(var(--pixel-size) * 10) #000,
    calc(var(--pixel-size) * 3) calc(var(--pixel-size) * 10) #f87068,
    calc(var(--pixel-size) * 4) calc(var(--pixel-size) * 10) #f87068,
    calc(var(--pixel-size) * 5) calc(var(--pixel-size) * 10) #f87068,
    calc(var(--pixel-size) * 6) calc(var(--pixel-size) * 10) #885818,
    calc(var(--pixel-size) * 7) calc(var(--pixel-size) * 10) #885818,
    calc(var(--pixel-size) * 8) calc(var(--pixel-size) * 10) #000,
    
    calc(var(--pixel-size) * 1) calc(var(--pixel-size) * 11) #203088,
    calc(var(--pixel-size) * 2) calc(var(--pixel-size) * 11) #885818,
    calc(var(--pixel-size) * 3) calc(var(--pixel-size) * 11) #885818,
    calc(var(--pixel-size) * 4) calc(var(--pixel-size) * 11) #885818,
    calc(var(--pixel-size) * 5) calc(var(--pixel-size) * 11) #885818,
    calc(var(--pixel-size) * 6) calc(var(--pixel-size) * 11) #b02860,
    calc(var(--pixel-size) * 7) calc(var(--pixel-size) * 11) #500000,
    
    calc(var(--pixel-size) * 0) calc(var(--pixel-size) * 12) #203088,
    calc(var(--pixel-size) * 1) calc(var(--pixel-size) * 12) #80d8c8,
    calc(var(--pixel-size) * 2) calc(var(--pixel-size) * 12) #80d8c8,
    calc(var(--pixel-size) * 3) calc(var(--pixel-size) * 12) #408098,
    calc(var(--pixel-size) * 4) calc(var(--pixel-size) * 12) #408098,
    calc(var(--pixel-size) * 5) calc(var(--pixel-size) * 12) #f84070,
    calc(var(--pixel-size) * 6) calc(var(--pixel-size) * 12) #b02860,
    calc(var(--pixel-size) * 7) calc(var(--pixel-size) * 12) #b02860,
    calc(var(--pixel-size) * 8) calc(var(--pixel-size) * 12) #500000,

    calc(var(--pixel-size) * -1) calc(var(--pixel-size) * 13) #203088,
    calc(var(--pixel-size) * 0) calc(var(--pixel-size) * 13) #fff,
    calc(var(--pixel-size) * 1) calc(var(--pixel-size) * 13) #80d8c8,
    calc(var(--pixel-size) * 2) calc(var(--pixel-size) * 13) #fff,
    calc(var(--pixel-size) * 3) calc(var(--pixel-size) * 13) #fff,
    calc(var(--pixel-size) * 4) calc(var(--pixel-size) * 13) #408098,
    calc(var(--pixel-size) * 5) calc(var(--pixel-size) * 13) #885818,
    calc(var(--pixel-size) * 6) calc(var(--pixel-size) * 13) #885818,
    calc(var(--pixel-size) * 7) calc(var(--pixel-size) * 13) #885818,
    calc(var(--pixel-size) * 8) calc(var(--pixel-size) * 13) #500000,
    
    calc(var(--pixel-size) * -1) calc(var(--pixel-size) * 14) #203088,
    calc(var(--pixel-size) * 0) calc(var(--pixel-size) * 14) #fff,
    calc(var(--pixel-size) * 1) calc(var(--pixel-size) * 14) #80d8c8,
    calc(var(--pixel-size) * 2) calc(var(--pixel-size) * 14) #fff,
    calc(var(--pixel-size) * 3) calc(var(--pixel-size) * 14) #fff,
    calc(var(--pixel-size) * 4) calc(var(--pixel-size) * 14) #885818,
    calc(var(--pixel-size) * 5) calc(var(--pixel-size) * 14) #fff,
    calc(var(--pixel-size) * 6) calc(var(--pixel-size) * 14) #fff,
    calc(var(--pixel-size) * 7) calc(var(--pixel-size) * 14) #fff,
    calc(var(--pixel-size) * 8) calc(var(--pixel-size) * 14) #885818,
    
    calc(var(--pixel-size) * -1) calc(var(--pixel-size) * 15) #203088,
    calc(var(--pixel-size) * 0) calc(var(--pixel-size) * 15) #80d8c8,
    calc(var(--pixel-size) * 1) calc(var(--pixel-size) * 15) #80d8c8,
    calc(var(--pixel-size) * 2) calc(var(--pixel-size) * 15) #408098,
    calc(var(--pixel-size) * 3) calc(var(--pixel-size) * 15) #408098,
    calc(var(--pixel-size) * 4) calc(var(--pixel-size) * 15) #408098,
    calc(var(--pixel-size) * 5) calc(var(--pixel-size) * 15) #885818,
    calc(var(--pixel-size) * 6) calc(var(--pixel-size) * 15) #fff,
    calc(var(--pixel-size) * 7) calc(var(--pixel-size) * 15) #fff,
    calc(var(--pixel-size) * 8) calc(var(--pixel-size) * 15) #885818,
    
    calc(var(--pixel-size) * 0) calc(var(--pixel-size) * 16) #203088,
    calc(var(--pixel-size) * 1) calc(var(--pixel-size) * 16) #408098,
    calc(var(--pixel-size) * 2) calc(var(--pixel-size) * 16) #203088,
    calc(var(--pixel-size) * 3) calc(var(--pixel-size) * 16) #408098,
    calc(var(--pixel-size) * 4) calc(var(--pixel-size) * 16) #408098,
    calc(var(--pixel-size) * 5) calc(var(--pixel-size) * 16) #885818,
    calc(var(--pixel-size) * 6) calc(var(--pixel-size) * 16) #fff,
    calc(var(--pixel-size) * 7) calc(var(--pixel-size) * 16) #fff,
    calc(var(--pixel-size) * 8) calc(var(--pixel-size) * 16) #885818,
    
    calc(var(--pixel-size) * 1) calc(var(--pixel-size) * 17) #000,
    calc(var(--pixel-size) * 2) calc(var(--pixel-size) * 17) #885818,
    calc(var(--pixel-size) * 3) calc(var(--pixel-size) * 17) #000,
    calc(var(--pixel-size) * 4) calc(var(--pixel-size) * 17) #408098,
    calc(var(--pixel-size) * 5) calc(var(--pixel-size) * 17) #885818,
    calc(var(--pixel-size) * 6) calc(var(--pixel-size) * 17) #885818,
    calc(var(--pixel-size) * 7) calc(var(--pixel-size) * 17) #885818,
    
    calc(var(--pixel-size) * 0) calc(var(--pixel-size) * 18) #000,
    calc(var(--pixel-size) * 1) calc(var(--pixel-size) * 18) #f8d870,
    calc(var(--pixel-size) * 2) calc(var(--pixel-size) * 18) #000,
    calc(var(--pixel-size) * 3) calc(var(--pixel-size) * 18) #f8d870,
    calc(var(--pixel-size) * 4) calc(var(--pixel-size) * 18) #885818,
    calc(var(--pixel-size) * 5) calc(var(--pixel-size) * 18) #885818,
    calc(var(--pixel-size) * 6) calc(var(--pixel-size) * 18) #885818,
    calc(var(--pixel-size) * 7) calc(var(--pixel-size) * 18) #000,
    
    calc(var(--pixel-size) * 0) calc(var(--pixel-size) * 19) #000,
    calc(var(--pixel-size) * 1) calc(var(--pixel-size) * 19) #000,
    calc(var(--pixel-size) * 2) calc(var(--pixel-size) * 19) #000,
    calc(var(--pixel-size) * 3) calc(var(--pixel-size) * 19) #000,
    calc(var(--pixel-size) * 4) calc(var(--pixel-size) * 19) #000,
    calc(var(--pixel-size) * 5) calc(var(--pixel-size) * 19) #000,
    calc(var(--pixel-size) * 6) calc(var(--pixel-size) * 19) #000,
    calc(var(--pixel-size) * 7) calc(var(--pixel-size) * 19) #000;}

    /* jump sprite */

    .player.spring {
    box-shadow: 
    calc(var(--pixel-size) * -2) calc(var(--pixel-size) * -3) #885818,
    calc(var(--pixel-size) * -1) calc(var(--pixel-size) * -3) #885818,

    calc(var(--pixel-size) * -3) calc(var(--pixel-size) * -2) #885818,
    calc(var(--pixel-size) * -2) calc(var(--pixel-size) * -2) #fff,
    calc(var(--pixel-size) * -1) calc(var(--pixel-size) * -2) #fff,
    calc(var(--pixel-size) * 0) calc(var(--pixel-size) * -2) #885818,

    calc(var(--pixel-size) * -4) calc(var(--pixel-size) * -1) #885818,
    calc(var(--pixel-size) * -3) calc(var(--pixel-size) * -1) #fff,
    calc(var(--pixel-size) * -2) calc(var(--pixel-size) * -1) #fff,
    calc(var(--pixel-size) * -1) calc(var(--pixel-size) * -1) #fff,
    calc(var(--pixel-size) * 0) calc(var(--pixel-size) * -1) #fff,
    calc(var(--pixel-size) * 1) calc(var(--pixel-size) * -1) #885818,

    calc(var(--pixel-size) * -4) calc(var(--pixel-size) * 0) #885818,
    calc(var(--pixel-size) * -3) calc(var(--pixel-size) * 0) #fff,
    calc(var(--pixel-size) * -2) calc(var(--pixel-size) * 0) #fff,
    calc(var(--pixel-size) * -1) calc(var(--pixel-size) * 0) #fff,
    calc(var(--pixel-size) * 1) calc(var(--pixel-size) * 0) #500000,
    calc(var(--pixel-size) * 2) calc(var(--pixel-size) * 0) #500000,
    calc(var(--pixel-size) * 3) calc(var(--pixel-size) * 0) #500000,
    calc(var(--pixel-size) * 4) calc(var(--pixel-size) * 0) #500000,

    calc(var(--pixel-size) * -3) calc(var(--pixel-size) * 1) #885818,
    calc(var(--pixel-size) * -2) calc(var(--pixel-size) * 1) #fff8,
    calc(var(--pixel-size) * -1) calc(var(--pixel-size) * 1) #500000,
    calc(var(--pixel-size) * 0) calc(var(--pixel-size) * 1) #f84070,
    calc(var(--pixel-size) * 1) calc(var(--pixel-size) * 1) #f8d870,
    calc(var(--pixel-size) * 2) calc(var(--pixel-size) * 1) #f84070,
    calc(var(--pixel-size) * 3) calc(var(--pixel-size) * 1) #f84070,
    calc(var(--pixel-size) * 4) calc(var(--pixel-size) * 1) #f84070,
    calc(var(--pixel-size) * 5) calc(var(--pixel-size) * 1) #500000,
    calc(var(--pixel-size) * 6) calc(var(--pixel-size) * 1) #500000,

    calc(var(--pixel-size) * -3) calc(var(--pixel-size) * 2) #500000,
    calc(var(--pixel-size) * -2) calc(var(--pixel-size) * 2) #885818,
    calc(var(--pixel-size) * -1) calc(var(--pixel-size) * 2) #500000,
    calc(var(--pixel-size) * 0) calc(var(--pixel-size) * 2) #ffffff,
    calc(var(--pixel-size) * 1) calc(var(--pixel-size) * 2) #f8d870,
    calc(var(--pixel-size) * 2) calc(var(--pixel-size) * 2) #d8a038,
    calc(var(--pixel-size) * 3) calc(var(--pixel-size) * 2) #b02860,
    calc(var(--pixel-size) * 4) calc(var(--pixel-size) * 2) #b02860,
    calc(var(--pixel-size) * 5) calc(var(--pixel-size) * 2) #f84070,
    calc(var(--pixel-size) * 6) calc(var(--pixel-size) * 2) #f84070,
    calc(var(--pixel-size) * 7) calc(var(--pixel-size) * 2) #500000,
    
    calc(var(--pixel-size) * -2) calc(var(--pixel-size) * 3) #000,
    calc(var(--pixel-size) * -1) calc(var(--pixel-size) * 3) #000,
    calc(var(--pixel-size) * 0) calc(var(--pixel-size) * 3) #000,
    calc(var(--pixel-size) * 1) calc(var(--pixel-size) * 3) #000,
    calc(var(--pixel-size) * 2) calc(var(--pixel-size) * 3) #000,
    calc(var(--pixel-size) * 3) calc(var(--pixel-size) * 3) #000,
    calc(var(--pixel-size) * 4) calc(var(--pixel-size) * 3) #b02860,
    calc(var(--pixel-size) * 5) calc(var(--pixel-size) * 3) #b02860,
    calc(var(--pixel-size) * 6) calc(var(--pixel-size) * 3) #f84070,
    calc(var(--pixel-size) * 7) calc(var(--pixel-size) * 3) #b02860,
    calc(var(--pixel-size) * 8) calc(var(--pixel-size) * 3) #500000,
    
    calc(var(--pixel-size) * -3) calc(var(--pixel-size) * 4) #000,
    calc(var(--pixel-size) * -2) calc(var(--pixel-size) * 4) #000,
    calc(var(--pixel-size) * -1) calc(var(--pixel-size) * 4) #000,
    calc(var(--pixel-size) * 0) calc(var(--pixel-size) * 4) #000,
    calc(var(--pixel-size) * 1) calc(var(--pixel-size) * 4) #000,
    calc(var(--pixel-size) * 2) calc(var(--pixel-size) * 4) #000,
    calc(var(--pixel-size) * 3) calc(var(--pixel-size) * 4) #000,
    calc(var(--pixel-size) * 4) calc(var(--pixel-size) * 4) #000,
    calc(var(--pixel-size) * 5) calc(var(--pixel-size) * 4) #000,
    calc(var(--pixel-size) * 6) calc(var(--pixel-size) * 4) #b02860,
    calc(var(--pixel-size) * 7) calc(var(--pixel-size) * 4) #b02860,
    calc(var(--pixel-size) * 8) calc(var(--pixel-size) * 4) #b02860,
    calc(var(--pixel-size) * 9) calc(var(--pixel-size) * 4) #500000,
    
    calc(var(--pixel-size) * -2) calc(var(--pixel-size) * 5) #500000,
    calc(var(--pixel-size) * -1) calc(var(--pixel-size) * 5) #b02860,
    calc(var(--pixel-size) * 0) calc(var(--pixel-size) * 5) #f87068,
    calc(var(--pixel-size) * 1) calc(var(--pixel-size) * 5) #000,
    calc(var(--pixel-size) * 2) calc(var(--pixel-size) * 5) #f87068,
    calc(var(--pixel-size) * 3) calc(var(--pixel-size) * 5) #000,
    calc(var(--pixel-size) * 4) calc(var(--pixel-size) * 5) #f87068,
    calc(var(--pixel-size) * 5) calc(var(--pixel-size) * 5) #000,
    calc(var(--pixel-size) * 6) calc(var(--pixel-size) * 5) #000,
    calc(var(--pixel-size) * 7) calc(var(--pixel-size) * 5) #000,
    calc(var(--pixel-size) * 8) calc(var(--pixel-size) * 5) #f8d0c0,
    calc(var(--pixel-size) * 9) calc(var(--pixel-size) * 5) #500000,
    
    calc(var(--pixel-size) * -2) calc(var(--pixel-size) * 6) #885818,
    calc(var(--pixel-size) * -1) calc(var(--pixel-size) * 6) #885818,
    calc(var(--pixel-size) * 0) calc(var(--pixel-size) * 6) #f8d0c0,
    calc(var(--pixel-size) * 1) calc(var(--pixel-size) * 6) #000,
    calc(var(--pixel-size) * 2) calc(var(--pixel-size) * 6) #f8d0c0,
    calc(var(--pixel-size) * 3) calc(var(--pixel-size) * 6) #000,
    calc(var(--pixel-size) * 4) calc(var(--pixel-size) * 6) #f8d0c0,
    calc(var(--pixel-size) * 5) calc(var(--pixel-size) * 6) #f87068,
    calc(var(--pixel-size) * 6) calc(var(--pixel-size) * 6) #000,
    calc(var(--pixel-size) * 7) calc(var(--pixel-size) * 6) #f8d0c0,
    calc(var(--pixel-size) * 8) calc(var(--pixel-size) * 6) #885818,
    calc(var(--pixel-size) * 9) calc(var(--pixel-size) * 6) #f8d0c0,
    calc(var(--pixel-size) * 10) calc(var(--pixel-size) * 6) #500000,

    calc(var(--pixel-size) * -3) calc(var(--pixel-size) * 7) #885818,
    calc(var(--pixel-size) * -2) calc(var(--pixel-size) * 7) #f8d0c0,
    calc(var(--pixel-size) * -1) calc(var(--pixel-size) * 7) #f8d0c0,
    calc(var(--pixel-size) * 0) calc(var(--pixel-size) * 7) #f8d0c0,
    calc(var(--pixel-size) * 1) calc(var(--pixel-size) * 7) #f8d0c0,
    calc(var(--pixel-size) * 2) calc(var(--pixel-size) * 7) #f8d0c0,
    calc(var(--pixel-size) * 3) calc(var(--pixel-size) * 7) #f8d0c0,
    calc(var(--pixel-size) * 4) calc(var(--pixel-size) * 7) #f8d0c0,
    calc(var(--pixel-size) * 5) calc(var(--pixel-size) * 7) #000,
    calc(var(--pixel-size) * 6) calc(var(--pixel-size) * 7) #000,
    calc(var(--pixel-size) * 7) calc(var(--pixel-size) * 7) #f8d0c0,
    calc(var(--pixel-size) * 8) calc(var(--pixel-size) * 7) #885818,
    calc(var(--pixel-size) * 9) calc(var(--pixel-size) * 7) #f87068,
    calc(var(--pixel-size) * 10) calc(var(--pixel-size) * 7) #500000,
    
    calc(var(--pixel-size) * -3) calc(var(--pixel-size) * 8) #885818,
    calc(var(--pixel-size) * -2) calc(var(--pixel-size) * 8) #f87068,
    calc(var(--pixel-size) * -1) calc(var(--pixel-size) * 8) #f87068,
    calc(var(--pixel-size) * 0) calc(var(--pixel-size) * 8) #f87068,
    calc(var(--pixel-size) * 1) calc(var(--pixel-size) * 8) #f87068,
    calc(var(--pixel-size) * 2) calc(var(--pixel-size) * 8) #f87068,
    calc(var(--pixel-size) * 3) calc(var(--pixel-size) * 8) #000,
    calc(var(--pixel-size) * 4) calc(var(--pixel-size) * 8) #f8d0c0,
    calc(var(--pixel-size) * 5) calc(var(--pixel-size) * 8) #f8d0c0,
    calc(var(--pixel-size) * 6) calc(var(--pixel-size) * 8) #000,
    calc(var(--pixel-size) * 7) calc(var(--pixel-size) * 8) #f8d0c0,
    calc(var(--pixel-size) * 8) calc(var(--pixel-size) * 8) #f87068,
    calc(var(--pixel-size) * 9) calc(var(--pixel-size) * 8) #000,
    calc(var(--pixel-size) * 10) calc(var(--pixel-size) * 8) #500000,
    
    calc(var(--pixel-size) * -2) calc(var(--pixel-size) * 9) #000,
    calc(var(--pixel-size) * -1) calc(var(--pixel-size) * 9) #000,
    calc(var(--pixel-size) * 0) calc(var(--pixel-size) * 9) #000,
    calc(var(--pixel-size) * 1) calc(var(--pixel-size) * 9) #000,
    calc(var(--pixel-size) * 2) calc(var(--pixel-size) * 9) #000,
    calc(var(--pixel-size) * 3) calc(var(--pixel-size) * 9) #000,
    calc(var(--pixel-size) * 4) calc(var(--pixel-size) * 9) #000,
    calc(var(--pixel-size) * 5) calc(var(--pixel-size) * 9) #f8d0c0,
    calc(var(--pixel-size) * 6) calc(var(--pixel-size) * 9) #f87068,
    calc(var(--pixel-size) * 7) calc(var(--pixel-size) * 9) #f87068,
    calc(var(--pixel-size) * 8) calc(var(--pixel-size) * 9) #000,
    calc(var(--pixel-size) * 9) calc(var(--pixel-size) * 9) #000,
    
    calc(var(--pixel-size) * -1) calc(var(--pixel-size) * 10) #000,
    calc(var(--pixel-size) * 0) calc(var(--pixel-size) * 10) #000,
    calc(var(--pixel-size) * 1) calc(var(--pixel-size) * 10) #000,
    calc(var(--pixel-size) * 2) calc(var(--pixel-size) * 10) #000,
    calc(var(--pixel-size) * 3) calc(var(--pixel-size) * 10) #f87068,
    calc(var(--pixel-size) * 4) calc(var(--pixel-size) * 10) #f87068,
    calc(var(--pixel-size) * 5) calc(var(--pixel-size) * 10) #f87068,
    calc(var(--pixel-size) * 6) calc(var(--pixel-size) * 10) #885818,
    calc(var(--pixel-size) * 7) calc(var(--pixel-size) * 10) #b02860,
    calc(var(--pixel-size) * 8) calc(var(--pixel-size) * 10) #885818,
    calc(var(--pixel-size) * 9) calc(var(--pixel-size) * 10) #885818,
    calc(var(--pixel-size) * 10) calc(var(--pixel-size) * 10) #885818,
    
    calc(var(--pixel-size) * 1) calc(var(--pixel-size) * 11) #203088,
    calc(var(--pixel-size) * 2) calc(var(--pixel-size) * 11) #885818,
    calc(var(--pixel-size) * 3) calc(var(--pixel-size) * 11) #885818,
    calc(var(--pixel-size) * 4) calc(var(--pixel-size) * 11) #885818,
    calc(var(--pixel-size) * 5) calc(var(--pixel-size) * 11) #885818,
    calc(var(--pixel-size) * 6) calc(var(--pixel-size) * 11) #b02860,
    calc(var(--pixel-size) * 7) calc(var(--pixel-size) * 11) #885818,
    calc(var(--pixel-size) * 8) calc(var(--pixel-size) * 11) #fff,
    calc(var(--pixel-size) * 9) calc(var(--pixel-size) * 11) #fff,
    calc(var(--pixel-size) * 10) calc(var(--pixel-size) * 11) #885818,
    calc(var(--pixel-size) * 11) calc(var(--pixel-size) * 11) #885818,
    
    calc(var(--pixel-size) * 0) calc(var(--pixel-size) * 12) #203088,
    calc(var(--pixel-size) * 1) calc(var(--pixel-size) * 12) #80d8c8,
    calc(var(--pixel-size) * 2) calc(var(--pixel-size) * 12) #80d8c8,
    calc(var(--pixel-size) * 3) calc(var(--pixel-size) * 12) #408098,
    calc(var(--pixel-size) * 4) calc(var(--pixel-size) * 12) #408098,
    calc(var(--pixel-size) * 5) calc(var(--pixel-size) * 12) #f84070,
    calc(var(--pixel-size) * 6) calc(var(--pixel-size) * 12) #885818,
    calc(var(--pixel-size) * 7) calc(var(--pixel-size) * 12) #fff,
    calc(var(--pixel-size) * 8) calc(var(--pixel-size) * 12) #fff,
    calc(var(--pixel-size) * 9) calc(var(--pixel-size) * 12) #fff,
    calc(var(--pixel-size) * 10) calc(var(--pixel-size) * 12) #fff,
    calc(var(--pixel-size) * 11) calc(var(--pixel-size) * 12) #885818,

    calc(var(--pixel-size) * -3) calc(var(--pixel-size) * 13) #000,
    calc(var(--pixel-size) * -2) calc(var(--pixel-size) * 13) #000,
    calc(var(--pixel-size) * -1) calc(var(--pixel-size) * 13) #203088,
    calc(var(--pixel-size) * 0) calc(var(--pixel-size) * 13) #fff,
    calc(var(--pixel-size) * 1) calc(var(--pixel-size) * 13) #80d8c8,
    calc(var(--pixel-size) * 2) calc(var(--pixel-size) * 13) #fff,
    calc(var(--pixel-size) * 3) calc(var(--pixel-size) * 13) #fff,
    calc(var(--pixel-size) * 4) calc(var(--pixel-size) * 13) #408098,
    calc(var(--pixel-size) * 5) calc(var(--pixel-size) * 13) #408098,
    calc(var(--pixel-size) * 6) calc(var(--pixel-size) * 13) #885818,
    calc(var(--pixel-size) * 7) calc(var(--pixel-size) * 13) #fff,
    calc(var(--pixel-size) * 8) calc(var(--pixel-size) * 13) #fff,
    calc(var(--pixel-size) * 9) calc(var(--pixel-size) * 13) #fff,
    calc(var(--pixel-size) * 10) calc(var(--pixel-size) * 13) #fff,
    calc(var(--pixel-size) * 11) calc(var(--pixel-size) * 13) #885818,
    
    calc(var(--pixel-size) * -4) calc(var(--pixel-size) * 14) #000,
    calc(var(--pixel-size) * -3) calc(var(--pixel-size) * 14) #000,
    calc(var(--pixel-size) * -2) calc(var(--pixel-size) * 14) #f8d870,
    calc(var(--pixel-size) * -1) calc(var(--pixel-size) * 14) #000,
    calc(var(--pixel-size) * 0) calc(var(--pixel-size) * 14) #fff,
    calc(var(--pixel-size) * 1) calc(var(--pixel-size) * 14) #80d8c8,
    calc(var(--pixel-size) * 2) calc(var(--pixel-size) * 14) #fff,
    calc(var(--pixel-size) * 3) calc(var(--pixel-size) * 14) #fff,
    calc(var(--pixel-size) * 4) calc(var(--pixel-size) * 14) #408098,
    calc(var(--pixel-size) * 5) calc(var(--pixel-size) * 14) #408098,
    calc(var(--pixel-size) * 6) calc(var(--pixel-size) * 14) #408098,
    calc(var(--pixel-size) * 7) calc(var(--pixel-size) * 14) #885818,
    calc(var(--pixel-size) * 8) calc(var(--pixel-size) * 14) #fff,
    calc(var(--pixel-size) * 9) calc(var(--pixel-size) * 14) #fff,
    calc(var(--pixel-size) * 10) calc(var(--pixel-size) * 14) #885818,

    calc(var(--pixel-size) * -4) calc(var(--pixel-size) * 15) #000,
    calc(var(--pixel-size) * -3) calc(var(--pixel-size) * 15) #000,
    calc(var(--pixel-size) * -2) calc(var(--pixel-size) * 15) #885818,
    calc(var(--pixel-size) * -1) calc(var(--pixel-size) * 15) #000,
    calc(var(--pixel-size) * 0) calc(var(--pixel-size) * 15) #203088,
    calc(var(--pixel-size) * 1) calc(var(--pixel-size) * 15) #80d8c8,
    calc(var(--pixel-size) * 2) calc(var(--pixel-size) * 15) #408098,
    calc(var(--pixel-size) * 3) calc(var(--pixel-size) * 15) #408098,
    calc(var(--pixel-size) * 4) calc(var(--pixel-size) * 15) #408098,
    calc(var(--pixel-size) * 5) calc(var(--pixel-size) * 15) #408098,
    calc(var(--pixel-size) * 6) calc(var(--pixel-size) * 15) #408098,
    calc(var(--pixel-size) * 7) calc(var(--pixel-size) * 15) #408098,
    calc(var(--pixel-size) * 8) calc(var(--pixel-size) * 15) #885818,
    calc(var(--pixel-size) * 9) calc(var(--pixel-size) * 15) #885818,
    calc(var(--pixel-size) * 10) calc(var(--pixel-size) * 15) #000,


    calc(var(--pixel-size) * -3) calc(var(--pixel-size) * 16) #000,
    calc(var(--pixel-size) * -2) calc(var(--pixel-size) * 16) #000,
    calc(var(--pixel-size) * -1) calc(var(--pixel-size) * 16) #885818,    
    calc(var(--pixel-size) * 0) calc(var(--pixel-size) * 16) #000,
    calc(var(--pixel-size) * 1) calc(var(--pixel-size) * 16) #203088,
    calc(var(--pixel-size) * 2) calc(var(--pixel-size) * 16) #408098,
    calc(var(--pixel-size) * 3) calc(var(--pixel-size) * 16) #408098,
    calc(var(--pixel-size) * 4) calc(var(--pixel-size) * 16) #408098,
    calc(var(--pixel-size) * 5) calc(var(--pixel-size) * 16) #408098,
    calc(var(--pixel-size) * 6) calc(var(--pixel-size) * 16) #203088,
    calc(var(--pixel-size) * 7) calc(var(--pixel-size) * 16) #203088,
    calc(var(--pixel-size) * 8) calc(var(--pixel-size) * 16) #203088,
    calc(var(--pixel-size) * 9) calc(var(--pixel-size) * 16) #885818,
    calc(var(--pixel-size) * 10) calc(var(--pixel-size) * 16) #000,

    calc(var(--pixel-size) * -3) calc(var(--pixel-size) * 17) #000,
    calc(var(--pixel-size) * -2) calc(var(--pixel-size) * 17) #000,
    calc(var(--pixel-size) * -1) calc(var(--pixel-size) * 17) #885818,    
    calc(var(--pixel-size) * 0) calc(var(--pixel-size) * 17) #000,
    calc(var(--pixel-size) * 2) calc(var(--pixel-size) * 17) #203088,
    calc(var(--pixel-size) * 3) calc(var(--pixel-size) * 17) #203088,
    calc(var(--pixel-size) * 4) calc(var(--pixel-size) * 17) #203088,
    calc(var(--pixel-size) * 5) calc(var(--pixel-size) * 17) #203088,
    calc(var(--pixel-size) * 7) calc(var(--pixel-size) * 17) #000,
    calc(var(--pixel-size) * 8) calc(var(--pixel-size) * 17) #f8d870,
    calc(var(--pixel-size) * 9) calc(var(--pixel-size) * 17) #885818,
    calc(var(--pixel-size) * 10) calc(var(--pixel-size) * 17) #000,

    calc(var(--pixel-size) * -2) calc(var(--pixel-size) * 18) #000,
    calc(var(--pixel-size) * -1) calc(var(--pixel-size) * 18) #000,
    calc(var(--pixel-size) * 8) calc(var(--pixel-size) * 18) #000,
    calc(var(--pixel-size) * 9) calc(var(--pixel-size) * 18) #000;
  }