body {
	margin: 0;
	overflow: hidden;
	background-color: #000;
}

#map-container {
	position: absolute;
	top: 70px; /* Height of the buttons + spacing */
	left: 0;
	width: 100vw;
	height: calc(100vh - 70px); /* Subtract button height from full height */
	overflow: hidden;
}

#map {
	position: absolute;
	top: 0;
	left: 0;
	transform-origin: top left;
	transform: none;
}

.map_realms {
	position: absolute;
	cursor: pointer; 
	/* background-color: rgba(255,0,0,0.2); */
}

#map_western_realms {
	top: 100px;
	left: 25px;
	right: 1240px;
	bottom: 1170px;
	width: 1220px;
	height: 1070px;
}

#map_eastern_realms {
	top: 100px;
	left: 1315px;
	right: 2485px;
	bottom: 1170px;
	width: 1170px;
	height: 1070px;
}

.marker {
	position: absolute;
	font-size: 40px;
	color: #fae600;
	cursor: pointer;
	transform: translate(-50%, -50%);
	transition: color 0.4s ease-in-out;
	z-index: 10;
}

.marker::before {
	content: '';
	position: absolute;
	top: -20px; /* Adjust as needed to center the larger touch area */
	left: -20px;
	width: 80px; /* Total clickable area width */
	height: 80px; /* Total clickable area height */
	background: transparent; /* Invisible but clickable */
	pointer-events: auto;
}

.marker:hover {
	color: #abfa00;
	cursor: pointer;
}

#button-container {
    position: fixed;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    pointer-events: auto; /* Ensure buttons remain interactive */
}

#top-button {
    margin-bottom: 5px; /* Adds spacing between top and center buttons */
    display: flex;
    justify-content: center;
}

#center-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
}

#button-container button {
    width: 160px;
    padding: 7px 0;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    transform: none !important; /* Override any inherited scaling */
}

#button-container button:hover {
    background-color: #0056b3;
    transform: none !important;
}

#magicadia-home {
    background-color: #ff8700; /* Specific style for this button */
}