/* General body styling */
body {
    background-image: url("/img/back.png");
    background-size: 300px 300px; /* Keep the background size fixed */
    background-repeat: repeat; /* Repeat the image horizontally and vertically */
    background-position: top left; /* Set the starting position of the background */
}

/* Header styling - Fixed size */
header {
    position: static;
    right: 0;
    width: 100%;
    height: 120px; /* Set a fixed header height */
    margin-bottom: auto;
    text-align: center;
    background-image: url(/img/grunge-banner-3-4.png);
    background-size: contain; /* Ensure the background image fits within the header */
    background-position: center; /* Center the background image */
    background-repeat: no-repeat; /* Prevent the background from repeating */
    color: #ffffff;
}

/* Main content styling */
main {
    margin-top: 80px;
    margin-bottom: 60px;
    height: auto;
    margin-left: 6%;
    margin-right: 6%;
    background-color: #333333ea;
    color: #ffffff;
}

/* Footer styling */
footer {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;   
    background-color: #333;
}

footer ul {
    display: flex;
    justify-content: center;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

footer a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* Top menu */
.top-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;   
}

.top-menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

#left {
    float: left;
}

#right {
    float: right;
}

.top-menu a {
    display: block;
    color: white;
    text-align: left;
    padding: 14px 16px;
    text-decoration: none;
}

.active {
    background-color: #aa049f;
}

.top-menu a:hover:not(.active) {
    background-color: #aa049fe8;
}

/* Menu hidden on small screens */
.top-menu #myLinks {
    display: none;
}

/* Bmenu visibility */
.bmenu {
    overflow: hidden;
    background-color: #a2529de8;
    position: fixed;
    width: 100%;
}

/* Padding */
.pading {
    padding-left: 2px;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-right: 2px;
}

/* Flex container styling */
.flex-container {
    display: flex;
    justify-content: center; /* Center items horizontally */
    flex-wrap: wrap; /* Allow wrapping */
    gap: 10px; /* Add some space between items */
    padding: 20px;
}

/* Fixed-width article container */
.articlee {
    width: 320px; /* Fixed width for the containers */
    background-color: #334;
    font-size: 30px;
    text-align: center; /* Center content inside the article */
    box-sizing: border-box; /* Include padding and border in width */
}

/* Styling for the image container */
#imgg {
    margin: 10px;
    width: auto;
    display: flex; /* Enable flexbox for centering */
    justify-content: center; /* Center the image horizontally */
    border: 5px solid white; /* Add white frame around the image */
    box-sizing: border-box; /* Include padding and border in element’s total width/height */
}

/* Styling for the actual image */
#imgg img {
    max-width: 100%; /* Ensure image resizes to fit within its container */
    height: auto;
}

/* Text styling for the article */
.articlee-text {
    font-size: 16px;
}

.flex-container a {
    color: white; /* Inherit the color of the surrounding text */
    text-decoration: none; /* Remove the underline */
}
.articlee:hover {
    background-color: #aa049fe8;
}

/* Article full content container */
.article_full { 
    padding-left: 4%;
    padding-right: 4%;
    padding-bottom: 4%;
    font-size: 22px;
}
.article_full a{
    color: rgb(137, 137, 255);
}
/* Styling for code blocks */
#code {
    background-color: rgba(0, 0, 0, 0.8); /* Black background with 80% opacity */
    color: #00FF00; /* IBM green terminal color */
    padding: 5px;
    border-radius: 4px;
    font-family: "Courier New", Courier, monospace; /* Monospace font for terminal style */
    font-size: 90%; /* Adjust size for readability */
    display: inline-block; /* Ensure code block is contained within the element */
}
/* Wrapper for the article content and image */
.article_wrapper {
    display: flex;
    flex-direction: row; /* Side by side for larger screens */
    justify-content: space-between;
    align-items: flex-start; /* Align items to the top */
    gap: 5px; /* Spacing between image and content */
}

/* Styling for the image container */
.article_image {
    flex: 1; /* Image container takes 1/3 of the available space */
    display: flex; /* Enable flexbox */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically (if needed) */
}

/* Styling for the article content */
.article_content {
    flex: 2; /* Content container takes 2/3 of the available space */
}

.article_image img {
    margin: 10px;
    max-width: 100%; /* Ensure the image is responsive */
    height: auto; /* Maintain aspect ratio */
    border: 5px solid white; /* Add white frame around the image */
    box-sizing: border-box; /* Include padding and border in element’s total width/height */
   
}
/* Media query for smaller screens */
@media (max-width: 1024px) {
    /* Ensure header remains fixed in size */
    header {
        height: 80px; /* Keep the header height fixed on smaller screens */
        background-size: contain; /* Ensure background scales correctly */
    }

    /* Adjust flex containers to stack vertically if necessary */
    .flex-container {
        flex-wrap: wrap; /* Keep wrapping for smaller screens */
        justify-content: center; /* Center items on smaller screens */
    }

    .row {
        flex-wrap: wrap; /* Keep wrapping for smaller screens */
    }

    /* Adjust image size */
    #imgg img {
        width: 100%; /* Make sure the image is responsive */
        height: auto;
    }

    /* Adjust the main container margins */
    main {
        margin-left: 5%;
        margin-right: 5%;
        padding: 10px;
    }

    /* Keep containers fixed width */
    .articlee {
        width: 340px; /* Fixed width for the containers on smaller screens as well */
    }

    /* Adjust top menu to stack vertically */
    .top-menu ul {
        flex-direction: column;
    }

    /* Ensure footer elements stack properly */
    footer ul {
        flex-direction: column;
    }
    .article_wrapper {
        flex-direction: column; /* Stack image and content vertically */
        align-items: center; /* Center the content */
    }

    .article_image, .article_content {
        width: 100%; /* Make both containers full width */
        text-align: center; /* Center text and image */
    }

    .article_content h1 {
        margin-top: 20px; /* Add some spacing between image and title */
    }
}

@media (max-width: 768px) {
    /* Ensure containers wrap to next line when screen is smaller */
    .flex-container {
        justify-content: center; /* Center items on smaller screens */
    }
}