body {
    font-family: Arial, sans-serif;
    background-color: #000;
    color: #ffffff;
    margin: 0;
    padding: 0;
    display: flex;                     /* Use Flexbox for the body */
    flex-direction: column;             /* Stack items vertically */
    justify-content: space-between;    /* Space between the containers */
    height: 100vh;                    /* Full viewport height */
    box-sizing: border-box;            /* Include padding and border in height and width calculations */
}

* {
    box-sizing: border-box;            /* Ensure all elements use border-box */
}

h1, h2 {
    color: #2c3e50;
}

.navbar {
    background-color: #333; /* Navbar background color */
    color: #ffffff;             /* Text color */
    padding: 3px;             /* Padding around the navbar */
    border-radius: 5px;        /* Rounded corners */
    margin-bottom: 10px;       /* Space below the navbar */
    display: flex;             /* Use Flexbox for layout */
    justify-content: space-between; /* Space between items */
    align-items: center;        /* Center items vertically */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Shadow effect */
    width: 100%;            /* Ensure the navbar spans the full width */
}

.navbar strong {
    margin-right: 10px;        /* Space between items */
}

/* New wrapper for player and IP containers */
.container {
    display: flex;              /* Use Flexbox for layout */
    justify-content: space-between; /* Space between containers */
    width: 100%;               /* Full width */
    gap: 0;                    /* Remove gap */
}


/* Make sure both containers are set to flex */
.player-container, .ip-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 48%;                       /* Each takes up almost half of the viewport width */
    overflow-y: auto;                /* Enable vertical scrollbar */
    max-height: calc(100vh - 20px);  /* Leave space for padding */
    margin: 0;                 /* Ensure no margin to avoid gap */
}

.player-entry, .ip-entry {
    background-color: #000;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.player-entry:hover, .ip-entry:hover {
    background-color: #f0f8ff;
    color: #00f;
    transition: background-color 0.3s ease;
}

strong {
    color: #a91a1d;
}

.player-entry hr, .ip-entry hr {
    border: 0;
    height: 1px;
    background: #ddd;
    margin: 10px 0;
}

.ip-entry {
    border-left: 5px solid #2980b9;
}

.player-entry {
    border-left: 5px solid #27ae60;
}

.player-entry em, .ip-entry em {
    color: #555;
}

.highlight {
    background-color: #FCAA21; /* Change this color to whatever you prefer */
    font-weight: bold; /* Optional: make the highlighted text bold */
    color: #0c0;
}

.highlight a {
    text-decoration: none; /* Optional: Remove underline for links inside highlights */
}

form {
    text-align: center;
  }

.copyable {
    color: #FCAA21; /* Keep the default text color */
    border: 1px dashed #ccc; /* Light gray border around the text */
    text-decoration: none; /* Remove underline */
    cursor: alias; /* Change cursor to alias */
    border-radius: 4px; /* Optional: Rounded corners */
    transition: background-color 0.2s ease; /* Smooth background transition on hover */
}

.copyable:hover {
    background-color: #b0b0b0; /* Light background color on hover */
    color: #00f;
}

.copyable:visited {
    color: #FCAA21;
}

.copyable:active {
    background-color: #848484; /* Slightly darker background on click */
    color: #a91a1d;
}

.tooltip {
	background-color: rgba(0, 0, 0, 0.75); /* Semi-transparent black */
	color: white;
	padding: 5px 10px;
	border-radius: 5px;
	font-size: 12px;
	z-index: 1000; /* Ensure it's on top */
}