html,body{
    width: 100%;
    margin:0;
    height:100%;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    background: #84323d;

    overflow: hidden;

    /* background-image: url('../media/background.svg');
    background-size: cover;
    background-position: center center; */
}

.lablogo {
    position: fixed;
    top: 25px;
    left: 25px;
    width: 120px;
}
.lablogo img {
    width: 100%;
}

/* ------------------------------------------------------------------ */
/* box */
.box {
    position: absolute;

    width: 520px;
    height: 520px;

    top: 50%;
    left: 50%;
    margin-top: -260px;
    margin-left: -260px;

    transform-style: preserve-3d;
    perspective: 1000px;
    animation: animate 10s linear infinite;
}
.view {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

    display: flex;
    justify-content: center;
    align-items: center;
}

@-webkit-keyframes animate {
    0% {
        transform: perspective(1000px) rotateY(0deg);
    }
    100% {
        transform: perspective(1000px) rotateY(360deg);
    }
}
@keyframes animate {
    0% {
        transform: perspective(1000px) rotateY(0deg);
    }
    100% {
        transform: perspective(1000px) rotateY(360deg);
    }
}

/* ------------------------------------------------------------------ */

.sky {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
    
.star {
    position: absolute;
    background: white;
    border-radius: 50%;
    opacity: 0;
    animation: fadeIn 1s ease forwards, twinkle 2s infinite ease-in-out;
}

/* 淡入星星 */
@keyframes fadeIn {
    to { opacity: 1; }
}

/* 閃爍效果 */
@keyframes twinkle {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.2; }
}

/* ------------------------------------------------------------------ */
/* tiger */
.tiger {
    position: absolute;
    float: left;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    margin-top: -50%;
    margin-left: -50%;
    
    transform: rotate(-45deg);
}
.fu {
    font-size: 130px;
    line-height: 130px;
}

/* ------------------------------------------------------------------ */
/* front & back */

.frontback {
    background-color: rgba(195, 13, 15, 1);
    transform: rotate(45deg) translateZ(0px);
}
.frontsky {
    transform: rotate(45deg) translateZ(-30px);
}
.fronttigerback {
    transform: rotate(0deg) translateZ(-79px);
}
.front {
    transform: rotate(45deg) translateZ(-80px);
}
.newyear {
    transform: rotate(45deg) translateZ(-120px);
}
.newyear img {
    transform: rotate(-45deg);
}

.backback {
    background-color: red;
    transform: rotate(45deg) translateZ(1px);
}

.backcopy {
    transform: rotate(45deg) translateZ(80px);
}
.backcopy img {
    transform: rotate(-45deg);
}

.backsky {
    transform: rotate(45deg) translateZ(50px);
}

.back {
    transform: rotate(45deg) translateZ(80px);
}
.back img {
    transform: rotate(-45deg);
}

.backcloud {
    transform: translateZ(-100px);
}

@media screen and (max-width: 480px) {

    @-webkit-keyframes animate {
        0% {
            transform: perspective(1000px) rotateY(0deg) scale(0.8);
        }
        100% {
            transform: perspective(1000px) rotateY(360deg) scale(0.8);
        }
    }
    @keyframes animate {
        0% {
            transform: perspective(1000px) rotateY(0deg) scale(0.8);
        }
        100% {
            transform: perspective(1000px) rotateY(360deg) scale(0.8);
        }
    }
}
@media screen and (max-width: 375px) {

    @-webkit-keyframes animate {
        0% {
            transform: perspective(1000px) rotateY(0deg) scale(0.7);
        }
        100% {
            transform: perspective(1000px) rotateY(360deg) scale(0.7);
        }
    }
    @keyframes animate {
        0% {
            transform: perspective(1000px) rotateY(0deg) scale(0.8);
        }
        100% {
            transform: perspective(1000px) rotateY(360deg) scale(0.8);
        }
    }
}
@media screen and (max-width: 320px) {

    @-webkit-keyframes animate {
        0% {
            transform: perspective(1000px) rotateY(0deg) scale(0.6);
        }
        100% {
            transform: perspective(1000px) rotateY(360deg) scale(0.6);
        }
    }
    @keyframes animate {
        0% {
            transform: perspective(1000px) rotateY(0deg) scale(0.6);
        }
        100% {
            transform: perspective(1000px) rotateY(360deg) scale(0.6);
        }
    }
}