@import url('https://fonts.googleapis.com/css2?family=Bruno Ace&display=swap');

html,
body {
  margin: 0;
  padding: 0;
  /* search for other overflow hidden method */
  overflow: hidden;
  color: white;
  font-family: 'Arial';
  font-size: 16px;
}

h1 {
  font-size: 2rem;
  /* 32px */
}

p,
div {
  font-size: 1rem;
  /* 16px */
}

#globeViz {
  overflow: hidden;
  display: flex;
  /* ✅ Use flexbox */
  flex-direction: row;
  /* ✅ Align child elements in a row */

}


/* Left Panel Container - Minimal White-Blue Shadow */
#left-panel {
  display: flex;
  flex-direction: column;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
  color: white;
  width: 40vw;
  height: calc(100vh - 20px);
  position: fixed;
  left: 10px;
  top: 10px;
  z-index: 2;
  padding: 10px;
  box-sizing: border-box;
}

/* Header */
#header {
  height: 60px; /* Slightly larger than an H1 */
  display: flex;
  align-items: center; /* Vertically center */
  justify-content: flex-start; /* Left-aligned */
  font-size: 1.5rem;
  padding-left: 10px; /* Left padding */
  border-bottom: 1px solid white;
}

/* Main Content */
#main-content {
  flex-grow: 1; /* Takes up remaining space */
  display: flex;
  align-items: flex-start; /* Align content at the top */
  justify-content: flex-start; /* Left-aligned */
  padding: 10px;
  font-size: 1rem;
}

/* Bottom Section */
#bottom {
  height: 50px; /* Fixed height */
  display: flex;
  align-items: center; /* Center icons vertically */
  justify-content: space-between; /* Spread icons across available width */
  border-top: 1px solid white;
  padding: 0 10px; /* Left and right padding for spacing */
}

/* Nyooz Logo */
.nyooz-logo {
  font-family: 'Bruno Ace', Arial;
  position: fixed;
  right: 10px;
  bottom: 10px;
  font-size: 1.5rem;
  font-weight: bold;
  color: white;
  /* background-color: rgba(0, 0, 0, 0.7); */
  padding: 5px 15px;
  border-radius: 5px;
}

/* Information Icon */
.info-icon {
  position: fixed;
  top: 10px;
  right: 10px;
  font-size: 1.5rem;
  color: white;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 5px 10px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

.info-icon:hover {
  background-color: rgba(0, 0, 0, 0.9);
}

/* Modal */
.modal {
  display: none; /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Transparent background */
  justify-content: center;
  align-items: center;
  z-index: 1001; /* Above other elements */
}

/* Modal Content */
.modal-content {
  background-color: rgba(0, 0, 0, 0.8); /* Dark background for modal */
  color: white; /* White text */
  padding: 20px;
  border-radius: 10px;
  width: 80%;
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
}

/* Modal Section */
.modal-section {
  margin-bottom: 10px;
  border-bottom: 1px solid #444;
}

/* Modal Header */
.modal-header {
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
}

.modal-header:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

/* Modal Body */
.modal-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  padding: 0 10px;
}

.modal-body img {
  max-width: 100%;
  height: auto;
  margin-top: 10px;
}

/* Close Button */
.close-button {
  position: fixed;
  top: 10px;
  right: 10px;
  font-size: 1.5rem;
  cursor: pointer;
  color: white;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1002; /* Above modal */
}

.close-button:hover {
  background-color: rgba(0, 0, 0, 0.9);
}