/* ==========================================================================
   Global Styles & Body
   ========================================================================== */
   
body {
    font-family: 'Open sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 300; /* Standard weight: Light 300 */
    background-color: #000000;
    color: #FCFCFC;
    margin: 0;
    padding: 20px;
    
    /* --- BACKGROUND IMAGE SETTINGS --- */
    background-color: #000000; 
    background-image: url('images/background_4096x1958.png'); /* Your new BG */
    background-repeat: no-repeat;
    background-size: cover; 
    background-attachment: fixed;
    background-position: center center;
}

h1 {
    color: #FF79C6; /* Color for h1 */
    font-weight: 400;
	font-size: 80px;
    text-align: center;
    margin-bottom: 60px;
	/* POSITIONING */
    position: relative;
    top: -50px; /* Shifts the title 50px upwards */
}

/* ==========================================================================
   LANDING PAGE CONTENT & BUTTONS
   ========================================================================== */
   
/* Main container that keeps the buttons centered */
.landing-main-content {
    display: flex;
    justify-content: center; /* Horizontal centering */
    align-items: center; /* Vertical centering */
    min-height: 43.9vh; /* Takes up XX% of the viewport height */
}

/* Container for the Buttons (The invisible holder) */
.navigation-buttons-container {
    display: flex;
    flex-direction: row; /* Buttons placed horizontally */ 
    gap: 25px; /* Spacing between the buttons */
    padding: 40px;
    
    /* KEY: Makes the box invisible, retaining layout */
    background-color: transparent; 
    border-radius: 12px;
    border-top: none; 
    box-shadow: none; 
}

/* Buttons (The visible elements - now glass-like) */
.landing-button {
    /* IMPORTANT: Set display: block for width/height */
    display: block; 
	font-size:20px;
    text-decoration: none; /* Removes the underline */
    text-align: center;
    color: #FCFCFC;
    font-weight: 300;

    /* Styling for the buttons - Uses glass color from former container */
    background-color: rgba(31, 32, 65, 0.45); 
    
    /* Visible Neon Border */
    border: 1px solid #FF79C6; 
    border-radius: 5px;
    padding: 12px 30px; 
    cursor: pointer;
    min-width: 220px; 
    transition: background-color 0.2s, box-shadow 0.2s;
}

.landing-button:hover {
    background-color: rgba(31, 32, 65, 0.65); /* Slightly less transparent on hover */
    box-shadow: 0 0 8px #FF79C6; /* Neon glow on hover */
}

/* --------------------------------------------------
   Scrollbar Styling (Standard Width)
   -------------------------------------------------- */
   
/* 1. W3C Standard (for Firefox) */
html {
  scrollbar-color: #FF79C6 #000000; /* 1. Color = Thumb, 2. Color = Track */
  /* scrollbar-width: thin; <- 'width' is not set, so it uses browser default. Uncomment if you want it thin. */
}

/* 2. WebKit Standard (for Chrome, Edge, Safari) */
/* (Standard width is approx. 12px-17px, 'thin' is approx. 8px-10px) */
::-webkit-scrollbar {
  /* width: 10px; <- 'width' is commented out to use browser default. Uncomment to make scrollbar thin. */
}

::-webkit-scrollbar-track {
  background: #000000; /* Track background (matches body bg) */
}

::-webkit-scrollbar-thumb {
  background-color: #FF79C6; /* Thumb color */
  border-radius: 5px;
  border: 2px solid #000000;
  /* Border in background color (cool effect) */
}

::-webkit-scrollbar-thumb:hover {
  background-color: #ffbde1; /* Lighter color on hover */
}

/* ==========================================================================
   FINAL COPYRIGHT FOOTER (Floating Glass)
   ========================================================================== */
.copyright-footer {
/* POSITIONING & BOX STYLES (Applies to the outer rectangle) */
    position: fixed; 
    bottom: 20px; 
    left: 50%; 
    transform: translateX(-50%); 
    width: 390px;
    
/* NEW AESTHETIC: Calm, floating panel */
    background-color: rgba(31, 32, 65, 0.2); 
    border: none; 
    border-radius: 10px;
    box-shadow: 0 0 8px rgba(255, 121, 198, 0.2); 
    color:#AAAAAA; /* Remember: readability options: #646464, before that FCFCFC */
    text-align: center;
    
    /* KEY CHANGE: Spacing between text and border */
    padding: 1px 20px; /* Reduces vertical spacing to 1px, keeps 20px horizontal */
    
    font-size: 0.99em;
    z-index: 1000;
}

/* -------------------------------------------------- */
/* INNER RULE (Reset for the text) */
.copyright-footer p {
    /* Sets the text to minimal line height so it hugs the 1px padding */
    margin: 0;
    line-height: 1; 
    padding: 0;
}
	
/* ==========================================================================
   RESPONSIVE DESIGN (Mobile Optimization)
   ========================================================================== */
@media (max-width: 900px) {
    
    /* 1. Make title smaller and reduce spacing */
    h1 {
        font-size: 50px; /* Smaller than 80px */
        top: 0; /* Relax positioning */
        margin-bottom: 30px;
    }

    /* 2. Stack buttons vertically (IMPORTANT!) */
    .navigation-buttons-container {
        flex-direction: column; /* Stack (Column) instead of row */
        gap: 15px; /* Slightly less spacing */
        padding: 20px;
    }

    /* 3. Pull buttons to full width */
    .landing-button {
        width: 100%; 
        min-width: auto; /* Ignore old minimum width */
    }

    /* 4. Adjust footer (so it is not cut off) */
    .copyright-footer {
        width: 90%; /* Adapts to phone width */
        font-size: 0.8em; /* Text slightly smaller */
    }
}