/* Make the logo the full background of the page */
body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url('logo.png') no-repeat center center fixed;
    background-size: cover;
    font-family: 'Oswald', sans-serif;
    color: #f2f2f2;
    text-align: center;
}

/* Add a subtle overlay to make text stand out against the background */
.overlay {
    background-color: rgba(0, 0, 0, 0.7);
    padding: 40px; /* Reduce padding for better fit on mobile */
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.7);
    text-align: center;
    max-width: 95%; /* Adjust max width for smaller screens */
    margin: 0 auto; /* Center content on mobile */
}

/* Glitch animation remains unchanged */
@keyframes glitch {
    0% {
        text-shadow: 2px 2px #8b0000, -2px -2px #4b4b4b; /* Deep crimson and dark gray */
    }
    25% {
        text-shadow: 2px 0px #8b0000, -2px 0px #4b4b4b;
    }
    50% {
        text-shadow: -2px 2px #8b0000, 2px -2px #4b4b4b;
    }
    75% {
        text-shadow: -2px -2px #8b0000, 2px 2px #4b4b4b;
    }
    100% {
        text-shadow: 2px 2px #8b0000, -2px -2px #4b4b4b;
    }
}

/* Updated styling for h1 with glitch effect */
h1 {
    font-family: 'Arial', 'Helvetica', sans-serif; /* Modern web-safe fonts */
    font-size: 2.5rem; /* Large and bold for attention */
    letter-spacing: 0.05em; /* Slight letter spacing for modernity */
    text-transform: uppercase; /* Keep the bold, authoritative look */
    color: #fff; /* White color for contrast */
    position: relative;
    animation: glitch 1s infinite; /* Keep the glitch effect */
    margin: 0;
}

/* Styling for subheading (h4) */
h4 {
    font-family: 'Arial', 'Helvetica', sans-serif; /* Modern web-safe fonts */
    font-size: 1.2rem; /* Smaller size for subheadings */
    font-weight: normal; /* Normal weight for cleaner look */
    color: #cccccc; /* Slightly lighter color than h1 */
    margin-top: 10px;
    margin-bottom: 10px;
    text-transform: uppercase; /* Maintain consistency with uppercase styling */
}

/* Updated styling for p with a modern, clean font */
p {
    font-family: 'Arial', 'Helvetica', sans-serif; /* Modern web-safe fonts */
    font-size: 1rem; /* Slightly smaller for cleaner look */
    color: #dddddd; /* Softer gray for modern aesthetic */
    line-height: 1.6; /* Better line spacing for readability */
    margin: 10px 0;
}

/* Links section */
.links {
    margin-top: 10px;
}

/* Styling for the buttons with a raw, vintage font */
.button {
    display: inline-block;
    margin: 10px 5px;
    padding: 10px 20px;
    text-transform: uppercase;
    font-size: 1rem; /* Slightly larger font size for better visibility */
    font-family: 'Arial', 'Helvetica', sans-serif; /* Modern web-safe fonts */
    font-weight: bold;
    color: #fff;
    background-color: rgba(255, 255, 255, 0.2); /* Subtle background for a raw look */
    border: 2px solid #fff;
    border-radius: 1px;
    text-decoration: none;
    letter-spacing: 0.05em;
    transition: background-color 0.3s ease, transform 0.3s ease;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

/* Button hover effect */
.button:hover {
    background-color: rgba(255, 255, 255, 0.4);
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

/* Styling for the small picture at the top */
.small-picture {
    display: block;
    margin: 0 auto 20px auto;  /* Centered horizontally with margin on top and bottom */
    width: 150px;  /* Adjust size as needed */
    height: auto;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.8);  /* Add a shadow to enhance the dark, gritty feel */
}

/* Docs section styling with a thin frame, initially hidden */
#docs-section {
    max-height: 0;
    overflow: hidden; /* Hide content during collapse/expand */
    transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition for height and opacity */
    opacity: 0; /* Initially hidden with opacity */
    margin-top: 10px;
    padding: 0; /* No padding initially */
    border: 1px solid rgba(255, 255, 255, 0); /* Initially no border */
    border-radius: 1px;
    box-shadow: none; /* No shadow initially */
    width: 60%; /* Adjust the width to not span the full page */
    max-width: 500px; /* Max width to limit on larger screens */
    margin-left: auto;
    margin-right: auto;
    position: relative;
    display: block;
}

/* Docs section styling with a thin frame, initially hidden */
#docs-section {
    max-height: 0;
    overflow: hidden; /* Hide content during collapse/expand */
    transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition for height, padding, and opacity */
    opacity: 0; /* Initially hidden */
    margin-top: 20px;
    padding: 0; /* No padding initially */
    border: 1px solid transparent; /* Invisible border initially */
    border-radius: 1px;
    box-shadow: none; /* No shadow initially */
    width: 60%; /* Adjust the width to not span the full page */
    max-width: 500px; /* Max width to limit on larger screens */
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

/* Visible state when the section is opened */
#docs-section.open {
    max-height: 500px; /* Allow it to expand */
    padding: 15px; /* Add padding when the section opens */
    opacity: 1; /* Make it visible */
    border: 1px solid rgba(255, 255, 255, 0.4); /* Show the thin border */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.4); /* Add shadow when open */
}

/* Styling for doc links */
.doc-link {
    display: block;
    margin: 10px auto;
    padding: 8px 0;
    font-size: 1rem;
    font-family: 'Oswald', sans-serif;
    color: #e0e0e0;
    text-decoration: none;
    letter-spacing: 0.03em;
    transition: color 0.3s ease, transform 0.3s ease;
    position: relative;
}

/* Hover effect for doc links */
.doc-link:hover {
    color: #ffffff;
    transform: translateY(-2px);
}

/* Grainy texture for a raw look */
.doc-link::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('grainy_texture.png');
    opacity: 0.1;
    pointer-events: none;
    z-index: -1;
}

/* Responsive for smaller screens */
@media (max-width: 768px) {
    .overlay {
        padding: 10px; /* Adjust padding for small screens */
    }
    
    h1 {
        font-size: 2rem; /* Further reduce font size on small screens */
    }

    h4 {
        font-size: 1rem;
    }

    p {
        font-size: 0.9rem;
    }

    .button {
        padding: 8px 16px; /* Make buttons smaller on mobile */
        font-size: 0.9rem;
    }
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 12px; /* Width of the scrollbar */
}

/* Scrollbar track (background) */
::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.8); /* Dark background for the track */
    border-radius: 10px;
}

/* Scrollbar thumb (the draggable part) */
::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.8); /* Dark crimson thumb to match glitch color */
    border-radius: 10px;
    border: 2px solid #4b4b4b; /* Add a border to make it stand out */
}

/* Scrollbar thumb on hover */
::-webkit-scrollbar-thumb:hover {
    background: rgb(24, 22, 22); /* Slightly brighter on hover */
}

/* Firefox scrollbar support */
html {
    scrollbar-width: thin; /* Make the scrollbar thin */
    scrollbar-color: rgba(0, 0, 0, 0.8) rgba(0, 0, 0, 0.8); /* Thumb and track colors */
}