:root {
  --ctrx: 0em;
  --crdwdt: 4.8em;
  --crdhgt: 2.7em;
  --crdtab: 4.5em;
  --hextab: 4.16em;
}

body{
    background: url("/bkgrd02.png");
    background-size: cover;
}

.boxview {
  overflow: hidden;
  margin: 0;
  height: 100vh;
  perspective: 40em;
  background: url("./bkgrd02.png"); 
   background-size: cover;    

  /*
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/17_03_bg_xmas_spices.jpg") 50%/cover gainsboro;
  background-blend-mode: overlay; */
  font: 8vmin cookie, cursive;
  text-shadow: 1px 1px 1px #fff, 2px 2px 2px currentcolor;
  text-align: center;
  color: crimson;    
}

.boxview:after {
  left: 0;
  transform: translate(calc(50vw - 50%));
  content: "壬寅年　2022";  
  /*content: "安居樂業 　身體健康"; */
}

.cube {
  position: fixed;
  top: 80%;
  left: 50%;
  transform-style: preserve-3d;
  transform: rotateX(-15deg) rotateY(10deg);
  /* scale3d(1.4,1.4,1.4); */
}

.cube__face {

  width: var(--wdt);
  height: var(--hgt);
  transform: var(--rot);
  background: var(--img) 100%/cover;

  position: absolute;
  margin: -4.5em;

  /*
  margin: -2em;
  width: 4em;
  height: 4em;
  backface-visibility: hidden;
  transform: var(--rot) translateZ(2em);
  box-shadow: inset 0 0 0 3px;
  background: var(--img) 50%/cover gainsboro;
  background-blend-mode: overlay;
  color: deeppink;
  line-height: 4em;
  filter: sepia(0.3); */
}

.cube__face:nth-child(1) {
  --wdt: 5em;
  --hgt: 4em;
  --rot: rotateX(90deg) translateX(2em) translateY(0em) translateZ(-2.49em);
  --img: url("./green.svg");
}

.cube__face:nth-child(2) {
  --wdt: 5em;
  --hgt: 5em;
  --rot: rotateY(90deg) translateX(0em) translateY(-0.5em) translateZ(4.51em);
  --img: url("./side01.svg");
}
.cube__face:nth-child(3) {
  --wdt: 5em;
  --hgt: 5em;
  --rot: rotateY(-90deg) translateX(0em) translateY(-0.5em) translateZ(0.51em);
  --img: url("./side01.svg");
}

.cube__face:nth-child(4) {
  --wdt: 5em;
  --hgt: 2.95em;
  --rot: rotateY(0deg) translateX(2em) translateY(1.52em) translateZ(2em);
  --img: url("./font.svg"); 
}

.cube__face:nth-child(5) {
  --wdt: 4em;
  --hgt: 3em;
  --rot: rotateY(90deg) translateX(0) translateY(1.5em) translateZ(5em);
  background-color: #ECF762;
}

.cube__face:nth-child(6) {
  --wdt: 5em;
  --hgt: 2.95em;
  --rot: rotateY(180deg) translateX(-2em) translateY(1.52em) translateZ(2em);
  --img: url("./back.svg");    
  background-color: #ff00ce;
}

.cube__face:nth-child(7) {
  --wdt: 4em;
  --hgt: 3em;
  --rot: rotateY(270deg) translateX(0) translateY(1.5em) translateZ(0);
  background-color: #ECF762;
}

.cube__face:nth-child(8) {
  --wdt: 5.04em;
  --hgt: 3.53em;
  --rot: rotateX(45deg) translateX(1.98em) translateY(0.16em) translateZ(1.6em);
  --img: url("./roof1.png");     
  /* background-color: #7055e5; */
}

.cube__face:nth-child(9) {
  --wdt: 5.04em;
  --hgt: 3.53em;
  --rot: rotateX(-45deg) translateX(1.98em) translateY(0.16em) translateZ(-1.6em);
  --img: url("./roof1.png");
  /*background-color: #a08df4; */
}


.cube__face:after {
  left: 0;
  width: inherit;
  content: var(--txt, "");
}

.box div  {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: transparent;
    border: 0px solid #FFFF;
    border-radius: 30%;
    font-size: 50px;
}
.box div:nth-child(1){
    top:12% ;
    left: 80%;
    animation: animate 20s linear infinite;
}
.box div:nth-child(2){
    top:30% ;
    left: 50%;
    animation: animate 19s linear infinite;
}
.box div:nth-child(3){
    top:17% ;
    left: 6%;
    animation: animate 18s linear infinite;
}
.box div:nth-child(4){
    top:20% ;
    left: 60%;
    animation: animate 17s linear infinite;
}
.box div:nth-child(5){
    top:80% ;
    left: 70%;
    animation: animate 16s linear infinite;
}
.box div:nth-child(6){
    top:40% ;
    left: 20%;
    animation: animate 15s linear infinite;
}
.box div:nth-child(7){
    top:35% ;
    left: 70%;
    animation: animate 21s linear infinite;
}
.box div:nth-child(8){
    top:80% ;
    left: 30%;
    animation: animate 22s linear infinite;
}
.box div:nth-child(9){
    top:90% ;
    left: 20%;
    animation: animate 23s linear infinite;
}
.box div:nth-child(10){
    top:40% ;
    left: 10%;
    animation: animate 24s linear infinite;
}
@keyframes animate{
    0%{
        transform: scale(0) translateY(0) rotate(0);
        opacity: 1;
    }
    100%{
        transform: scale(1.3) translateY(-90px) rotate(360deg);
        opacity: 1;
    }

}

.door{

    font-size: 5em;
    top: 100px;
    left: 100px;
}