/* 1. General Body Styling */
body {
    /* Path matches your lowercase folder name */
    background-image: url("screenshots/norussian.PNG");
    background-repeat: repeat;
    background-attachment: fixed; /* Keeps background still while scrolling */
    margin: 0;
    padding: 0;
    /* Sufficient padding-top so content isn't hidden by the fixed banner */
    padding-top: 320px;
    cursor: url('screenshots/cursor.png'), auto;
}

/* This forces your cursor to stay even when hovering over links */
a, button {
    cursor: url('screenshots/cursor.png') 0 0, pointer !important;
}

    /* This forces the click image when you actually press down on the link */
    a:active, button:active {
        cursor: url('screenshots/click.png') 0 0, pointer !important;
    }

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: lime;
}

::-webkit-scrollbar-thumb {
    background: lime; /* Change this to your favorite color */
    border: 2px solid #000;
}



/* 2. Banner Section */
.banner {
    width: 100%;
    height: 300px;
    position: absolute; /* Keeps it at the top */
    top: 0;
    left: 0;
    z-index: 1000;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.construction-ribbon {
    background: repeating-linear-gradient( 45deg, #000, #000 10px, #ffff00 10px, #ffff00 20px ); /* This creates the yellow/black caution stripes */
    color: purple;
    font-weight: 900;
    text-align: center;
    padding: 20px;
    border: 5px solid white;
    text-transform: uppercase;
}

    .banner img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Prevents the banner image from stretching */
    }

/* 3. Navigation Section */
nav {
    background-image: url("screenshots/gato.png");
    background-size: cover;
    background-position: center;
    padding: 15px;
    text-align: center;
    border-bottom: 2px solid #9D00FF;
}

    nav a {
        background-color: #800080; /* Purple */
        border-top: 3px solid #df00df; /* Lighter purple highlight */
        border-left: 3px solid #df00df;
        border-bottom: 3px solid #400040; /* Darker purple shadow */
        border-right: 3px solid #400040;
        padding: 5px 10px;
        text-decoration: none;
        color: #00ff00; /* Neon green text */
        font-weight: bold;
    }

        nav a:hover {
            color: #ffffff;
        }

/* 4. Main Section & Content */
main {
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.content {
    background-color: rgba(0, 0, 0, 0.7); /* Dark semi-transparent overlay so text is readable */
    padding: 30px;
    border-radius: 15px;
    max-width: 800px;
    border: 1px solid #9D00FF;
}

h1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    color: #ff0000;
    font-size: clamp(30px, 5vw, 50px); /* Responsive sizing */
    margin: 0 0 20px 0;
    text-shadow: 0 0 5px #ff0000, 0 0 10px #ff0000;
}

h2 {
    color: lime;
    text-shadow: 0 0 5px #ff0000, 0 0 10px #ff0000;
}

p {
    color: #ff0000;
    font-size: 22px;
    line-height: 1.6;
    text-align: center;
    margin: 0;
    text-shadow: 0 0 5px #ff0000, 0 0 10px lime;
}

/* 5. GIFs (Bottom Left Pinned) */
.gif, .gif2 {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 120px; /* Controlled size */
    z-index: 2000;
}

.gif2 {
    left: 150px; /* Offset the second gif so they don't overlap */
}

/* 6. Video Grid */
.video-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    width: 30%;
    margin-top: 40px;
}

video {
    width: 100%;
    border-radius: 10px;
    border: 2px solid #9D00FF;
}



/* 7. Responsive Fixes */
@media (max-width: 768px) {
    body {
        padding-top: 220px; /* Shorter banner on mobile */
    }

    .banner {
        height: 200px;
    }

    .gif, .gif2 {
        width: 80px; /* Smaller GIFs on phones */
    }
}