body {
    font-family: Arial, sans-serif;
    background-image: url('7895910-the-aftermath-of-the-rise-of-the-internet.jpg');
    background-size: cover; /* Ensures the image covers the entire background */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    background-attachment: fixed; /* Keeps the background fixed during scrolling */
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(20, 185, 225, 0.5); /* Adjust the transparency (0.5 = 50% transparency) */
    z-index: -1; /* Ensures the overlay stays behind all content */
}

#hit-counter {
    position: fixed;
    top: 10px;
    left: 10px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    z-index: 1000;
}


#logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

#logo img {
    height: 80px; /* Adjust the height as needed */
    width: auto; /* Maintain aspect ratio */
}


#logo-text {
    /* position: absolute; */
    
    font-size: 40px;
    font-weight: bold;
    color: rgb(18, 14, 124); /* Adjust the color as needed */
    text-align: center;
}


#logo-subtext {
    /* position: absolute; */
    
    font-size: 30px;
    font-weight: bold;
    color: rgb(94, 84, 84)hite; /* Adjust the color as needed */
    text-align: center;
}

.menu-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgb(94, 84, 84);
    font-size: 12px; /* Set a manageable font size */
    max-width: 1000px; /* Set a maximum width */
    margin: 10px auto; /* Center the menu and add margin */
    padding: 10px 20px; /* Add padding for spacing */
}

.left-menu {
    display: flex;
    gap: 20px;
}

.right-menu {
    margin-left: auto;
}

.menu-content a {
     /*font-size: inherit; /* Inherit the font size from the parent */
    color: white; /* Ensure the text color is visible */
    text-decoration: none; /* Remove underline from links */
}

.collapsible {
    color: black;
    font-size: 12px;
    margin: 0;
}

.collapsible a {
    color: white;
    text-decoration: none;
}

.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    position: absolute; /* Use absolute positioning */
    top: 10px; /* Adjust the top position as needed */
    right: 10px; /* Adjust the right position as needed */
    z-index: 1000; /* Ensure it stays on top of other elements */
}

.hamburger .line {
    width: 25px;
    height: 3px;
    background-color: black;
    margin: 4px 0;
}

.connect-people {
    display: flex;
    justify-content: center;
    align-items: center;

    text-align: center;
    overflow: hidden; /* Ensure the text doesn't overflow */
}

.connect-people h2 {
    display: block;   
}

.new-today-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80%;
    margin: auto;
}

.new-today-heading {
    text-align: center;
    width: 100%;
}

.new-today-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(229, 212, 128);
    border: 1px solid black;
    border-radius: 5px;
    padding: 10px;
    width: 100%; /* Make the width adapt to the screen size */
    max-width: 1200px; /* Optional: Set a maximum width */
    height: auto;
    box-sizing: border-box;
    margin: 0 auto; /* Center the bar horizontally */
    overflow: hidden; /* Hide overflow */
    white-space: nowrap; /* Prevent text from wrapping */
    position: relative; /* Ensure the bar is positioned relative */
}

.scrolling-wrapper {
    display: flex;
    width: max-content;
    animation: scroll 150s linear infinite; /* Adjust duration for speed */
}
.scrolling-content {
    display: inline-block;
    white-space: nowrap;
    padding-right: 5px; /* Space between repeats */
}

@keyframes scroll {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-50%);
    }
}

.container-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    justify-content: center;
    padding: 20px;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}



.pickoftheweek-container h2,
.newsoftheweek-container h2,
.jokesoftheweek-container h2,
.platinum-container h2,
.musicoftheweek-container h2,
.sportsoftheweek-container h2,
.movieoftheweek-container h2,
.prime-container h2 

{
    font-size: 12px; /* Adjust the font size as needed */
    color: #333; /* Dark text color */
    background-color: #f4f4f4; /* Adjust the background color as needed */
    padding: 10px;
    border-radius: 5px;
}

.pwblocks, .pqblocks, .mwblocks, .nwblocks, .jwblocks, .swblocks, .mowblocks {
    display: grid;
    grid-template-columns: repeat(5, 30px);
    gap: 1px;
}

.pqblocks {
    grid-template-rows: repeat(10, 30px);
}

.block {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 10px;
    font-weight: normal;
}

.pwblocks, .nwblocks, .jwblocks {
    background-color: rgb(94, 84, 84);
}

.pqblocks .block {
    background-color: rgb(189, 9, 9);
}

.mwblocks, .swblocks, .mowblocks {
    background-color: rgb(94, 84, 84);
}

.prime-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px auto;
    max-width: 1200px;
}

.qblocks-container {
    display: grid;
    grid-template-columns: repeat(25, 25px); /* Match .qblock width */
    grid-template-rows: repeat(200, 10px);   /* Match .qblock height */
    gap: 1px; /* Same gap for both directions */
}

.qblock {
    width: 25px;
    height: 10px;
    background-color: rgb(39, 35, 158);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 8px;
    font-weight: normal;
}

.block-link {
    color: white;
    text-decoration: none;
}

@media (max-width: 768px) {
    .menu-content {
        display: none;
        flex-direction: column;
        width: 100%;
    }

    .menu-content.show {
        display: flex;
    }

    .hamburger {
        display: flex;
    }
}

.new-menu-heading {
    display: inline-block; /* Reduce the width to fit the content */
    padding: 0; /* Remove padding */
    margin: 0; /* Remove margin */
    font-size: 12px; /* Adjust font size if needed */
    text-align: center; /* Center the text */
}

.new-menu-content {
    display: flex;
    align-items: center;
    gap: 20px;
    background-color: grey;
    font-size: 12px; /* Set a manageable font size */
    max-width: 1000px; /* Set a maximum width */
    margin: 10px auto; /* Center the menu and add margin */
    padding: 10px 20px; /* Add padding for spacing */
}

.new-menu-content a {
    color: white; /* Ensure the text color is visible */
    text-decoration: none; /* Remove underline from links */
}

.new-menu-content a:hover {
    text-decoration: none; /* Add underline on hover */
}