:root {
  --goldrosa: #F95141;
  --black: #000;
}

#deconstructor {
  display: grid; width: 270px;
  grid-template-columns: repeat(26, 10px);
  grid-template-rows: repeat(39,10px);
  background-color: #ffff00;
  border: 10px solid black;
}

.red { background-color: var(--goldrosa);}
.black { background-color: var(--black);}

.albers1 {
  grid-column: 1;
  grid-row: 1 / 16;
  animation: grow600 infinite 10s ease-in-out;
}

.albers2 {
  grid-row: 1; grid-column: 7 / 27;
}
.albers3 {
  grid-row: 2; grid-column: 2 / 5;
} 
.albers4 {
  grid-row: 2; grid-column: 5 / 18;
}
.albers5 {
  grid-row: 2; grid-column: 19;
}
.albers6 {
  grid-row: 2; grid-column: 20;
}
.albers7 {
  grid-row: 2; grid-column: 21;
}
.albers8 {
  grid-row: 2;
  grid-column: 22 / 25;
}
.albers9 {
  grid-row: 2;
  grid-column: 25 / 28;
  z-index: 1;
}
.albers10 {
  grid-row: 3; grid-column: 16 / 22;
}
.albers11 {
  grid-row: 3;
  grid-column: 22 / 27;
  z-index: 1;
}
.albers12 {
  grid-row: 4; grid-column: 2 / 5;
}
.albers13 {
  grid-row: 4;
  grid-column: 5 / 7;
  animation: grow550 infinite 10s 2s ease-in-out;
  z-index: 1;
}

.albers14 {
  grid-row: 3 / 12;
  grid-column: 7 / 16;
}
.albers15 {
  grid-row: 4; grid-column: 16 / 18;
}
.albers16 {
  grid-row: 4; grid-column: 19;
  animation: back10forward10 infinite 10s 2s linear;
}
.albers17 {
  grid-row: 4; grid-column: 20;
}
.albers18 {
  grid-row: 4; grid-column: 21;
}
.albers19 {
  grid-row: 4;
  grid-column: 22 / 25;
}
.albers20 {
  grid-row: 4;
  grid-column: 25 / 28;
  z-index: 1;
}
.albers21 {
  grid-row: 5;
  grid-column: 16 / 22;
}
.albers22 {
  grid-row: 5;
  grid-column: 22 / 27;
  z-index: 1;
}
.albers23 {
  grid-row: 6; grid-column: 2 / 5;
}
.albers24 {
  grid-row: 6; grid-column: 5 / 7;
  animation: grow550 infinite 10s 2s ease-in-out;
}
.albers25 {
  grid-row: 6; grid-column: 16 / 18;
}
.albers26 {
  grid-row: 6; grid-column: 19;
  animation: back10forward10 infinite 10s 2s linear;
}
.albers27 {
  grid-row: 6; grid-column: 20;
}
.albers28 {
  grid-row: 6; grid-column: 21;
}
.albers29 {
  grid-row: 6; grid-column: 22 / 25;
}

