.center {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: 50px; /* adjust as needed for the space from the top */
  flex-wrap: wrap; /* Allows items to wrap if the screen is too small */
}

.content {
  max-width: 800px; /* set a maximum width for the content */
}

.phenomena-container {
  min-width: 200px; /* set a minimum width for the comments */
  max-width: 400px; /* set a maximum width for the comments */
  margin-left: 50px; /* add some space between the content and the comments */
  margin-top: 100px;
  align-self: flex-start; /* This ensures that comments align to the top */
}


.text{
    font-size: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
    line-height: 35px;
}

.container {
    width: auto;
    max-width: 1000px;
    padding: 0 15px;
}


.keyword-box {
    border: 2px solid black; /* Bootstrap primary color */
    padding: 2px 5px;
    border-radius: 10px; /* Optional: for rounded corners */
    background-color: white; /* Light blue background */
    box-shadow: 0 0 5px black; /* Glowing effect */
}

.phenomena {
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    padding: 10px;
    margin-bottom: 15px;
    transition: transform 0.3s, box-shadow 0.3s;
}

.phenomena.highlighted {
    transform: scale(1.3); /* Enlarges the phenomena */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Adds shadow for depth */
    z-index: 100; /* Ensures the phenomena is above other elements */
}

.keyword-enlarged {
    font-size: 150%; /* Adjust as needed */
    transition: font-size 0.3s ease; /* Smooth transition */
}

.range-slider {
  position: relative;
  width: 100%;
  margin-bottom: 50px;
}

.slider-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.scale-marks {
  display: flex;
  justify-content: space-between;
  padding: 0 10px; /* Adjust padding if necessary to better align with the slider's ends */
}

.scale-mark {
  height: 10px;
  width: 2px;
  background-color: #000;
}

.label-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  position: absolute;
  top: 30px; /* Adjust this value based on your actual slider and mark heights */
}

.label {
  font-size: 30px; /* Adjust font size as needed */
}