/* Overlay */
#changelogOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  justify-content: center;
  align-items: flex-start;
  padding-top: 5%;
  z-index: 9999;
  overflow: hidden;
}
    
#changelogOverlay .overlay-content {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: none; /* Initially hidden */
  justify-content: center;
  align-items: self-start;
  //align-items: center;
  z-index: 1000;
  overflow: hidden;
}

/* Overlay Content */
.overlay-content {
  background: rgba(68, 129, 166, .7);
  border: 5px SOLID #bee8f1;
  border-radius: 7px;
  width: 90%;
  margin-top: 3%;
  margin-bottom: 3%;
  top: 3%;
  left: 3%;
  padding: 10px 20px;
  overflow-x: hidden;
  overflow-y: auto;
  box-shadow: #000 3px 3px, #000 3px 3px inset;
  max-height: 0;
  transition: max-height 0.5s ease-out;
}

/* Expanded state */
.overlay.show .overlay-content {
  max-height: 80%; /* Expanded height */
}

/* Close Button */
#closeChangelog {
  background: #89c3d6;
}

#closeChangelogDisc {
  background: #89c3d6;
}

.overlay-content::-webkit-scrollbar {
  width: 9px; /* Set the width of the scrollbar */
}

.overlay-content::-webkit-scrollbar-track {
  background: #33333300; /* Set the color of the scrollbar track */
}

.overlay-content::-webkit-scrollbar-thumb {
  background: rgb(98 179 197 / 48%); /* Set the color of the scrollbar thumb */
  border-radius: 10px; /* Set the border radius of the thumb */
}

.overlay-content::-webkit-scrollbar-thumb:hover {
  background: rgb(
    190,
    232,
    241
  ); /* Set the color of the scrollbar thumb on hover */
}

.growtopia-button {
  background: #89c3d6;
  all: unset;
  border-radius: 5px;
  box-shadow: 2px 2px #000;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: "Century Gothic Bold", sans-serif;
  font-weight: bold;
  font-size: 20px;
  margin-top: 10px;
  padding: 7px 10px 10px;
  text-decoration: none;
  text-shadow: 2px 2px rgba(0, 0, 0, 0.7);
}

.growtopia-button:hover {
  color: #fff;
}

.growtopia-modal-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Flex item for the icon */
.changelog-sprite img {
  width: 32px;
  height: 32px;
}

/* Flex item for the heading */
.growtopia-modal-header h4 {
  margin: 0; /* Remove default margin */
  font-family: CenturyGothicBold;
  font-size: 30px;
  color: #fff;
}

.changelog-content {
  border-bottom-color: #fce6ba;
  color: #fce6ba;
  font-family: CenturyGothicBold;
  font-weight: bold;
  font-size: 22px;
}

.no-scroll {
  overflow: hidden;
  height: 100%;
}