body {
    font-family:  Helvetica, sans-serif;
    background-color: #302f2f00;
    margin: 0;
    padding: 20px;
    background-image: url('images/background.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    min-height: 100vh;
    position: relative;
    z-index: 0;
}


.title-box {
    background-image: url('images/back2.jpg');
    background-size: cover;
    background-position: center;
    padding: 20px;
    border: 3px solid rgb(0, 0, 0); /* Slightly opaque red border */
    border-radius: 10px;
    display: inline-block; /* Only wrap around the title text */
    margin: 0 auto 0px ;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Adds a subtle shadow for emphasis */
}

.subtitle-box {
    background-image: url('images/background3.jpg');
    background-size: cover;
    background-position: center;
    padding: 20px;
    border: 3px solid rgb(0, 0, 0); /* Slightly opaque red border */
    border-radius: 10px;
    display: inline-block; /* Only wrap around the title text */
    margin: 0 auto 0px ;
    text-align: center;
    box-shadow: 0 4px 8px rgb(0, 0, 0); /* Adds a subtle shadow for emphasis */
}

.title-box h1 {
    margin: 0;
    font-size: 3.5em;
    color: #ffffff;
    text-shadow: 3px 3px 4px rgb(0, 0, 0); /* Optional text shadow for better readability */
}

.subtitle-box h1 {
    margin: 0;
    font-size: 3.5em;
    color: #ffffff;
    text-shadow: 3px 3px 4px rgb(0, 0, 0); /* Optional text shadow for better readability */
}


.discord-box {
    background-color: rgba(99, 20, 20, 0.705); /* Red background with 40% opacity */
    padding: 100px;
    border: 3px solid rgba(0, 0, 0, 0.7); /* Slightly opaque black border */
    border-radius: 10px;
    display: inline-block; /* Only wraps around the link text */
    margin: 0 auto 20px ; /* Centers the box horizontally */
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Adds a subtle shadow for emphasis */
}

/* Link styling inside the discord-box */
.discord-box h3 {
    margin: 0;
    font-size: 3.5em; /* Adjust font size as needed */
}

.discord-box a {
    color: #ffffff; /* White color for the link */
    text-decoration: underline; /* Remove underline */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); /* Optional text shadow */
}

.discord-box a:hover {
    text-decoration: underline; /* Optional underline on hover */
}




.container {
    position: relative;
    z-index: 0;
    max-width: 800px;
    margin: 50px auto;
    text-align: center;
}

h1 {
    text-align: center;
    color: #ffffff;
    border-color: #000000;
    border-radius: 5px;
    font-size: 3.2em;;
    margin: 0;
  
}

h6 {
    text-align: center;
    color: #ffffff;
    border-color: #000000;
    border-radius: 5px;
    font-size: 3.2em;;
    margin: 0;
}
h7 {
    text-align: center;
    font-size: 2em;
    margin: 0;
}

h3 {
    text-align: center;
    color:#2519cf;
    font-size: 3em;
    margin: 0;
    
}

nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 0 10px;
}

.region-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
    margin-top: 20px;
}

.region-box {
    position: relative;
    background-color: #000000;
    padding: 60px; /* Remove padding to let the image fill the entire box */
    border: 3px solid rgb(0, 0, 0);
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.616);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 2em;
    overflow: hidden; /* Ensure no overflow from the image */
    transition: background-color 0.7s ease, opacity 0.3s ease;
   
}

.region-box span {
    color: #00000000; /* Bright white text */
    text-shadow: 0px 0px 3px rgba(0, 0, 0, 0); /* Dark shadow for contrast */
    /* Optional: Add outline effect */
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0); /* For Chrome and Safari */
    opacity: 1;
    z-index: 0;
    
}

.region-box-link {
    text-decoration: none; /* Remove underline from links */
    display: block; /* Make the entire box clickable */
}

.region-box-link:hover {
    text-decoration: none; /* Ensure underline remains removed on hover */
}



.region-flag {
    position: absolute; /* Position the flag within the box */
    top: 0; /* Align to the top */
    left: 0; /* Align to the left */
    width: 100%; /* Fill the entire width */
    height: 100%; /* Fill the entire height */
    object-fit: cover; /* Maintain aspect ratio and cover the box */
    opacity: 1; /* Low opacity */
    z-index: 1; /* Ensure the flag is below the text */
}

.region-box:hover .region-flag {
    opacity: 0.4; /* Change opacity on hover */
}



/* Left boxes (OCE and EU) */







.region-box:hover {
    background-color: #000000; /* Optional change on hover */
}

table {
    width: 100%;
    margin: 20px 0;
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid #ddd;
}

th, td {
    padding: 12px;
    text-align: center;
}


th {
    background-color: #ffffff;
}

tr:nth-child(even) {
    background-color: #ffffff;
}

tr:hover {
    background-color: #ffffff;
}