@charset "utf-8";

/* Apply full height to HTML and BODY */
html, body {
    margin: 0;
    padding: 0;
    height: 100%; /* Full viewport height */
    font-family: Arial, sans-serif;
}

/* Background Image */
body {
    background-image: url('background.png'); /* Replace with your image file */
    background-size: cover; /* Ensures the image covers the whole screen */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents tiling */
    background-attachment: fixed; /* Keeps background fixed when scrolling */
    color: white; /* Makes text readable */
    text-align: center;
    display: flex;
    flex-direction: column; /* Ensures logo and button are stacked */
    align-items: center; /* Centers content horizontally */
    justify-content: center; /* Centers button vertically */
    height: 100vh; /* Full viewport height */
    position: relative; /* Ensures positioning works */
}

/* Logo Styling (Horizontally Centered at the Top) */
.logo {
    max-width: 50%; /* Adjusts the logo size */
    height: auto; /* Maintains aspect ratio */
    position: absolute;
    top: 20px; /* Positions logo near the top */
    left: 50%;
    transform: translateX(-50%); /* Centers logo horizontally */
}

/* Centered Button */
.button {
    background-color: black !important;
    padding: 15px 30px !important;
    font-size: 18px !important;
    border-radius: 10px !important;
    color: #80ffdd !important;
    border: 3px solid #80ffdd !important;
    box-shadow: 0 0 10px yellow !important; /* Adds a glow effect */
}

/* Responsive adjustments for smaller screens */
@media screen and (max-width: 768px) { 
    .logo {
        max-width: 70%; /* Smaller logo on mobile */
        top: 10px; /* Adjusts logo spacing */
    }
}

@media screen and (min-width: 1024px) { 
    .logo {
        max-width: 40%; /* Adjust size for large screens */
    }
}