body {
    background-color: #0c0c0c;
    margin: 0;
}

body * {
    position: absolute;
}

@keyframes twinkle {
    from {
        opacity: 0.5;
        /* background-color: red; */
    }
    to {
        opacity: 1;
    }
}

.sparkle {
    opacity: 1;
    animation-name: twinkle;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 1.5s;
}

.viewport {
    overflow: hidden;
    height: 648px;
    width: 1152px;
}

.border {
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-image: url("../assets/images/border.png");
}

.base {
    background-color: #0c0c0c;
    background-image: url("../assets/images/0_background.png");
    width: 1600px;
    height: 900px;
    top: calc((-1 / 2) * (900px - 648px));
    left: calc((-1 / 2) * (1600px - 1152px));
}

.base div {
    width: 100%;
    height: 100%;
    background-size: contain;
}

.layer1 {
    transform-style: preserve-3d;
    /* transform: translate3d(-400px, -150px, -300px); */
    transform: translateZ(-300px);

    background-image: url("../assets/images/1_left nebula.png");
}

.layer2 {
    /* transform: translate3d(-200px, -100px, -200px); */
    transform: translateZ(-200px);

    background-image: url("../assets/images/2_right nebula.png");
}

.layer3 {
    transform: translateZ(-100px);
    background-image: url("../assets/images/3_star base.png");
}

.layer3b {
    transform: translateZ(-100px);
    background-image: url("../assets/images/3_star sparkles.png");
}

.layer4 {
    /* transform: translateZ(100px); */
    background-image: url("../assets/images/4_star base.png");
}

.layer4b {
    /* transform: translateZ(-100px); */
    background-image: url("../assets/images/4_star sparkles.png");
}

.layer5 {
    transform: translateZ(30px);
    background-image: url("../assets/images/5_sun.png");
}

.layer5b {
    transform: translateZ(30px);
    background-image: url("../assets/images/5_sun light.png");
}

.layer6 {
    transform: translateZ(270px);
    background-image: url("../assets/images/6_planet.png");
}