.albers30 {
  grid-row: 6;
  grid-column: 25 / 28;
  z-index: 1;
}
.albers31 {
  grid-row: 7; grid-column: 16 / 22;
}
.albers32 {
  grid-row: 7;
  grid-column: 22 / 27;
  z-index: 1;
}
.albers33 {
  grid-row: 8;
  grid-column: 2 / 5;
}
.albers34 {
  grid-row: 8; grid-column: 5 / 7;
  animation: grow550 infinite 10s 2s ease-in-out;
}
.albers35 {
  grid-row: 8; grid-column: 16 / 18;
}
.albers36 {
  grid-row: 8; grid-column: 19;
  animation: back10forward10 infinite 10s 2s linear;
}
.albers37 {
  grid-row: 8; grid-column: 20;
}
.albers38 {
  grid-row: 8; grid-column: 21;
}
.albers39 {
  grid-row: 8; grid-column: 22 / 25;
}
.albers40 {
  grid-row: 8;
  grid-column: 25 / 28;
  z-index: 1;
}
.albers41 {
  grid-row: 9; grid-column: 16 / 22;
}
.albers42 {
  grid-row: 9;
  grid-column: 22 / 27;
  z-index: 1;
}
.albers43 {
  grid-row: 10; grid-column: 2 / 5;
}
.albers44 {
  grid-row: 10; grid-column: 5 / 7;
  animation: grow550 infinite 10s 2s ease-in-out;
}
.albers45 {
  grid-row: 10; grid-column: 16 / 18;
}
.albers46 {
  grid-row: 10; grid-column: 19;
  animation: back10forward10 infinite 10s 2s linear;
}
.albers47 {
  grid-row: 10; grid-column: 20;
}
.albers48 {
  grid-row: 10; grid-column: 21;
}
.albers49 {
  grid-row: 10; grid-column: 22 / 25;
}
.albers50 {
  grid-row: 10;
  grid-column: 25 / 28;
  z-index: 1;
}
.albers51 {
  grid-row: 11; grid-column: 16 / 22;
}
.albers52 {
  grid-row: 11;
  grid-column: 22 / 27;
  z-index: 1;
}
.albers53 {
  grid-row: 12; grid-column: 2 / 5;
} 
.albers54 {
  grid-row: 12; grid-column: 5 / 18;
}
.albers55 {
  grid-row: 12; grid-column: 19;
}
.albers56 {
  grid-row: 12; grid-column: 20;
}
.albers57 {
  grid-row: 12; grid-column: 21;
}
.albers58 {
  grid-row: 12; grid-column: 22 / 25;
}
.albers59 {
  grid-row: 12;
  grid-column: 25 / 28;
  z-index: 1;
}
.albers60 {
  grid-row: 13; grid-column: 7 / 22;
}
.albers61 {
  grid-row: 13;
  grid-column: 22 / 27;
  z-index: 1;
}
.albers62 {
  grid-row: 14; grid-column: 2 / 5;
} 
.albers63 {
  grid-row: 14; grid-column: 5 / 18;
}
.albers64 {
  grid-row: 14; grid-column: 19;
}
.albers65 {
  grid-row: 14; grid-column: 20;
}
.albers66 {
  grid-row: 14; grid-column: 21;
}
.albers67 {
  grid-row: 14; grid-column: 22 / 25;
}
.albers68 {
  grid-row: 14;
  grid-column: 25 / 28;
  z-index: 1;
}
.albers69 {
  grid-row: 15; grid-column: 7 / 22;
}

.albers70 {
  grid-row: 15;
  grid-column: 22 / 27;
  z-index: 1;
}
.albers71 {
  grid-row: 16 ; grid-column: 1 / 12 ;
}
.albers72 {
  grid-row: 16; grid-column: 16 / 18;
}
.albers73 {
  grid-row: 16; grid-column: 19;
}
.albers74 {
  grid-row: 16; grid-column: 20;
}
.albers75 {
  grid-row: 16; grid-column: 21;
}

.albers76 {
  grid-row: 16;
  grid-column: 25 / 28;
  animation: up130 infinite 11s linear;
}
.albers77 {
  grid-row: 17 ; grid-column: 2 / 7;
}
.albers78 {
  grid-row: 17 ; grid-column: 12 / 22;
}
.albers79 {
  grid-row: 18; grid-column: 1;
  animation: right30left30 infinite 2s ease-in-out;
}
.albers80 {
  grid-row: 18; grid-column: 5 / 8;
}
.albers81 {
  grid-row: 18; grid-column: 9 / 12;
  animation: down10 infinite 10s linear;
}
.albers82 {
  grid-row: 18; grid-column: 16 / 18;
  animation: growdown10 infinite 10s linear;
}
.albers83 {
  grid-row: 18; grid-column: 19;
  animation: growdown10 infinite 10s linear;
}
.albers84 {
  grid-row: 18; grid-column: 20;
  animation: growdown10 infinite 10s linear;
}
.albers85 {
  grid-row: 18; grid-column: 21;
  animation: growdown10 infinite 10s linear;
}
.albers86 {
  grid-row: 18; grid-column: 25 / 28;
  animation: up130 infinite 11s linear;
}
.albers87 {
  grid-row: 19 ; grid-column: 2 / 7;
}
.albers88 {
  grid-row: 19 ; grid-column: 12 / 22;
  animation: down10 infinite 10s linear;
}

