/* Import Google Font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');

/* ===== BODY & BACKGROUND ===== */
body {
    font-family: 'Inter', sans-serif;
    background: url('bkg.png') no-repeat center center fixed;
    background-size: cover;
    color: #2d1e15;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ===== HEADER & LOGO ===== */
header {
    width: 100%;
    text-align: center;
    padding: 20px 0;
}

.logo {
    max-width: 250px;
}

/* ===== MAIN CONTAINER (BORDERED BOX) ===== */
.application-container {
    background: url("corner_t_right.png") top right no-repeat,
                url("corner_t_left.png") top left no-repeat,
                url("corner_b_right.png") bottom right no-repeat,
                url("corner_b_left.png") bottom left no-repeat,
                url("border_w.png") top center repeat-x,
                url("border_w.png") bottom center repeat-x,
                url("border_h.png") left center repeat-y,
                url("border_h.png") right center repeat-y,
                #b4ac96;
    padding: 30px;
    max-width: 750px;
    text-align: center;
    border-radius: 8px;
    margin-top: 30px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
}

/* ===== TITLES & HEADINGS ===== */
.title {
    font-size: 26px;
    font-weight: bold;
    color: #3d2b1f;
}

.subtitle {
    font-size: 22px;
    font-weight: bold;
    color: #4a3226;
    margin-top: 20px;
}

.description {
    font-size: 16px;
    color: #4a3226;
}

/* ===== BUTTON STYLING (NAVIGATION) ===== */
.rules-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.apply-button, .back-button {
    display: block;
    width: 85%;
    height: 70px;
    font-size: 18px;
    margin-top: 15px;
    text-align: center;
    line-height: 70px;
    text-decoration: none;
    color: #ffffff;
    background-color: rgb(111,94,72);
    border: 2px solid rgb(50,31,26);
    text-transform: uppercase;
    font-weight: bold;
    border-radius: 5px;
    box-shadow: 0px 5px 0px #3d2b1f;
    transition: all 0.2s ease-in-out;

        /* Center the button */
        margin-left: auto;
        margin-right: auto;
}

.apply-button:hover, .back-button:hover {
    background-color: rgb(92,72,58);
    transform: scale(1.03);
}

/* ===== RULES INTRO TEXT ===== */
.rule-intro {
    font-size: 18px;
    color: #3a2a1d;
    font-weight: bold;
    margin-bottom: 20px;
}

/* ===== RULE BLOCK STYLING ===== */
.rule-block {
    background: rgba(0, 0, 0, 0.1);
    border: 2px solid #5a4732;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    text-align: left;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

.rule-block h2 {
    font-size: 22px;
    color: #5a3822;
    margin-bottom: 10px;
}

.rule-block p {
    font-size: 16px;
    color: #2d1e15;
    font-weight: bold;
}

.rule-block ul {
    list-style-type: disc;
    padding-left: 25px;
}

.rule-block ul li {
    font-size: 16px;
    margin-bottom: 8px;
    color: #2d1e15;
}

/* ===== TABLE STYLING (BANS & PUNISHMENTS) ===== */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    background: rgba(0, 0, 0, 0.1);
}

th, td {
    padding: 12px;
    text-align: center;
    border: 1px solid #3d2b1f;
    font-size: 16px;
}

th {
    background: #6b5844;
    color: #fff;
}

td {
    background: rgba(255, 255, 255, 0.4);
}

/* ===== FOOTER STYLING ===== */
footer {
    width: 100%;
    text-align: center;
    background: rgba(20, 20, 20, 0.7); /* Dark transparent glass effect */
    color: #e8d3af; /* Light gold text */
    padding: 15px 0;
    font-size: 16px;
    font-weight: bold;
    text-shadow: 1px 1px 2px black; /* Makes text stand out */
    border-top: 1px solid rgba(255, 255, 255, 0.2); /* Soft top border */
    box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.3); /* Soft shadow effect */
    backdrop-filter: blur(5px); /* Glassmorphism blur effect */
    position: relative;
    bottom: 0;
    margin-top: 30px; /* Adds space between footer and content */
}