/* --- Global Resets, Variables, and Body Styling --- */
:root {
    --primary-font: 'Montserrat', sans-serif;
    --text-color: #ffffff;
    --accent-color: yellow;
    --cursor-color: yellow;

    --bg-overlay-color: rgba(0, 0, 139, 0.8); /* 80% Dark Blue */
    --navbar-bg-color: rgba(0, 0, 0, 0.55);
    --frame-bg-color: rgba(0, 0, 0, 0.7);
    --text-bg-color: rgba(0, 0, 0, 0.5);
    --text-shadow-color: rgba(0, 0, 0, 0.5);
    --subtle-text-color: rgba(255, 255, 255, 0.8);
}

/* --- Global Resets and Body Styling --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    height: 100%;
    width: 100%;
}

body {
    font-family: var(--primary-font);
    color: var(--text-color);
    background-color: var(--bg-overlay-color);
    position: relative;
    overflow-x: hidden;
}

body::before {
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -1;
    background: url('https://cdn.pixabay.com/photo/2015/07/27/17/14/mountains-862870_1280.jpg');
    background-size: cover;
    background-position: center;
}

/* --- Header and Transparent Navbar --- */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: var(--navbar-bg-color);
    padding: 1.5rem 5%; /* Added a bit more padding for better spacing */
}

.navbar {
    display: flex;
    justify-content: center; /* Center the logo now that links are gone */
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.logo-link {
    text-decoration: none;
    display: flex;
    align-items: center;
}

.logo-img {
    height: 2.5rem; /* Adjust size to fit navbar */
    margin-right: 0.75rem;
}

.logo-text {
    font-size: 1.5rem; /* Reduced font size */
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--accent-color);
    text-shadow: 0 2px 4px var(--text-shadow-color);
    transition: color 0.4s ease;
}

/* --- Main Content: Full-Screen Image --- */
.content-wrapper {
    height: 100vh; /* Full viewport height */
    width: 100vw;  /* Full viewport width */
    display: flex;
    justify-content: center;
    align-items: center; /* Vertically center the container */
    padding: 1.5rem; /* Add some padding for smaller screens */
}

.image-link {
    display: block;
    width: 100%;
    transition: transform 0.3s ease;
}

.content-wrapper img {
    width: 100%;
    height: auto;
    display: block; /* Removes any extra space below the image */
}

/* --- QR Code Text Styling --- */
.qr-container {
    max-width: 45vh; /* Make the container scale with the viewport height */
    width: 100%;
    text-align: center;
}

.animated-text-frame {
    background-color: var(--frame-bg-color);
    padding: 0.75rem;
    border-radius: 8px;
    margin: 0 auto 1.5rem auto; /* Centered with bottom margin */
    font-size: 1.4rem;
    font-weight: 400;
    white-space: nowrap; /* Ensures text stays on one line for the animation */
    overflow: hidden; /* Hides the text until the animation reveals it */
    border-right: .15em solid var(--cursor-color); /* The typewriter cursor */
    animation: typing 3.5s steps(30, end), blink-caret .75s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: var(--cursor-color); }
}

.qr-id-text {
    margin-top: 1.5rem; /* Space between QR code and text */
    background-color: var(--text-bg-color);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 1.2rem;
    font-weight: 600;
    text-shadow: 0 1px 3px var(--text-shadow-color);
}

.qr-click-instruction {
    margin-top: 1rem;
    font-size: 0.9rem;
    font-style: italic;
    color: var(--subtle-text-color);
}

/* Media query for mobile devices */
@media (max-width: 768px) {
    .qr-container {
        max-width: 90vw; /* Make the QR code fill most of the mobile screen */
    }

    .animated-text-frame {
        font-size: 1.2rem;
    }

    .qr-id-text {
        font-size: 1rem;
    }

    .qr-click-instruction {
        font-size: 0.8rem;
    }
}