.albers89 {
  grid-row: 20;
  grid-column: 1;
  animation: right30left30 infinite 2s ease-in-out;
}
.albers90 {
  grid-row: 20; grid-column: 5 / 8;
}
.albers91 {
  grid-row: 20; grid-column: 9 / 12;
  animation: down10 infinite 10s linear;
}
.albers92 {
  grid-row: 20; grid-column: 25 / 28;
  animation: up130 infinite 11s linear;
}
.albers93 {
  grid-row: 21 ; grid-column: 2 / 7;
}
.albers94 {
  grid-row: 21 ; grid-column: 12 / 22;
  animation: down10 infinite 10s linear;
}
.albers95 {
  grid-row: 22; grid-column: 1;
  animation: right30left30 infinite 2s ease-in-out;
}
.albers96 {
  grid-row: 22; grid-column: 5 / 8;
}
.albers97 {
  grid-row: 22; grid-column: 9 / 12;
  animation: down10 infinite 10s linear;
}
.albers98 {
  grid-row: 22; grid-column: 25 / 28;
  animation: up130 infinite 11s linear;
}
.albers99 {
  grid-row: 23 ; grid-column: 2 / 7;
}
.albers100 {
  grid-row: 23 ; grid-column: 12 / 22;
  animation: down10 infinite 10s linear;
}
.albers101 {
  grid-row: 24 ; grid-column: 1 / 8;
}
.albers102 {
  grid-row: 24 ; grid-column: 9 / 12;
  animation: down10 infinite 10s linear;
}
.albers103 {
  grid-row: 24 ; grid-column: 25 / 28;
  animation: up130 infinite 11s linear;
}
.albers104 {
  grid-row: 25 ; grid-column: 12 / 22;
  animation: down10 infinite 10s linear;
}
.albers105 {
  grid-row: 26 ; grid-column: 1 / 8;
}
.albers106 {
  grid-row: 26 ; grid-column: 9 / 12;
  animation: down10 infinite 10s linear;
}
.albers107 {
  grid-row: 26 ; grid-column: 25 / 28;
  animation: up130 infinite 11s linear;
}
.albers108 {
  grid-row: 27 ; grid-column: 12 / 22;
  animation: down10 infinite 10s linear;
}
.albers109 {
  grid-row: 28 ; grid-column: 1 / 8;
}
.albers110 {
  grid-row: 28 ; grid-column: 8;
  animation: up100 infinite 10s ease-in-out;
}
.albers111 {
  grid-row: 28 ; grid-column: 9 / 12;
  animation: down10 infinite 10s linear;
}
.albers112 {
  grid-row: 28 / -1 ; grid-column: 25 / 28;
  animation: scale-up-ver-bottom infinite 11s linear both;
}
.albers113 {
  grid-row: 29 ; grid-column: 1 / 7;
}
.albers114 {
  grid-row: 29 ; grid-column: 7 / 9;
}
.albers115 {
  grid-row: 29 ; grid-column: 12 / 25;
}
.albers116 {
  grid-row: 30 ; grid-column: 1 / 8;
  animation: right150 infinite 10s linear;
}
.albers117 {
  grid-row: 30 ; grid-column: 8; z-index: 1;
  animation: up100 infinite 10s ease-in-out;
}
.albers118 {
  grid-row: 30 ; grid-column: 9 / 16;
}
.albers119 {
  grid-row: 30 ; grid-column: 16 / 23;
}
.albers120 {
  grid-row: 30 ; grid-column: 23 / 25;
}
.albers121 {
  grid-row: 31 ; grid-column: 1 / 7;
}
.albers122 {
  grid-row: 31 ; grid-column: 7 / 9;
}
.albers123 {
  grid-row: 31 ; grid-column: 12 / 25;
}
.albers124 {
  grid-row: 32 ; grid-column: 1 / 8;
  animation: right150 infinite 10s linear;
}
.albers125 {
  grid-row: 32 ;
  grid-column: 8; z-index: 1;
  animation: up100 infinite 10s ease-in-out;
}
.albers126 {
  grid-row: 32 ; grid-column: 9 / 16;
}
.albers127 {
  grid-row: 32 ; grid-column: 16 / 23;
}
.albers128 {
  grid-row: 32 ; grid-column: 23 / 25;
}
.albers129 {
  grid-row: 33 ; grid-column: 1 / 7;
}
.albers130 {
  grid-row: 33 ; grid-column: 7 / 9;
}
.albers131 {
  grid-row: 33 ; grid-column: 12 / 25;
}
.albers132 {
  grid-row: 34 ; grid-column: 1 / 8;
  animation: right150 infinite 10s linear;
}
.albers133 {
  grid-row: 34 ; grid-column: 8; z-index: 1;
  animation: up100 infinite 10s ease-in-out;
}
.albers134 {
  grid-row: 34 ; grid-column: 9 / 16;
}
.albers135 {
  grid-row: 34 ; grid-column: 16 / 23;
}
.albers136 {
  grid-row: 34; grid-column: 23 / 25;
}
.albers137 {
  grid-row: 35; grid-column: 1 / 7;
}
.albers138 {
  grid-row: 35; grid-column: 7 / 9;
}
.albers139 {
  grid-row: 35 ; grid-column: 12 / 25;
}
.albers140 {
  grid-row: 36 ; grid-column: 1 / 8;
  animation: right150 infinite 10s linear;
}
.albers141 {
  grid-row: 36; grid-column: 8; z-index: 1;
  animation: up100 infinite 10s ease-in-out;
}
.albers142 {
  grid-row: 36; grid-column: 9 / 16;
}
.albers143 {
  grid-row: 36; grid-column: 16 / 23;
}
.albers144 {
  grid-row: 36; grid-column: 23 / 25;
}
.albers145 {
  grid-row: 37; grid-column: 12 / 25;
}
.albers146 {
  grid-row: 38; grid-column: 1 / 16;
}
.albers147 {
  grid-row: 38; grid-column: 16 / 23;
}
.albers148 {
  grid-row: 38; grid-column: 23 / 25;
}
.albers149 {
  grid-row: 39; grid-column: 1 / 12;
  animation: grow130 infinite 100s linear;
}

