.container {
    /* Styles for container */
}
.title {
    /* Styles for title */
}
.form {
    /* Styles for form */
}
.input-group {
    /* Styles for input group */
}
.label {
    /* Styles for label */
}
.input {
    /* Styles for input fields */
}
.button {
    /* Styles for button */
}
.event-details {
    /* Styles for event details */
}
body {
    background-color: black;
    color: white;
}

/* If you have other specific elements you want to style, add them here. For example: */
.container {
    /* Styles for container (if needed) */
}

.title {
    /* Styles for title (if needed) */
}

.event-details {
    /* Styles for event details (if needed) */
}

/* Ensure all text elements are clearly visible against the black background */
.label, .input, .button, p {
    color: white;
    /* Add other styling as needed */
}

/* You may want to style the input fields and button specifically to make them stand out */
.input, .button {
    /* Add styles for input fields and button */
}

/* Basic styling for the table */
table {
    width: 100%; /* Full width of the container */
    border-collapse: collapse;
}

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

th, td {
    padding: 8px;
    text-align: left;
}

/* Responsive design */
.container {
    max-width: 60%; /* Maximum width for landscape orientation */
    margin: auto; /* Center the container */
}

/* Media query for portrait orientation */
@media screen and (orientation: portrait) {
    .container {
        max-width: 80%; /* Maximum width for portrait orientation */
    }
}

/* Styles for the title and image */
.title {
    text-align: center;
    /* Additional styling as needed */
}

.event-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
	margin-top: 20px;
    width: 80%; /* Adjust as needed */
}
/* Styles for table headers */
th {
    background-color: white; /* White background */
    color: black;           /* White text */
    font-size: 20px;        /* Font size 20 */
    font-weight: bold;      /* Bold font weight */
    font-family: Arial, sans-serif; /* Arial font */
	text-align: center; /* Center align text */
}

/* Styles for table data */
td {
    background-color: #000000; /* Example background color */
    color: white; /* Text color */
	text-align: center; /* Center align text */
    /* Add more styling as needed */
}

h3 {
    color: #FFFFFF; /* Example text color */
    font-size: clamp(16px, 2vw, 48px); /* Minimum size 16px, responsive size 2vw, maximum size 24px */
    font-weight: normal; /* Font weight */
    font-family: 'Arial', sans-serif; /* Font family */
    text-align: center; /* Center align text */
    margin: 10px 0; /* Margin top and bottom */
    /* Additional styling as needed */
}

/* Style for 'Position' header in the table */
.position-header {
    width: 1%;     /* Minimize the width */
    white-space: nowrap; /* Prevent text wrapping */
}

/* Style for 'Position' header in the table */
.position-header {
    width: 1%;     /* Minimize the width */
    white-space: nowrap; /* Prevent text wrapping */
}