style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Black+Ops+One&family=Libre+Baskerville&display=swap');

html, body {
  margin: 0;
  padding: 0;
  background-color: black;
  font-family: "Bebas Neue", sans-serif;
}

#visualization-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height:100%
}

#globeViz {
  width: 100%; /* Adjust as needed */
  height: calc(100% - 1000px);
}

#slider-container {
  position: absolute;
  margin: 20px 0;
  text-align: center;
  bottom: 5%;
  padding: 10px 0; /* Add some padding */
}

#dateSlider {
  width: 100%; /* Adjust as needed */
  margin-bottom: 10px;
  -webkit-appearance: none; /* Override default appearance */
  appearance: none;
  background: transparent; /* Remove default background */
}

/* Slider Track */
#dateSlider::-webkit-slider-runnable-track {
  width: 100%;
  height: 5px;
  background: #b2abab; /* Dark track */
  border-radius: 4px;
}

#dateSlider::-moz-range-track {
  width: 100%;
  height: 12px; /* Increase track height */
  background: #333; /* Dark track */
  border-radius: 4px;

}

/* Slider Thumb */
#dateSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px; /* Size of the thumb */
  height: 25px;
  background: rgb(179, 55, 55); /* Red thumb */
  cursor: pointer; /* Cursor on hover */
  border-radius: 20%; /* Round shape */
  margin-top:-8px;

}


/* Progress Track (for WebKit/Blink browsers only) */
#dateSlider::-webkit-slider-runnable-track {
  
  background: linear-gradient(to right, #e39393 0%, #8B0000 100%); /* Dark red progress track */
}


#dateDisplay {
  font-size: 60px; /* Increase font size */
  color: darkred
  /* bottom：10px; */
}

#unshownData-container {
  display: none; 
  position: fixed; /* Fixed positioning */
  top: 40%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Adjust for centering */
  z-index: 2; 
  display: flex; /* Align tables side by side */
  justify-content: center; /* Center the tables in the container */
  background-color: transparent; /* Background for the table */
  font-size:12px;
  /* Other styling as needed */
}


table {
  /* position:absolute; */
  /* display:none; */
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 300%;
}

td, th {
  /* display:none; */
  color:white;
  text-align: left;
  padding: 10px;
  width: 200px;
  white-space: nowrap; 
}


.modal-overlay {
  display: none; /* Initially hidden */
  position: absolute; /* Change to absolute */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.2); /* Semi-transparent grey */
  z-index: 1; /* Ensure it's below the table but above other content */
}

#showTableBtn {
  position:absolute;
  padding: 10px 20px;
  background-color:inherit;
  color: darkred;
  border: none;
  /* border-radius: 5px; */
  font-family: "Bebas Neue", sans-serif;;
  font-size: 20px;
  cursor: pointer;
  /* transition: background-color 0.3s ease; */
  top:50%;
  right:10%;
  
}

#showTableBtn:hover {
  /* background-color: rgb(114, 14, 14);
  border-radius:30% */
  color:#fc4d4d;
}

#InfoBtn {
  position:absolute;
  padding: 10px 20px;
  background-color:inherit;
  color: darkred;
  border: none;
  /* border-radius: 5px; */
  font-family: "Bebas Neue", sans-serif;;
  font-size: 20px;
  cursor: pointer;
  /* transition: background-color 0.3s ease; */
  top:54%;
  right:10%;
  
}

#InfoBtn:hover {
  /* background-color: rgb(114, 14, 14);
  border-radius:30% */
  color:#fc4d4d;
}


#projectInfo {
  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    display: none; /* Initially hidden */
    position: fixed; /* Fixed position relative to the viewport */
    top: 40%; /* Positioned 50% from the top */
    left: 50%; /* Positioned 50% from the left */
    transform: translate(-50%, -50%); /* Shifts the element back by its own half width and height */
    background-color: rgba(255, 255, 255, 0.175); /* Background color */
    color: rgb(180, 180, 180); /* Text color */
    padding: 20px; /* Padding inside the div */
    box-shadow: 0px 0px 10px rgba(0,0,0,0.5); /* Optional: Shadow for a pop-up effect */
    width: 100%; /* Width of the div */
    max-width: 700px; /* Maximum width */
    text-align: left; /* Center the text inside the div */
    z-index: 1000; /* Make sure it's above other elements */
    overflow-wrap: break-word; /* Ensures long words can be broken and wrap onto the next line */
    /* margin-bottom:2px; */
    /* inline-size: 1.5px */
    line-height: 30px; /* 4px +12px + 4px */
    font-size:15px;

}

#projectInfo a {
  color: #b5b4b4; /* Hyperlink text color */
  /* text-decoration: none; */
  font-weight: bold; /* Makes the text bold */
}