:root {
    --glow-rgb: 52, 235, 214;
}

body {
    background: rgb(0,36,41);
    background: linear-gradient(24deg, rgba(0,36,41,1) 0%, rgba(163,47,47,1) 35%, rgba(237,174,73,1) 100%);   
    height: 2000px;
    
}



.header {
    background-color: rgba(249, 249, 249, 0.4);
    padding: 20px;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    color: #ffffff;
    font-size: 30px;
}



.content {
    padding: 50px;
    font-size: 24px;
    font-family: 'Roboto', sans-serif;
    text-shadow: rgb(0, 0, 0) 0px 0px 50px;
    color: #ffffff;

}






.center {
    position: relative;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #ffffff;
    text-shadow: rgb(255, 255, 255)  0px 0px 20px;
    font-size: 200%;
    font-family: 'Roboto', sans-serif, 'bold';
    padding: 5%;
}






* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.glow-point {
    position: absolute;
    box-shadow: 0rem 0rem 1.2rem 0.6rem rgb(var(--glow-rgb));
    pointer-events: none;
}

.star {
    position: absolute;
    z-index: 2;
    color: white;
    font-size: 1rem;
    animation-duration: 1500ms;
    animation-fill-mode: forwards;
    pointer-events: none;
}

.navbar a {
    color: rgb(255, 255, 255); 
}
.navbar {
    background-color: rgb(0, 0, 0, 0.75);
    box-shadow: 0px 0px 2px 2px rgb(0, 0, 0, 0.75);
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 3%;
    padding: 2%;
    gap: 8%;
    text-shadow: rgb(255, 255, 255) 0px 0px 20px;
    margin-bottom: 150px
    
}

body {
    height: 2000px; /* This will make the page scrollable */
}

p {
    position: relative; /* This will allow the z-index property to work */
    z-index: 1; /* This will bring the paragraph to the foreground */
    margin-top: 100px; /* This will create distance from the top of the page */
}


    @keyframes fall-1 {
        0% {
            transform: translate(0px, 0px) rotateX(45deg) rotateY(30deg) rotateZ(0deg) scale(0.25);
            opacity: 0;
        }
        
        5% {
            transform: translate(10px, -10px) rotateX(45deg) rotateY(30deg) rotateZ(0deg) scale(1);
            opacity: 1;
        }
        
        100% {
            transform: translate(25px, 200px) rotateX(180deg) rotateY(270deg) rotateZ(90deg) scale(1);
            opacity: 0;
        }
    }

    @keyframes fall-2 {
        0% {
            transform: translate(0px, 0px) rotateX(-20deg) rotateY(10deg) scale(0.25);
            opacity: 0;
        }
        
        10% {
            transform: translate(-10px, -5px) rotateX(-20deg) rotateY(10deg) scale(1);
            opacity: 1;
        }
        
        100% {
            transform: translate(-10px, 160px) rotateX(-90deg) rotateY(45deg) scale(0.25);
            opacity: 0;
        }
    }

    @keyframes fall-3 {
        0% {
            transform: translate(0px, 0px) rotateX(0deg) rotateY(45deg) scale(0.5);
            opacity: 0;
        }
        
        15% {
            transform: translate(7px, 5px) rotateX(0deg) rotateY(45deg) scale(1);
            opacity: 1;
        }
        
        100% {
            transform: translate(20px, 120px) rotateX(-180deg) rotateY(-90deg) scale(0.5);
            opacity: 0;
        }
    }
    }