.glow-text {
    font-family: 'Press Start 2P', cursive;
    font-size: 2rem;
    color: #f9f5f7;
    text-shadow: 
        0 0 5px #b53ea5,
        0 0 10px #de7fd9,
        0 0 20px #d236a3,
        0 0 40px #00ffff;
    animation: float 2s ease-in-out infinite;
}

@keyframes float {
    0% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}


.background-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-size: cover;
    background-position: center;
    animation: oscillate 10s ease-in-out infinite;
    z-index: -2;
}

.layer1 {
    background-image: url('bg\ 1.PNG');
    animation-duration: 10s;
}

.layer2 {
    background-image: url('bg2.PNG');
    animation-duration: 12s;
}

.layer3 {
    background-image: url('star.PNG');
    animation-duration: 14s;
}

.layer4 {
    background-image: url('bg3.PNG');
    animation-duration: 16s;
}

.layer5 {
    background-image: url('bg4.PNG');
    animation-duration: 18s;
}

.layer6 {
    background-image: url('moon.PNG');
    animation-duration: 20s;
    top:-5%;
    
}

.layer7 {
    background-image: url('bg5.PNG');
    animation-duration: 22s;
}

.layer8 {
    background-image: url('infront.PNG');
    animation-duration: 24s;
}


@keyframes oscillate {
    0% { transform: translateX(0px) translateY(0px) scale(1); }
    25% { transform: translateX(10px) translateY(6px) scale(1.05); }
    50% { transform: translateX(0px) translateY(0px) scale(1.); }
    75% { transform: translateX(6px) translateY(10px) scale(1.05); }
    100% { transform: translateX(0px) translateY(0px) scale(1.); }
}

.content {
    position: relative;
    z-index: 1;
    color: white;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
}


/*

#clickMid{
    position:absolute;
    left: 40%;
    top: 83%;
    font-family: 'Open Sans', sans-serif; 
    font-size: 18px; 
    color: #ffffff; 
    line-height: 1.5; 
}

*/