@keyframes jump {
    0%, 100% {
        transform: translateY(0);  /* Start and end at normal position */
    }
    50% {
        transform: translateY(-15px);  /* Move up by 15 pixels at the top of the jump */
    }
}

body, html {
  margin: 10px;
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: black;
}

.menu-text {
  font-family: 'Times New Roman', Times New, normal;
  font-size: 0.8rem;
  color: white;
  margin-bottom: 40px;
  text-decoration: none;
  display: none;
  text-allign: center;
}

/* Retro-style headline */
.retro-headline {
  font-family: 'Times New Roman', Times New, monospace;
  font-size: 2.5rem;
  color: orange;
  text-shadow: 0.5px 0.5px 0 #f48c06, 1px 1px 0 #faa307;
  margin-bottom: 40px;
}

.retro-headline_text {
  font-family: 'Times New Roman', Times New, normal;
  font-size: 1.6rem;
  color: white;
  margin-bottom: 40px;
}

.excerpt-text {
  font-family: 'Times New Roman', Times New, monospace;
  font-size: 0.8rem;
  color: white;
  margin-top: 40px;
}

/* The circle container */
.circle {
  position: relative;
  width: 300px;
  height: 300px;
  background-image: url('/static/images/beach_bg.png');
  background-size: cover;
  background-position: center;
  border: 5px solid white;
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(0,0,0,0.3);
}

/* The foreground image that sits on top of the background */
#foreground {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150px;
  height: 150px;
  pointer-events: none;
}

/* Responsive styling for mobile devices */
@media (max-width: 600px) {
  .circle {
    width: 80vw;   /* nearly full viewport width */
    height: 80vw;  /* maintain a 1:1 aspect ratio for a circle */
  }
  #foreground {
    width: 47.5vw; /* roughly 50% of the circle's width */
    height: 47.5vw;
    transform: translate(-50%, -50%);
  }
  .retro-headline {
    font-size: 2rem;
  }
  .excerpt-text {
    font-size: 1rem;
  }
}