console
var clock = setInterval(function () {
var getTime = new Date(
new Date().toLocaleString("en-US", {
day: "2-digit",
month: "2-digit",
year: "numeric",
hour: "2-digit",
minute: "2-digit",
second: "2-digit",
hour12: true
})
);
var time =
((getTime.getHours() % 12 || 12) < 10 ? "0" : "") +
(getTime.getHours() % 12 || 12) +
"" +
(getTime.getMinutes() < 10 ? "0" : "") +
getTime.getMinutes() +
"" +
(getTime.getSeconds() < 10 ? "0" : "") +
getTime.getSeconds();
var currTime = time.split("");
document.querySelectorAll(".block").forEach((block, index) => {
block.className = "block";
block.classList.add("cube" + currTime[index]);
});
}, 50);
<div class='side'></div>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
--area: 3.75vmin;
--y: #f8e8aa;
--w: #fdf5f1;
--o: #fd4109;
--lb: #ade8e5;
--p: #479bc6;
--db: #222c47;
--z: 1;
--left: 0;
background: #479bc6;
overflow: hidden;
filter: url(#squiggles);
}
body:before {
content: "";
position: absolute;
width: 100%;
height: 50%;
top: calc(50% + (var(--area) * 1.25));
left: 0;
backdrop-filter: blur(3px);
z-index: 3;
background: rgba(71, 155, 198, 0.85);
}
body #wrap {
width: 75vmin;
height: 11.25vmin;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 1.5vmin;
perspective: 100vmin;
position: relative;
transform: scale(0.75) translateZ(0px) translateY(-7.5vmin);
-webkit-box-reflect: below 15vmin;
}
body #wrap * {
transform-style: preserve-3d;
}
body #wrap .block {
position: relative;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-template-areas: "col1 col2 col3" "col4 col5 col6" "col7 col8 col9";
z-index: 3;
transition: 0.3s ease-in-out;
}
body #wrap .block:nth-of-type(2):before, body #wrap .block:nth-of-type(2):after, body #wrap .block:nth-of-type(4):before, body #wrap .block:nth-of-type(4):after {
content: "";
position: absolute;
width: 2.5vmin;
height: 2.5vmin;
background: var(--lb);
border-radius: 100%;
left: calc(var(--area) * 3.5);
top: 0;
transform: translateZ(calc(var(--area) * -1.5)) rotateX(25deg);
}
body #wrap .block:nth-of-type(2):after, body #wrap .block:nth-of-type(4):after {
top: calc(var(--area) * 1.5);
}
body #wrap .block * {
backface-visibility: hidden;
}
body #wrap .block:nth-of-type(1) {
animation: wobbling 1s ease-in-out infinite alternate -0.25s;
}
body #wrap .block:nth-of-type(2) {
animation: wobbling 1s ease-in-out infinite alternate -0.5s;
}
body #wrap .block:nth-of-type(3) {
animation: wobbling 1s ease-in-out infinite alternate -0.75s;
}
body #wrap .block:nth-of-type(4) {
animation: wobbling 1s ease-in-out infinite alternate -1s;
}
body #wrap .block:nth-of-type(5) {
animation: wobbling 1s ease-in-out infinite alternate -1.25s;
}
body #wrap .block:nth-of-type(6) {
animation: wobbling 1s ease-in-out infinite alternate -1.5s;
}
@keyframes wobbling {
from {
transform: rotateX(-25deg) translateZ(calc(var(--area) * 2)) scaleZ(var(--z)) translateX(var(--left));
}
to {
transform: rotateX(-55deg) translateZ(calc(var(--area) * 2)) scalez(var(--z)) translateX(var(--left));
}
}
body #wrap .block:nth-of-type(-n + 2) {
left: -50%;
}
body #wrap .block:nth-of-type(n + 5) {
left: 50%;
}
body #wrap .block:nth-of-type(5) {
z-index: 1;
}
body #wrap .block:last-of-type {
z-index: 0;
}
body #wrap .block.cube0:first-of-type {
--z: 0;
}
body #wrap .block.cube0:first-of-type ~ .block {
--left: -50%;
}
body #wrap .block.cube0 .cube:nth-of-type(2), body #wrap .block.cube0 .cube:nth-of-type(5), body #wrap .block.cube0 .cube:nth-of-type(11), body #wrap .block.cube0 .cube:nth-of-type(14), body #wrap .block.cube0 .cube:nth-of-type(17), body #wrap .block.cube0 .cube:nth-of-type(23), body #wrap .block.cube0 .cube:nth-of-type(26) {
left: 100%;
}
body #wrap .block.cube0 .cube:nth-of-type(2):nth-of-type(even), body #wrap .block.cube0 .cube:nth-of-type(5):nth-of-type(even), body #wrap .block.cube0 .cube:nth-of-type(11):nth-of-type(even), body #wrap .block.cube0 .cube:nth-of-type(14):nth-of-type(even), body #wrap .block.cube0 .cube:nth-of-type(17):nth-of-type(even), body #wrap .block.cube0 .cube:nth-of-type(23):nth-of-type(even), body #wrap .block.cube0 .cube:nth-of-type(26):nth-of-type(even) {
left: -100%;
}
body #wrap .block.cube1 .cube:nth-of-type(1) {
left: 100%;
}
body #wrap .block.cube1 .cube:nth-of-type(4) {
left: 100%;
}
body #wrap .block.cube1 .cube:nth-of-type(7) {
left: 100%;
}
body #wrap .block.cube1 .cube:nth-of-type(10) {
left: 100%;
}
body #wrap .block.cube1 .cube:nth-of-type(13) {
left: 100%;
}
body #wrap .block.cube1 .cube:nth-of-type(16) {
left: 100%;
}
body #wrap .block.cube1 .cube:nth-of-type(19) {
left: 100%;
}
body #wrap .block.cube1 .cube:nth-of-type(22) {
left: 100%;
}
body #wrap .block.cube1 .cube:nth-of-type(25) {
left: 100%;
}
body #wrap .block.cube1 .cube:nth-of-type(3) {
left: -100%;
}
body #wrap .block.cube1 .cube:nth-of-type(6) {
left: -100%;
}
body #wrap .block.cube1 .cube:nth-of-type(9) {
left: -100%;
}
body #wrap .block.cube1 .cube:nth-of-type(12) {
left: -100%;
}
body #wrap .block.cube1 .cube:nth-of-type(15) {
left: -100%;
}
body #wrap .block.cube1 .cube:nth-of-type(18) {
left: -100%;
}
body #wrap .block.cube1 .cube:nth-of-type(21) {
left: -100%;
}
body #wrap .block.cube1 .cube:nth-of-type(24) {
left: -100%;
}
body #wrap .block.cube1 .cube:nth-of-type(27) {
left: -100%;
}
body #wrap .block.cube2 .cube:nth-of-type(5), body #wrap .block.cube2 .cube:nth-of-type(14), body #wrap .block.cube2 .cube:nth-of-type(23) {
top: 100%;
}
body #wrap .block.cube2 .cube:nth-of-type(6), body #wrap .block.cube2 .cube:nth-of-type(15), body #wrap .block.cube2 .cube:nth-of-type(24) {
top: 100%;
}
body #wrap .block.cube2 .cube:nth-of-type(10) {
left: 200%;
}
body #wrap .block.cube2 .cube:nth-of-type(11) {
left: 100%;
}
body #wrap .block.cube2 .cube:nth-of-type(13), body #wrap .block.cube2 .cube:nth-of-type(16) {
transform: translateZ(calc(var(--area) * -2));
}
body #wrap .block.cube3 .cube:nth-of-type(10), body #wrap .block.cube3 .cube:nth-of-type(4), body #wrap .block.cube3 .cube:nth-of-type(13), body #wrap .block.cube3 .cube:nth-of-type(16) {
left: 200%;
}
body #wrap .block.cube3 .cube:nth-of-type(11), body #wrap .block.cube3 .cube:nth-of-type(5), body #wrap .block.cube3 .cube:nth-of-type(14), body #wrap .block.cube3 .cube:nth-of-type(17) {
left: 100%;
}
body #wrap .block.cube4 .cube:nth-of-type(4), body #wrap .block.cube4 .cube:nth-of-type(7), body #wrap .block.cube4 .cube:nth-of-type(13), body #wrap .block.cube4 .cube:nth-of-type(16), body #wrap .block.cube4 .cube:nth-of-type(22), body #wrap .block.cube4 .cube:nth-of-type(25) {
left: 200%;
}
body #wrap .block.cube4 .cube:nth-of-type(11), body #wrap .block.cube4 .cube:nth-of-type(20), body #wrap .block.cube4 .cube:nth-of-type(5), body #wrap .block.cube4 .cube:nth-of-type(8), body #wrap .block.cube4 .cube:nth-of-type(14), body #wrap .block.cube4 .cube:nth-of-type(17), body #wrap .block.cube4 .cube:nth-of-type(23), body #wrap .block.cube4 .cube:nth-of-type(26) {
left: 100%;
}
body #wrap .block.cube5 .cube:nth-of-type(4) {
left: calc(300% - 100%);
}
body #wrap .block.cube5 .cube:nth-of-type(5) {
left: calc(300% - 200%);
}
body #wrap .block.cube5 .cube:nth-of-type(13) {
transform: translateZ(calc(var(--area) * -2));
top: -100%;
}
body #wrap .block.cube5 .cube:nth-of-type(13):nth-of-type(16), body #wrap .block.cube5 .cube:nth-of-type(13):nth-of-type(17), body #wrap .block.cube5 .cube:nth-of-type(13):nth-of-type(18) {
top: -200%;
}
body #wrap .block.cube5 .cube:nth-of-type(14) {
transform: translateZ(calc(var(--area) * -2));
top: -100%;
}
body #wrap .block.cube5 .cube:nth-of-type(14):nth-of-type(16), body #wrap .block.cube5 .cube:nth-of-type(14):nth-of-type(17), body #wrap .block.cube5 .cube:nth-of-type(14):nth-of-type(18) {
top: -200%;
}
body #wrap .block.cube5 .cube:nth-of-type(15) {
transform: translateZ(calc(var(--area) * -2));
top: -100%;
}
body #wrap .block.cube5 .cube:nth-of-type(15):nth-of-type(16), body #wrap .block.cube5 .cube:nth-of-type(15):nth-of-type(17), body #wrap .block.cube5 .cube:nth-of-type(15):nth-of-type(18) {
top: -200%;
}
body #wrap .block.cube5 .cube:nth-of-type(16) {
transform: translateZ(calc(var(--area) * -2));
top: -100%;
}
body #wrap .block.cube5 .cube:nth-of-type(16):nth-of-type(16), body #wrap .block.cube5 .cube:nth-of-type(16):nth-of-type(17), body #wrap .block.cube5 .cube:nth-of-type(16):nth-of-type(18) {
top: -200%;
}
body #wrap .block.cube5 .cube:nth-of-type(17) {
transform: translateZ(calc(var(--area) * -2));
top: -100%;
}
body #wrap .block.cube5 .cube:nth-of-type(17):nth-of-type(16), body #wrap .block.cube5 .cube:nth-of-type(17):nth-of-type(17), body #wrap .block.cube5 .cube:nth-of-type(17):nth-of-type(18) {
top: -200%;
}
body #wrap .block.cube5 .cube:nth-of-type(18) {
transform: translateZ(calc(var(--area) * -2));
top: -100%;
}
body #wrap .block.cube5 .cube:nth-of-type(18):nth-of-type(16), body #wrap .block.cube5 .cube:nth-of-type(18):nth-of-type(17), body #wrap .block.cube5 .cube:nth-of-type(18):nth-of-type(18) {
top: -200%;
}
body #wrap .block.cube5 .cube:nth-of-type(12) {
left: -200%;
}
body #wrap .block.cube5 .cube:nth-of-type(11) {
left: -100%;
}
body #wrap .block.cube5 .cube:nth-of-type(23), body #wrap .block.cube5 .cube:nth-of-type(24), body #wrap .block.cube5 .cube:nth-of-type(22) {
top: -100%;
}
body #wrap .block.cube5 .cube:nth-of-type(25), body #wrap .block.cube5 .cube:nth-of-type(26), body #wrap .block.cube5 .cube:nth-of-type(27) {
top: -200%;
}
body #wrap .block.cube6 .cube:nth-of-type(5) {
left: -100%;
}
body #wrap .block.cube6 .cube:nth-of-type(14):not(:nth-of-type(16)) {
transform: translateZ(calc(var(--area) * -2));
}
body #wrap .block.cube6 .cube:nth-of-type(15):not(:nth-of-type(16)) {
transform: translateZ(calc(var(--area) * -2));
}
body #wrap .block.cube6 .cube:nth-of-type(16):not(:nth-of-type(16)) {
transform: translateZ(calc(var(--area) * -2));
}
body #wrap .block.cube6 .cube:nth-of-type(17):not(:nth-of-type(16)) {
transform: translateZ(calc(var(--area) * -2));
}
body #wrap .block.cube6 .cube:nth-of-type(18):not(:nth-of-type(16)) {
transform: translateZ(calc(var(--area) * -2));
}
body #wrap .block.cube6 .cube:nth-of-type(12) {
left: -200%;
}
body #wrap .block.cube6 .cube:nth-of-type(11) {
left: -100%;
}
body #wrap .block.cube7 .cube:nth-of-type(3) {
left: 0;
}
body #wrap .block.cube7 .cube:nth-of-type(4) {
left: 200%;
}
body #wrap .block.cube7 .cube:nth-of-type(5) {
left: 100%;
}
body #wrap .block.cube7 .cube:nth-of-type(10):nth-of-type(1n), body #wrap .block.cube7 .cube:nth-of-type(11):nth-of-type(1n) {
left: 0;
}
body #wrap .block.cube7 .cube:nth-of-type(6) {
left: 0;
}
body #wrap .block.cube7 .cube:nth-of-type(7) {
left: 200%;
}
body #wrap .block.cube7 .cube:nth-of-type(8) {
left: 100%;
}
body #wrap .block.cube7 .cube:nth-of-type(19):nth-of-type(1n), body #wrap .block.cube7 .cube:nth-of-type(20):nth-of-type(1n) {
left: 0;
}
body #wrap .block.cube7 .cube:nth-of-type(9) {
left: 0;
}
body #wrap .block.cube7 .cube:nth-of-type(10) {
left: 200%;
}
body #wrap .block.cube7 .cube:nth-of-type(11) {
left: 100%;
}
body #wrap .block.cube7 .cube:nth-of-type(28):nth-of-type(1n), body #wrap .block.cube7 .cube:nth-of-type(29):nth-of-type(1n) {
left: 0;
}
body #wrap .block.cube7 .cube:nth-of-type(12) {
left: 0;
}
body #wrap .block.cube7 .cube:nth-of-type(13) {
left: 200%;
}
body #wrap .block.cube7 .cube:nth-of-type(14) {
left: 100%;
}
body #wrap .block.cube7 .cube:nth-of-type(37):nth-of-type(1n), body #wrap .block.cube7 .cube:nth-of-type(38):nth-of-type(1n) {
left: 0;
}
body #wrap .block.cube7 .cube:nth-of-type(15) {
left: 0;
}
body #wrap .block.cube7 .cube:nth-of-type(16) {
left: 200%;
}
body #wrap .block.cube7 .cube:nth-of-type(17) {
left: 100%;
}
body #wrap .block.cube7 .cube:nth-of-type(46):nth-of-type(1n), body #wrap .block.cube7 .cube:nth-of-type(47):nth-of-type(1n) {
left: 0;
}
body #wrap .block.cube7 .cube:nth-of-type(18) {
left: 0;
}
body #wrap .block.cube7 .cube:nth-of-type(19) {
left: 200%;
}
body #wrap .block.cube7 .cube:nth-of-type(20) {
left: 100%;
}
body #wrap .block.cube7 .cube:nth-of-type(55):nth-of-type(1n), body #wrap .block.cube7 .cube:nth-of-type(56):nth-of-type(1n) {
left: 0;
}
body #wrap .block.cube7 .cube:nth-of-type(21) {
left: 0;
}
body #wrap .block.cube7 .cube:nth-of-type(22) {
left: 200%;
}
body #wrap .block.cube7 .cube:nth-of-type(23) {
left: 100%;
}
body #wrap .block.cube7 .cube:nth-of-type(64):nth-of-type(1n), body #wrap .block.cube7 .cube:nth-of-type(65):nth-of-type(1n) {
left: 0;
}
body #wrap .block.cube7 .cube:nth-of-type(24) {
left: 0;
}
body #wrap .block.cube7 .cube:nth-of-type(25) {
left: 200%;
}
body #wrap .block.cube7 .cube:nth-of-type(26) {
left: 100%;
}
body #wrap .block.cube7 .cube:nth-of-type(73):nth-of-type(1n), body #wrap .block.cube7 .cube:nth-of-type(74):nth-of-type(1n) {
left: 0;
}
body #wrap .block.cube7 .cube:nth-of-type(27) {
left: 0;
}
body #wrap .block.cube7 .cube:nth-of-type(28) {
left: 200%;
}
body #wrap .block.cube7 .cube:nth-of-type(29) {
left: 100%;
}
body #wrap .block.cube7 .cube:nth-of-type(82):nth-of-type(1n), body #wrap .block.cube7 .cube:nth-of-type(83):nth-of-type(1n) {
left: 0;
}
body #wrap .block.cube7 .cube:nth-of-type(1) {
left: 200%;
}
body #wrap .block.cube7 .cube:nth-of-type(2) {
left: 100%;
}
body #wrap .block.cube7 .cube:nth-of-type(10), body #wrap .block.cube7 .cube:nth-of-type(11) {
transform: translateZ(calc(var(--area) * -2));
}
body #wrap .block.cube8 .cube:nth-of-type(5) {
transform: translateZ(calc(var(--area) * -1.5));
}
body #wrap .block.cube8 .cube:nth-of-type(11) {
top: 200%;
}
body #wrap .block.cube8 .cube:nth-of-type(25) {
transform: translateZ(calc(var(--area) * -1));
}
body #wrap .block.cube8 .cube:nth-of-type(26) {
transform: translateZ(calc(var(--area) * -1));
}
body #wrap .block.cube8 .cube:nth-of-type(27) {
transform: translateZ(calc(var(--area) * -1));
}
body #wrap .block.cube9 .cube:nth-of-type(5) {
transform: translateZ(calc(var(--area) * -2));
}
body #wrap .block.cube9 .cube:nth-of-type(11) {
top: 200%;
}
body #wrap .block.cube9 .cube:nth-of-type(4), body #wrap .block.cube9 .cube:nth-of-type(13) {
left: 200%;
}
body #wrap .block.cube9 .cube:nth-of-type(14) {
left: 100%;
}
body #wrap .block.cube9 .cube:nth-of-type(22) {
top: -100%;
}
body #wrap .block.cube9 .cube:nth-of-type(23) {
top: -100%;
}
body #wrap .block.cube9 .cube:nth-of-type(24) {
top: -100%;
}
body #wrap .block.cube9 .cube:nth-of-type(25) {
transform: translateZ(calc(var(--area) * -1));
}
body #wrap .block.cube9 .cube:nth-of-type(26) {
transform: translateZ(calc(var(--area) * -1));
}
body #wrap .block.cube9 .cube:nth-of-type(27) {
transform: translateZ(calc(var(--area) * -1));
}
body #wrap .block .cube {
background: var(--y);
position: relative;
transition: 0.3s ease-in-out;
left: 0;
top: 0;
z-index: 0;
backface-visibility: hidden;
}
body #wrap .block .cube:nth-of-type(1) + .cube .side:last-of-type {
box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(1) + .cube + .cube .side:last-of-type {
box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(1) .side:last-of-type {
box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(10) + .cube .side:last-of-type {
box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(10) + .cube + .cube .side:last-of-type {
box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(10) .side:last-of-type {
box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(19) + .cube .side:last-of-type {
box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(19) + .cube + .cube .side:last-of-type {
box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(19) .side:last-of-type {
box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(28) + .cube .side:last-of-type {
box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(28) + .cube + .cube .side:last-of-type {
box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(28) .side:last-of-type {
box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(37) + .cube .side:last-of-type {
box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(37) + .cube + .cube .side:last-of-type {
box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(37) .side:last-of-type {
box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(46) + .cube .side:last-of-type {
box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(46) + .cube + .cube .side:last-of-type {
box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(46) .side:last-of-type {
box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(55) + .cube .side:last-of-type {
box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(55) + .cube + .cube .side:last-of-type {
box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(55) .side:last-of-type {
box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(64) + .cube .side:last-of-type {
box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(64) + .cube + .cube .side:last-of-type {
box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(64) .side:last-of-type {
box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(73) + .cube .side:last-of-type {
box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(73) + .cube + .cube .side:last-of-type {
box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(73) .side:last-of-type {
box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube .side {
position: absolute;
width: 100%;
height: 100%;
}
body #wrap .block .cube .side:first-of-type {
top: 0.15vmin;
left: -100%;
background: var(--db);
transform-origin: right;
transform: rotateY(-90deg);
}
body #wrap .block .cube .side:last-of-type {
top: -100%;
left: 0;
transform-origin: bottom;
background: var(--lb);
transform: rotateX(90deg);
}
body #wrap .block .cube .side:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: -0.05vmin;
background: var(--db);
transform: translateZ(calc((var(--area) * -1.05)));
}
body #wrap .block .cube:nth-of-type(1) {
grid-area: col1;
background: var(--y);
}
body #wrap .block .cube:nth-of-type(1):after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: var(--y);
box-shadow: 0 0 0 0.05vmin var(--y);
transform: translateZ(0.025vmin);
}
body #wrap .block .cube:nth-of-type(10) {
grid-area: col1;
transform: translateZ(calc(var(--area) * -1));
background: var(--o);
}
body #wrap .block .cube:nth-of-type(19) {
grid-area: col1;
transform: translateZ(calc(var(--area) * -2));
background: var(--o);
}
body #wrap .block .cube:nth-of-type(2) {
grid-area: col2;
background: var(--y);
}
body #wrap .block .cube:nth-of-type(2):after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: var(--y);
box-shadow: 0 0 0 0.05vmin var(--y);
transform: translateZ(0.025vmin);
}
body #wrap .block .cube:nth-of-type(11) {
grid-area: col2;
transform: translateZ(calc(var(--area) * -1));
background: var(--o);
}
body #wrap .block .cube:nth-of-type(20) {
grid-area: col2;
transform: translateZ(calc(var(--area) * -2));
background: var(--o);
}
body #wrap .block .cube:nth-of-type(3) {
grid-area: col3;
background: var(--y);
}
body #wrap .block .cube:nth-of-type(3):after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: var(--y);
box-shadow: 0 0 0 0.05vmin var(--y);
transform: translateZ(0.025vmin);
}
body #wrap .block .cube:nth-of-type(12) {
grid-area: col3;
transform: translateZ(calc(var(--area) * -1));
background: var(--o);
}
body #wrap .block .cube:nth-of-type(21) {
grid-area: col3;
transform: translateZ(calc(var(--area) * -2));
background: var(--o);
}
body #wrap .block .cube:nth-of-type(4) {
grid-area: col4;
background: var(--y);
}
body #wrap .block .cube:nth-of-type(4):after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: var(--y);
box-shadow: 0 0 0 0.05vmin var(--y);
transform: translateZ(0.025vmin);
}
body #wrap .block .cube:nth-of-type(13) {
grid-area: col4;
transform: translateZ(calc(var(--area) * -1));
background: var(--o);
}
body #wrap .block .cube:nth-of-type(22) {
grid-area: col4;
transform: translateZ(calc(var(--area) * -2));
background: var(--o);
}
body #wrap .block .cube:nth-of-type(5) {
grid-area: col5;
background: var(--y);
}
body #wrap .block .cube:nth-of-type(5):after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: var(--y);
box-shadow: 0 0 0 0.05vmin var(--y);
transform: translateZ(0.025vmin);
}
body #wrap .block .cube:nth-of-type(14) {
grid-area: col5;
transform: translateZ(calc(var(--area) * -1));
background: var(--o);
}
body #wrap .block .cube:nth-of-type(23) {
grid-area: col5;
transform: translateZ(calc(var(--area) * -2));
background: var(--o);
}
body #wrap .block .cube:nth-of-type(6) {
grid-area: col6;
background: var(--y);
}
body #wrap .block .cube:nth-of-type(6):after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: var(--y);
box-shadow: 0 0 0 0.05vmin var(--y);
transform: translateZ(0.025vmin);
}
body #wrap .block .cube:nth-of-type(15) {
grid-area: col6;
transform: translateZ(calc(var(--area) * -1));
background: var(--o);
}
body #wrap .block .cube:nth-of-type(24) {
grid-area: col6;
transform: translateZ(calc(var(--area) * -2));
background: var(--o);
}
body #wrap .block .cube:nth-of-type(7) {
grid-area: col7;
background: var(--y);
}
body #wrap .block .cube:nth-of-type(7):after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: var(--y);
box-shadow: 0 0 0 0.05vmin var(--y);
transform: translateZ(0.025vmin);
}
body #wrap .block .cube:nth-of-type(16) {
grid-area: col7;
transform: translateZ(calc(var(--area) * -1));
background: var(--o);
}
body #wrap .block .cube:nth-of-type(25) {
grid-area: col7;
transform: translateZ(calc(var(--area) * -2));
background: var(--o);
}
body #wrap .block .cube:nth-of-type(8) {
grid-area: col8;
background: var(--y);
}
body #wrap .block .cube:nth-of-type(8):after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: var(--y);
box-shadow: 0 0 0 0.05vmin var(--y);
transform: translateZ(0.025vmin);
}
body #wrap .block .cube:nth-of-type(17) {
grid-area: col8;
transform: translateZ(calc(var(--area) * -1));
background: var(--o);
}
body #wrap .block .cube:nth-of-type(26) {
grid-area: col8;
transform: translateZ(calc(var(--area) * -2));
background: var(--o);
}
body #wrap .block .cube:nth-of-type(9) {
grid-area: col9;
background: var(--y);
}
body #wrap .block .cube:nth-of-type(9):after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: var(--y);
box-shadow: 0 0 0 0.05vmin var(--y);
transform: translateZ(0.025vmin);
}
body #wrap .block .cube:nth-of-type(18) {
grid-area: col9;
transform: translateZ(calc(var(--area) * -1));
background: var(--o);
}
body #wrap .block .cube:nth-of-type(27) {
grid-area: col9;
transform: translateZ(calc(var(--area) * -2));
background: var(--o);
}