/* KEYFRAMES */
@keyframes grow600 {
  0% {width: 100%;}
  10% {width: 100%;}
  50% {width: 600%;}
  75% {width: 600%;}
  100% {width: 100%;}
}
@keyframes grow550 {
  0% {width: 100%;}
  25% {width: 100%;}
  50% {width: 550%;}
  75% {width: 550%;}
  100% {width: 100%;}
}
@keyframes back10forward10 {
  0% {transform: translateX(0px);}
  50% {transform: translateX(-10px);}
  98% {transform: translateX(-10px);}
  100% {transform: translateX(0px);}
}
@keyframes up130 {
  0% {transform: translateY(0px)}
  50% {transform: translateY(-150px)}
  70% {transform: translateY(-150px)}
  90% {transform: translateY(0px)}
  100% {transform: translateY(0px)}
}
@keyframes up10 {
  0% {transform: translateY(0px);}
  49% {transform: translateY(0px);}
  50% {transform: translateY(-10px);}
  99% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}
@keyframes growdown10 {
  0% { height: 100%;}
  49% { height: 100%;}
  50% { height: 200%;}
  99% { height: 200%; }
  100% {height: 100%;}
}
@keyframes down10 {
  0% { transform: translateY(0px);}
  49% {transform: translateY(0px);}
  50% {transform: translateY(10px);}
  99% {transform: translateY(10px);}
  100% { transform: translateY(0px);}
}
@keyframes grow130 {
  0% { width: 100%; }
  25% { width: 220%; }
  50% { width: 100%;}
  75% { width: 0%;}
  100% { width: 100%;}
}

@keyframes scale-up-ver-bottom {
  0% {
    transform: scaleY(1);
    transform-origin: 0% 100%;
  }
  50% {
    transform: scaleY(2.25);
    transform-origin: 0% 100%;
  }
  70% {
    transform: scaleY(2.25);
    transform-origin: 0% 100%;
  }
  90% {
    transform: scaleY(1);
    transform-origin: 0% 100%;
  }
  100% {
    transform: scaleY(1);
    transform-origin: 0% 100%;
  }
}

@keyframes right30left30 {
  0% {transform: translateX(0px)}
  50% {transform: translateX(30px)}
  100% {transform: translateX(0px)}
}
@keyframes right150 {
  0% { transform: translateX(0px);}
  25% { transform: translateX(0px);}
  50% { transform: translateX(150px);}
  75% {transform: translateX(150px);}
  100% {transform: translateX(0px);}
}

@keyframes up100 {
  0% {transform: translateY(0px);}
  40% {transform: translateY(-100px);}
  50% { transform: translateY(-100px);}
  60% {transform: translateY(0px);}
  100% {transform: translateY(0px);}
}