/* :root {
  --color: #222;
  --bg: rgb(215, 210, 204);
  --darker-bg: #eee;
} */

:root {
  --color: rgb(215, 210, 204);
  --bg: #1c1c1c;
  --darker-bg: #111111;
  --dark-grey: rgb(51, 51, 51);
  --grey: #111;
  --dark-grey: #ddd;
  --lighter-grey: #222;
}

body {
  background-color: var(--bg);
  color: var(--color);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: Open Sans, Arial, system-ui;
  overflow-y: hidden;
}



#goodbye {
  background-image: url('good_bye.png');
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -10;
  left: 0;
}
#over_goodbye {
  background: #111e;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -5;
  color: transparent;
}

h1, h3{
  text-align: center;
}

h1 {
  margin: 3em 0;
  font-size: 3em;
}

h3 {
  margin: 1em 0;
  font-size: 2em;
}

/* GPX Follower ad */
#gpxfollower {
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Align items to the start (left) */
  background-color: #fff;
  padding: 0.8em 1em;
  margin: 1em;
  text-decoration: none;
  box-shadow: rgb(0 0 0 / 25%) 0px 3px 20px 5px;
  border-radius: .5em;
}

#gpxfollower > #also-from {
  font-size: 0.9em;
  color: var(--lighter-grey);
  margin-bottom: .5em; /* Spacing below "Also from OptiSearch" */
}

.gpxfollower-app {
  display: flex;
  align-items: center;
}

.gpxfollower-app .logo {
  width: 6em; /* Adjust as needed */
  height: auto;
  border-radius: 20%;
}

#gpxfollower:hover .text-app .app-name {
  text-decoration: underline;
}

.text-app .app-name {
  font-weight: bold;
  font-size: 1.2em;
  margin-bottom: 0.4em;
}
.text-app {
  display: flex;
  flex-direction: column;
  padding: .5em;
  margin: 0 2em;
}

.text-app .app-desc {
  color: var(--lighter-grey);
}

.icon-container {
  position: relative;
  display: inline-block; /* Ensure the container wraps around the icon and text */
}

.googleplay {
  height: 5em;
  width: max-content;
  margin: -.6em;
  margin-top: .5em;
}

.new-text {
  position: absolute;
  top: 0;
  right: 0;
  font-weight: bold;
  color: var(--color);
  padding: 3px 5px; /* Adjust as needed */
  background-color: red; /* Adjust as needed */
  animation: bounce 0.5s infinite alternate; /* Adjust duration and timing as needed */
}

@keyframes bounce {
  0% {
    transform: translate(20%, 20%) rotate(40deg) scale(0.8); /* Initial scale */
  }
  100% {
    transform: translate(20%, 20%) rotate(40deg) scale(.9); /* Scale at the peak of the bounce */
  }
}