/* banner.css */

/* Define the custom font using the .ttf font file */
@font-face {
    font-family: 'Inf2';
    src: url('../font/inf2.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Apply the custom font globally */
body {
    font-family: 'Inf2', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
}

/* Set the banner width and height to be exactly 468x110px */
.banner {
    width: 468px;  /* Exact width */
    height: 110px;  /* Exact height */
    background-image: url('../images/banner.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fffabd;
    border: 1px solid #ddd;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
    padding: 0 10px;
    overflow: hidden;  /* Ensure children stay within the banner bounds */
}

/* Styling for the server name */
.server-name {
    font-size: 1.8rem;  /* Slightly increased font size for better visibility */
    font-weight: bold;
    color: #fffabd;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);  /* Modern shadow for visibility */
    text-align: center;
    width: 100%;
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    letter-spacing: 1px;  /* Slight letter-spacing for modern look */
    word-wrap: break-word; /* Ensure long words break */
    padding: 3px;  /* Slight padding for better readability */
    transition: transform 0.3s ease, color 0.3s ease, text-shadow 0.3s ease;  /* Animation for name */
}

.server-name:hover {
    transform: translateX(-50%) translateY(-5px);  /* Subtle animation on hover (lifts up) */
    color: #ffcc00;  /* Change text color on hover */
    text-shadow: 2px 2px 12px rgba(0, 0, 0, 0.8);  /* Stronger shadow on hover */
	cursor: default;  /* Keep cursor as default (not hand) */
}

/* Styling for the server description */
.server-description {
    font-size: 1.3rem;  /* Adjusted font size to be slightly larger */
    color: #fffabd;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);  /* Modern shadow */
    text-align: center;
    width: 100%;
    position: absolute;
    top: 40px;  /* Reduced space to bring description closer to the name */
    left: 50%;
    transform: translateX(-50%);
    letter-spacing: 0.5px;  /* Adds spacing for readability */
    word-wrap: break-word;  /* Ensure text wraps well on small screens */
    padding: 2px;  /* Slight padding for better text presentation */
    transition: transform 0.3s ease, color 0.3s ease, text-shadow 0.3s ease;  /* Animation for description */
}

.server-description:hover {
    transform: translateX(-50%) translateY(5px);  /* Moves description down on hover */
    color: #ffcc00;  /* Change text color on hover */
    text-shadow: 2px 2px 12px rgba(0, 0, 0, 0.8);  /* Stronger shadow on hover */
	cursor: default;  /* Keep cursor as default (not hand) */
}

/* Right container styling - horizontal layout */
.right-container {
    position: absolute;
    right: 75px;  /* Adjust the right position to fit */
    bottom: 5px;  /* Position container at the bottom */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    text-align: center;
    padding: 5px 10px;
    background: rgba(0, 0, 0, 0.5);  /* Slight background to separate from banner */
    border-radius: 10px;  /* Rounded corners */
    transition: all 0.3s ease;  /* Smooth transition for hover effects */
}

/* Styling for votes and hits (side by side) */
.votes, .hits {
    font-size: 1.2rem;
    font-weight: bold;
    color: #fffabd;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8);
    padding: 8px 20px;
    border-radius: 10px;
    display: inline-block;
    transition: all 0.3s ease;  /* Smooth transition for hover effects */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);  /* Subtle shadow */
	background-size: cover; /* Ensure image fits within the button */
    background-position: center; /* Center the image */
}

/* Default state - red buttons */
.votes {
    background-image: url('../images/red.gif'); /* Default red image for votes */
}

/* Hover effect - grey buttons */
.votes:hover {
	filter: brightness(1.1);  /* Optional effect to brighten the button on hover */
    transform: translateY(-5px);  /* Slight lift effect on hover */
    box-shadow: 0 5px 10px rgba(255, 0, 0, 0.5);  /* Stronger shadow for glow */
    background-image: url('../images/grey.gif');  /* Grey image for hover state */
	cursor: pointer;  /* Change cursor to "hand" icon */
}

/* Default state - red buttons */
.hits {
    background-image: url('../images/red.gif'); /* Default red image for hits */
}

/* Hover effect - grey buttons */
.hits:hover {
	filter: brightness(1.1);  /* Optional effect to brighten the button on hover */
    transform: translateY(-5px);  /* Slight lift effect on hover */
    box-shadow: 0 5px 10px rgba(255, 0, 0, 0.5);  /* Stronger shadow for glow */
    background-image: url('../images/grey.gif');  /* Grey image for hover state */
	cursor: pointer;  /* Change cursor to "hand" icon */
}

/* Responsive Design */
@media screen and (max-width: 768px) {
    .banner {
        width: 468px;  /* Fix the banner width for mobile */
        height: 110px;  /* Fix the banner height for mobile */
        padding: 0 5%;
    }

    .server-name {
        font-size: 1.4rem;  /* Slightly smaller font for medium screens */
        padding: 4px;  /* Adjust padding for smaller screens */
    }

    .server-description {
        font-size: 1.2rem;  /* Smaller font for description */
        padding: 2px;  /* Adjust padding for mobile */
    }

    .right-container {
        bottom: 10px;  /* Adjust position for right container */
        gap: 10px;  /* Reduce space between votes and hits */
    }

    .votes, .hits {
        font-size: 1rem;  /* Smaller text size for mobile */
        padding: 6px 14px;  /* Adjust padding for mobile */
    }
}

@media screen and (max-width: 480px) {
    .server-name {
        font-size: 1.2rem;  /* Even smaller font for smaller screens */
        padding: 3px;  /* Adjust padding for smaller screens */
    }

    .server-description {
        font-size: 1rem;  /* Smaller description font size */
        padding: 1px;  /* Adjust padding for mobile */
    }

    .right-container {
        bottom: 10px;  /* Adjust position on smaller screens */
    }

    .votes, .hits {
        font-size: 0.9rem;  /* Even smaller text size */
        padding: 5px 10px;  /* Adjust padding */
    }
}