:root {
    --winter1: url(images/ground/tex1_32x32_82f28ec4199a45be_6d5ff5628ae85b42_8.png);
    --spring1: url(images/ground/tex1_32x32_903adc6355e36f59_4f54e78515f0a185_8.png);
    --summer1: url(images/ground/tex1_32x32_903adc6355e36f59_f83e63a8b6cb47b7_8.png);
    --fall1: url(images/ground/tex1_32x32_903adc6355e36f59_963dc45f18e13cf7_8.png);
    --winter2: url(images/ground/tex1_32x32_cfa57a6e6f966d11_6d5ff5628ae85b42_8.png);
    --spring2: url(images/ground/tex1_32x32_626709d910129694_4f54e78515f0a185_8.png);
    --summer2: url(images/ground/tex1_32x32_626709d910129694_f83e63a8b6cb47b7_8.png);
    --fall2: url(images/ground/tex1_32x32_626709d910129694_963dc45f18e13cf7_8.png);
    --winter3: url(images/ground/tex1_32x32_e2ab673814e71af6_6d5ff5628ae85b42_8.png);
    --spring3: url(images/ground/tex1_32x32_e96fecd242518c9f_4f54e78515f0a185_8.png);
    --summer3: url(images/ground/tex1_32x32_e96fecd242518c9f_f83e63a8b6cb47b7_8.png);
    --fall3: url(images/ground/tex1_32x32_e96fecd242518c9f_963dc45f18e13cf7_8.png);

    --clock01: url();
    --clock02: url();
    --clock03: url();
    --clock04: url();
    --clock05: url();
    --clock06: url();
    --clock07: url();
    --clock08: url();
    --clock09: url();
    --clock10: url(images/clock/tex1_32x32_aacb31c5da3ac045_2.png);
    --clock11: url(images/clock/tex1_32x32_2c325d7396c55312_2.png);
    --clock12: url();

}

body {
    background-size: 128px 128px;
    image-rendering: pixelated;
}

#clock {
    position: absolute;
    width: 52px;
    height: 52px;
}

.clockhalf {
    position: absolute;
    width: 52px;
    height: 26px;
    background-size: cover;
    image-rendering: auto;
    backface-visibility: visible;
}

#flip {
    background-image: url(images/clock/tex1_32x32_aacb31c5da3ac045_2.png);
    transform-origin: bottom center;
    top: 0;
    opacity: 0;
}

.clockhalf.top.flip {
    animation: flipDown .5s;
}

.clockhalf.bot {
    background-image: url(images/clock/tex1_32x32_aacb31c5da3ac045_2.png);
    background-position-y: bottom;
    top: 26px;
    opacity: 0;
}

.clockhalf.bot.visible {
    opacity: 1;
}

.clockhalf.front {
    z-index: 2;
}
.clockhalf.back {
    z-index: 1;
}

.clock01 {background-image: var(--clock01);}
.clock02 {background-image: var(--clock02);}
.clock03 {background-image: var(--clock03);}
.clock04 {background-image: var(--clock04);}
.clock05 {background-image: var(--clock05);}
.clock06 {background-image: var(--clock06);}
.clock07 {background-image: var(--clock07);}
.clock08 {background-image: var(--clock08);}
.clock09 {background-image: var(--clock09);}
.clock10 {background-image: var(--clock10);}
.clock11 {background-image: var(--clock11);}
.clock12 {background-image: var(--clock12);}

@keyframes flipDown {
    0% {
        opacity: 1;
        top: 0px;
        background-position-y: top;
        transform-origin: bottom center;
        transform: rotateX(0deg) rotateZ(0deg);
    }
    49.99% {
        top: 0px;
        background-position-y: top;
        transform-origin: bottom center;
        transform: rotateX(-90deg) rotateZ(0deg);
    }
    50.01% {
        top: 26px;
        background-position-y: bottom;
        transform-origin: top center;
        transform: rotateX(90deg) rotateZ(0deg);
    }
    100% {
        opacity: 1;
        top: 26px;
        background-position-y: bottom;
        transform-origin: top center;
        transform: rotateX(0deg) rotateZ(0deg);
    }
}