@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');


body {
    font-family: "IBM Plex Mono", sans-serif;
    background-image: url("images/home/brownBacking.png");
    cursor: url('images/home/SwordMouse.png'), auto; 
}

h1 {
    text-align: center;
    color: #ffffff;
    margin-top: 40px;
    border: 3px solid #000000;
    background-color: #000000;
}

.sidebar {
    width: 25vh;
    height: 35%; 
    margin-left: 3%;   
    margin-top: 1vh;
    background-color: #fff;
    border: 3px solid black;
    position: -webkit-sticky;
    position: sticky;
    top: 50px;
    background-image: url("images/home/SC047.JPG");
    z-index: 1;
    float: left;
}

.main-content {
    width: 75%;
    background-color: rgba(46, 73, 47, 0.9);
    margin-right: 6%;
    float: right;
    border: 3px solid rgb(3, 48, 17);
}

.PageBanner {
    padding: 0px;
    margin-bottom: 1%;
    background-image: url("images/home/Space.gif");
    border: 1px solid #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding-top: 4vh;
    padding-bottom: 2vh;
}

.wrapper{
    display: inline-block; 
    margin: auto;
    width: 100%;
    padding: 0px;
}

.textdump {
    margin-top: 0px;
    margin-bottom: 15px;
    margin-left: auto;
    margin-right: auto;

    width: 90%; 
    border: 3px solid #002ed2; 
    border-radius: 0px; 
    color: #ffffff; 
    text-align: center;
    position: relative;
    font-family: 'IBM Plex Mono', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: large;
    background-image: url("images/home/water_texture.JPG");
    background-size: cover; 
    background-position: center;
    background-color: rgba(47, 46, 83, 0.538); /* Black color with 50% opacity */
    background-blend-mode: overlay;
}

.textdump img {
    max-width: 99%; 
    height: auto; 
    display: block; 
    margin: 0 auto;
    object-fit: contain;
}

.pixel_divs {
        padding-bottom: 20px;
        padding-top: 20px;
}


.stackImage {
        z-index: 1;
        margin: -10px;
        margin-left: -35px; 
        width: 8vh;
}

/**IMAGES WITHIN BANNER**/
/**Welcome**/
.stackImagehead {
    height: 15vh;
    position: absolute;
    top: -19%; /* Adjust based on the desired position */
    left: 17%; /* Adjust based on the desired position */
    z-index: 2; /* Ensure it's above the CenterTitleImage */
}
/**Title Gif**/
.CenterTitleImage {
    z-index: 1;
    height: 15vh;
}
/**Comp. Gif Decor**/
.bannergifdecor {
    height: 16vh;
    position: absolute;
    bottom: 10%; /* Adjust based on the desired position */
    right: 5%; /* Adjust based on the desired position */
    z-index: 0; /* Ensure it's below the CenterTitleImage */
}

.overlay {
    position: absolute; /* or fixed */
    z-index: 1000; /* Ensure it is on top */
    pointer-events: none; /* Makes sure the image doesn't interfere with underlying content */
}


.textdump-container {
    display: flex; /* Enables side-by-side layout */
    justify-content: space-between; /* Adds space between the boxes */
    gap: 20px; /* Optional: space between the two boxes */
    margin: 0 auto; /* Center the container */
    max-width: 90%; /* Optional: limit container width */
}

.textdump2 {
    margin-top: 35px;
    margin-bottom: 15px;
    margin-left: 0; /* Reset to align properly */
    margin-right: 0; /* Reset to align properly */
    flex: 1; /* Ensures both boxes take up equal width */
    max-width: 45%; /* Prevents boxes from growing too large */
    border-width: 10px;
    border-style: solid;
}

#navbox{
    margin-top: 35px;
    margin-bottom: 15px;
    margin-left: 0; /* Reset to align properly */
    margin-right: 0; /* Reset to align properly */
    background-color: rgba(173, 216, 230, 0.8);
    flex: 1; /* Ensures both boxes take up equal width */
    max-width: 45%; /* Prevents boxes from growing too large */
    border-width: 10px;
    border-style: solid;
    border-image: linear-gradient(to right, darkblue, rgb(69, 203, 210)) 1;
}

#updatebox{
    margin:25px;
    height:30vh;
    background:#efefef;
    border: solid black;
    border-color: black;
    float:left; 
    line-height:1em;overflow:scroll;padding:0px;
    

    padding-left: 5px;  
    padding-right: 5px;
}


.image-link {
    display: block; /* Ensure each link is a block element */
    margin: 10px; /* Add some space between links */
}

.image-link img {
    width: 130px; /* Adjust the size as needed */
    transition: transform 0.3s ease, opacity 0.3s ease;
}
    
.image-link img:hover {
    transform: scale(1.1); /* Slightly enlarges the image */
}

.links {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping if needed */
    gap: 10px; /* Adjust spacing between links */

}

.ads {
    margin-top: 0;
}

.neoLink {
    position: absolute; 
    z-index: 1000; 
}

.BenImage{
    width: 90%;
    height: inherit;
    border: 3px solid black;
    border-radius: 0px;
    box-shadow: 0px 9px 30px rgba(29, 245, 105, 0.337);
}

.textdump2 h2 {
    color: #444444;
    font-size: 30px;
    text-shadow: -1px -1px 1px #000, 1px 1px 1px #ccc;
}
.textdump2 p {
    background: #CCCCCC;
    text-shadow: 0 1px 0 #FFFFFF;
}