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

html {
  scroll-behavior: smooth;
}
ul li{
    display: inline-block;
    padding-top: 20px;
    padding-left: 5rem;
    animation: 2s fade ease-in;
}
body {
    margin: 0;
    overflow: hidden;
    background-color: black
}

.stars {
    position: absolute;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 1;
}

.stars div {
    position: absolute;
    width: 0.5px;
    height: 0.5px;
    background: white;
    border-radius: 50%;
    animation: twinkle 1.5s infinite ease-in-out;
}

@keyframes twinkle {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 1;
    }
}

.shooting-star {
    position: absolute;
    width: 100px; /* Longer streak */
    height: 2px; /* Thinner streak */
    background: linear-gradient(to left, rgba(0, 191, 255, 1), rgba(0, 191, 255, 0)); /* Fading trail */
    border-radius: 6px; /* Slight rounding */
    animation: shoot 20s infinite ease-in-out, fadeTrail 2s infinite ease-in-out; /* Trail fading */;
}

.shooting-star.d {
    animation: shoot 20s cubic-bezier(0.2, 1, 0.3, 2) infinite;
}

.shooting-star.a {
    animation-delay: 10s;
    animation: shoot2 40s cubic-bezier(0.1, 0.9, 0.2, 1) infinite;
}

.shooting-star.b {
    animation-delay: 10s;
    animation: shoot3 30s infinite ease-in-out;
}

.shooting-star.c {
    animation: shoot4 40s infinite ease-in-out;
}

@keyframes fadeTrail {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes shoot {
    0% {
        transform: translate(2800px, -1000px) scaleX(1) scaleY(1) rotate(150deg);
        top: 400px;
        left: 600px;
        opacity: 0;
    }
    50% {
        transform: translate(-3000px, 2000px) scaleX(1) scaleY(1) rotate(150deg);
        top: 400px;
        left: 600px;
        opacity: 1;
    }
    100% {
        transform: translate(-6000px, 4000px) scaleX(0.5) scaleY(0.5) rotate(150deg);
        top: 400px;
        left: 600px;
        opacity: 0;
    }
}
@keyframes shoot2 {
    0% {
        transform: translate(-6000px, -4000px) scaleX(1) scaleY(1) rotate(35deg);
        top: 450px;
        left: 600px;
        opacity: 0;
    }
    20% {
        transform: translate(3000px, 2000px) scaleX(1) scaleY(1) rotate(35deg);
        top: 450px;
        left: 600px;
        opacity: 1;
    }
    100% {
        transform: translate(6000px, 4000px) scaleX(0.5) scaleY(0.5) rotate(35deg);
        top: 450px;
        left: 600px;
        opacity: 0;
    }
}
@keyframes shoot3 {
    0% {
        transform: translateY(2000px) scaleX(1) scaleY(1) rotate(-130deg);
        top: -10%;
        left: 100%;
        opacity: 1;
    }
    100% {
        transform: translateY(-2000px) scaleX(0.5) scaleY(0.5) rotate(-130deg);
        top: 110%;
        left: -10%;
        opacity: 0;
    }
}

@keyframes shoot4 {
    0% {
        transform: translateX(-100px) scaleX(1) scaleY(1) rotate(0deg);
        top: 600px;
        opacity: 0;
    }

    50% {
        transform: translateX(400vw) scaleX(1) scaleY(1) rotate(0deg);
        top: 600px;
        opacity: 1;
    }

    100% {
        transform: translateX(500vw) scaleX(0.5) scaleY(0.5) rotate(0deg);
        top: 600px;

        opacity: 0;
    }
}

/* Actual Page */

.megrim-regular {
    font-family: "Megrim", system-ui;
    font-weight: 400;
    font-style: normal;
  }
  

h1 {
    padding-top: 50px;
    font-size: 80px;
    color: white;
    text-align: center;
    animation: 1s fade ease-in
    
}

@keyframes fade {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

/* Grid */
    .grid {
        position: relative;
        margin: 0 auto;
        display: grid;
       grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
       gap: 30px;
       max-width: 2000px;
       animation: 1s fade ease-in;
       font-size: 50px;
       text-align: center;
       padding-top: 300px;
       background: transparent;
    }
    .grid figure {
        border: 5px solid rgb(189, 46, 255);
        border-radius: 20px;
    }

    .grid figure img{
        width: 100%;
        border-radius: 20px;
    }

    .link {
        color: white;
        transition: all 0.3s ease;
        text-decoration: none;
    }

    .link:hover {
        color: purple
    }
    
/* ID's */



#BlackHole {
    padding-top: 300px;
}

@media only screen and (min-width: 400px) {
    .shooting-star {
        width: 150px; /* Longer trail for bigger screens */
        height: 3px;
    }

    h1 {
        font-size: 3rem;
    }
}