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

pre {
    color: white;
    background-color: red;
}

body {
    font-family: "Exo", sans-serif;
    background-color: #e5e9f4;
    color: #ffffff;
    line-height: 1.6;
    background-repeat: repeat;
    background-position: center;
    background-image: url(../img/bg.jpg);
}

.confirmed {
    background-color: green;
}

.unconfirmed {
    background-color: rgb(118, 118, 118);
}

.deleted {
    background-color: rgb(128, 0, 0);
}

.container-fluid {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.icon-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 20px;
    justify-items: center;
    align-items: center;
    height: 80vh;
}

.icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: white;
}

.icon-item:hover {
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    text-decoration: none;
    /* Ensure no underline on hover */
}

.icon-item i {
    font-size: 4rem;
}

#game-container-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 51vw;
    height: calc(51vw * 9 / 16);
    /* Maintain 16:9 aspect ratio */
    border: 5px solid rgb(255, 255, 255);
    /* White border around the canvas */
    box-sizing: border-box;
    /* Ensure border is included in the dimensions */
}

#game-container {
    width: 100%;
    height: 100%;
    position: relative;
    cursor: url('../img/crosshair.png'), auto;
    /* Use the custom crosshair cursor */
}

canvas {
    width: 100%;
    height: 100%;
    cursor: url('../img/crosshair.png'), auto;
    /* Use the custom crosshair cursor */
}

/* Ensure the dropdown menu has the same background as the navbar */
.navbar .dropdown-menu {
    background-color: #343a40 !important;
    /* Ensure the background color matches the navbar */
    color: white !important;
    /* Ensure the text color is white */
    border: none !important;
    /* Remove any default border */
}

/* Ensure dropdown items are properly styled */
.navbar .dropdown-item {
    color: white !important;
    /* Make sure text is white */
    background-color: #343a40 !important;
    /* Match dropdown item background to navbar */
}

/* Ensure dropdown items have a proper hover/focus state */
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
    background-color: #495057 !important;
    /* Slightly darker color for hover/focus state */
    color: white !important;
    /* Keep text white */
}

/* Ensure dropdown toggle button is styled correctly */
.navbar .dropdown-toggle {
    color: white !important;
    background-color: #343a40 !important;
    border: none !important;
}

/* Styles for match items */
.match-item {
    background-color: #f8f9fa;
    /* Light background color */
    color: #000 !important;
    /* Black text color */
    border: 1px solid #dee2e6;
    /* Light border color */
    margin-bottom: 10px;
    /* Space between match items */
}

.match-item strong {
    color: #ffffff !important;
    /* Ensure strong text is black */
}

/* Ensure list group items have proper background and text color */
.list-group-item {
    background-color: #474747 !important;
    /* Medium grey background color */
    color: #ffffff !important;
    /* Black text color */
}

/* Modal styles */
.modal-content {
    background-color: #343a40;
    /* Dark background color to match navbar */
    color: white;
    /* White text color */
}

.modal-header {
    border-bottom: 1px solid #dee2e6;
    /* Light border color for header */
}

.modal-footer {
    border-top: 1px solid #dee2e6;
    /* Light border color for footer */
}

.modal-footer .btn {
    color: white;
    /* White text color for buttons */
}

.modal-footer .btn-secondary {
    background-color: #495057;
    /* Slightly darker background for secondary button */
    border: none;
    /* Remove border */
}

.modal-footer .btn-danger {
    background-color: #dc3545;
    /* Bootstrap's danger button color */
    border: none;
    /* Remove border */
}

.modal-header .close {
    color: white;
    /* White color for close button */
}