@import url('https://fonts.googleapis.com/css2?family=Star+Wars:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Questrial&display=swap');


@media (max-width: 768px) {
    #pdf-link {
        margin-top: 20px; /* Less space on smaller screens */
        width: 30%; /* Larger percentage for smaller screens */
        max-width: 120px; /* Adjust maximum size for smaller screens */
    }
}



@media (max-width: 480px) {
    #pdf-link {
        margin-top: 10px; /* Even less space on very small screens */
        width: 40%; /* Even larger percentage for very small screens */
        max-width: 100px; /* Adjust maximum size for very small screens */
    }
}
body {
    /* Assuming you have a 'laser.png' image in the same directory as your CSS */
    cursor: url('laser.png'), auto;
}
h1 {
    font-family: 'Questrial', sans-serif;
    color: #e4dcc3; /* Replace with the color code you identified */
    /* Other styling */
}


body {
    background-color: #020b12;
    margin: 0;
    padding: 0;
    font-family: 'Questrial', sans-serif;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

#main-content h1 {
    font-family: 'Questrial', sans-serif;
    font-size: 4em;
    text-align: center;
    margin: 0;
    position: relative;
    top: -50px;
}

#scrolling-text {
    overflow: hidden;
    white-space: nowrap;
    position: fixed;
    bottom: 0;
    font-size: 2em; /* Makes the text twice as big */
    padding: 20px; /* Increase the padding to enlarge the frame */
    left: 0; /* Make sure it starts from the far left */
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* As per your design */
    padding: 10px;
    box-sizing: border-box; /* Ensures padding is included in the width */
    font-family: 'Questrial', sans-serif;
    color: #a9bfd6
    
}

#scrolling-content {
    display: inline-block;
    animation: scroll-text 30s linear infinite; /* Adjust speed as necessary */
}

@keyframes scroll-text {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

marquee {
    font-size: 1.2em;
    color: #a9bfd6;
}

.star {
    position: absolute;
    background-color: #a9bfd6;
    border-radius: 50%;
    z-index: 1;
    transition: left 1s ease-out, top 1s ease-out; /* Smooth transition for 1 second */
}

/* Additions for ground and sky illusion */
#ground {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 20vh;
    background: linear-gradient(to top, #0A0A0A 0%, transparent 100%);
    z-index: 10;
}

#shooting-star {
    position: absolute;
    background-color: white;
    height: 1px;
    z-index: 5;
    display: none;
}

/* Base styles for the album cover - optimized for mobile devices */
#album-cover {
    position: relative;
    z-index: 2;
    display: block;
    margin: 20px auto 0;
    object-fit: cover;
    /* Base size for mobile devices */
    width: calc(min(50vh, 100vw)); 
    height: calc(min(50vh, 100vw)); 
    max-width: 800px;
    max-height: 800px;
    transition: transform 0.2s ease, opacity 0.3s ease; /* Smooth transitions */

}

#album-cover.animate-cover {
    transform: scale(1.1); /* Slightly enlarge the image */
    opacity: 0; /* Fade out effect */
}
/* Adjustments for tablets (devices with width between 768px and 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    #album-cover {
        /* Smaller size for tablet screens */
        width: calc(min(45vh, 90vw)); 
        height: calc(min(45vh, 90vw)); 
    }
}

/* Adjustments for computers (devices with width greater than 1024px) */
@media (min-width: 1025px) {
    #album-cover {
        /* Even smaller size for computer screens */
        width: calc(min(40vh, 60vw)); 
        height: calc(min(40vh, 60vw)); 
    }
}

/* Base styles for mobile devices */
#pdf-image {
    width: 150%; /* Full width on mobile devices */
    display: block;
}

/* Adjustments for tablets (devices with width between 768px and 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    #pdf-image {
        width: 100%; /* Reduce width on tablets */
        margin: 0 auto; /* Center the image */
    }
}

/* Adjustments for computers (devices with width greater than 1024px) */
@media (min-width: 1025px) {
    #pdf-image {
        width: 80%; /* Further reduce width on computers */
        margin: 0 auto; /* Center the image */
    }
}

#pdf-link {
    display: block;
    margin: 40px auto 0; /* Increase the top margin to push it down */
    width: 20%; /* Larger width as a percentage of the parent container */
    max-width: 200px; /* Larger maximum size of the PDF icon */
    /* Rest of your styles */
}

#pdf-icon {
    width: 100%; /* Ensures the image scales with the container */
    height: auto; /* Maintains the aspect ratio of the image */
    /* Rest of your styles */
}

#uploading-section {
    text-align: center;
    margin: 20px auto; /* Adjust as needed */
}

#progress-bar-container {
    width: 80%;
    background-color: rgba(52, 35, 0, 1);
    border-radius: 5px;
    margin: 0 auto;
    height: 20px; /* Adjust as needed */
}

#progress-bar {
    height: 100%;
    width: 0%;
    background-color: #a9bfd6;
    border-radius: 5px;
    transition: width 0.5s ease-in-out;
    transition: width 1s ease-out; /* Smooth transition for 1 second */
}

#countdown-timer {
    font-family: 'Questrial', sans-serif;
    color: #a9bfd6; /* Color same as the progress bar */
    margin-top: 10px; /* Adjust as needed */
    font-size: 1.2em;
}

#file-uploading-text {
    font-family: 'Questrial', sans-serif;
    color: #a9bfd6; /* Color same as the progress bar */
    text-align: center;
    margin-bottom: 5px; /* Spacing above the progress bar */
    /* Add more styles as needed */
    font-size: 1.2em;
}

#loading-dots {
    display: inline-block;
    width: 20px; /* Adjust the width as needed */
    text-align: left;
    /* You can add additional styling if needed */
}

.no-star-zone {
    position: relative;
    z-index: 2; /* Higher than the stars */
    /* Define the size and position to cover the area of the elements */
}
.open-album-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #a9bfd6; /* Match your progress bar color */
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-family: 'Questrial', sans-serif;
    gap: 10px; /* Space between icon and text */
    margin-bottom: 20px; /* Adds some space below the button, adjust as needed */
}

.open-album-button svg {
    fill: white; /* SVG color */
}

/* Define the keyframes for the fade-out animation */
@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* Apply the animation to the .animate-cover class */
.animate-cover {
    animation-name: fadeOut;
    animation-duration: 1s; /* Match this duration with the JavaScript timeout */
    animation-fill-mode: forwards; /* Keeps the element in the final state of the animation */
}

#pdf-icon {
    transform: scale(1.5); /* Increase size by 30% */
    transition: transform 0.3s ease; /* Smooth transition for any state changes */
}

@media (max-width: 950px) { /* Adjust this based on your target mobile device widths */
    #main-content {
        margin-top: -12%; /* Shifts content up by 10% of its current margin */
    }
}