html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    background: url('nicebg.jpg') no-repeat center center fixed;
    background-size: cover; /* Resizes image without stretching */
    font-size: 150%;
    color: white; /* Keeps text readable */
}

.container { 
    max-width: 60%; /* or any other value that suits your design */
    margin: auto;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px; /* Adds some padding inside the container */
    width: 100%; /* Ensures it takes up all available space up to the max-width */
    box-sizing: border-box; /* Includes padding in the width calculation */
    color: white; /* Sets the text color to white */  

    background: rgba(0, 0, 0, 0.75); /* 50% opaque black background */
}

.topnav {
    background-color: #4e4e4e; /* Dark background for the navbar */
    overflow: hidden; /* Clears floats */
    display: flex; /* Enables flexbox layout */
    justify-content: center; /* Centers content horizontally */
    align-items: center; /* Aligns items vertically in the center */
    height: 50px; /* Set the height of the navbar */
}

.topnav a {
    color: rgb(255, 255, 255); /* White text color */
    padding: 14px 16px; /* Padding around the text */
    text-decoration: none; /* Removes underline from links */
    display: inline-block; /* Displays the links inline */
}

.topnav a:hover {
    background-color: #ffd119; /* Lighter grey background when hovered */
}

.topnav a.active {
    background-color: #ff0000; /* Red background for the active link */
}

.topnav-centered {
    display: flex; /* Uses flexbox to align the links */
    justify-content: center; /* Centers the links horizontally */
    align-items: center; /* Centers the links vertically */
}

.server-link {
    color: red;  /* Sets the color of the link text to blue */
    text-decoration: none; /* Optional: removes the underline typically associated with links */
}

/* Styles for the message box wall */
.date-info {
    font-size: 0.9em;
    color: #888; /* Lighter gray color */
    text-align: center;
    margin-bottom: 20px; /* Adds space before the message wall */
}

#messagesWall {
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
}

.messageBox {
    background-color: rgba(0, 0, 0, 0.3); /* Light gray background */
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add subtle shadow for depth */
    transition: background-color 0.3s ease-in-out; /* Smooth transition for hover effect */
}

.messageBox:hover {
    background-color: rgba(0, 0, 0, 0.6); /* Slightly darker background on hover */
}

/* Style for the name and date */
.name {
    font-weight: bold;
    font-size: 1.2em;
}

.date {
    font-size: 0.9em;
    color: #555;
}

/* Style for the message */
.message {
    margin-top: 10px;
    font-size: 1em;
    color: #ffffff;
}

/* Style for the reply */
.reply {
    margin-top: 10px;
    font-style: italic;
    font-size: 0.95em;
    color: #c4c4c4;
}

/* Styles for the social media tab */
#socialTab {
    position: fixed; /* Fixes the tab to the screen */
    bottom: 20px; /* Position it 20px from the bottom */
    right: 20px; /* Position it 20px from the right */
    background-color: #fff; /* White background for the tab */
    border-radius: 50%; /* Makes the icon circular */
    padding: 10px; /* Adds space around the icon */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Adds a subtle shadow */
    transition: background-color 0.3s ease; /* Smooth transition on hover */
    z-index: 1000; /* Ensures the tab is on top of other content */
}

#socialTab img {
    width: 40px; /* Sets the size of the Instagram icon */
    height: 40px; /* Sets the size of the Instagram icon */
    display: block; /* Ensures image is displayed as a block */
}


#socialTab:hover {
    background-color: #f1f1f1; /* Changes background color on hover */
}

/* Styles for the social media tab */
#socialTab2 {
    position: fixed; /* Fixes the tab to the screen */
    bottom: 20px; /* Position it 20px from the bottom */
    right: 100px; /* Position it 120px from the right */
    background-color: #fff; /* White background for the tab */
    border-radius: 50%; /* Makes the icon circular */
    padding: 10px; /* Adds space around the icon */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Adds a subtle shadow */
    transition: background-color 0.3s ease; /* Smooth transition on hover */
    z-index: 1000; /* Ensures the tab is on top of other content */
}


#socialTab2 img {
    width: 40px; /* Sets the size of the Discord icon */
    height: 40px; /* Sets the size of the Discord icon */
    display: block; /* Ensures image is displayed as a block */
}

#socialTab2:hover {
    background-color: #f1f1f1; /* Changes background color on hover */
}