body {
  background: url(galaxybg.jpg) center center / cover no-repeat fixed;
}

.img-border {
    border: 20px solid rgb(35, 23, 72);
    border-radius: 30px;
    margin-top: 30px;
    max-width: 90%;
    height: auto;

}
main {
    font-family: 'Comic Sans MS', 'Comic Sans', cursive;
    color:rgb(35, 23, 72);
    font-size: 1.2em;
    text-align: center;
    background: rgb(14, 84, 128) linear-gradient(180deg, rgba(30, 66, 88, 0.8) 0%, rgba(255, 255, 255, 0.8) 100%);
    border-radius: 30px;
    border:20px solid rgb(35, 23, 72);
    padding: 15px;
    max-width:90%;
    margin: 2em auto;
}
@keyframes wiggle {
  0%   { transform: rotate(-1deg); }
  50%  { transform: rotate(1deg); }
  100% { transform: rotate(-1deg); }
}

.wiggle {
  animation: wiggle 3s steps(2) infinite;
  display: inline-block;
}
@keyframes pulse {
  0%   { transform: rotate(20deg) scale(1); }
  50%  { transform: rotate(20deg) scale(1.05); }
  100% { transform: rotate(20deg) scale(1); }
}
.startrio.pulse {
    animation: pulse 2s infinite;
    width: 200px;
    height: auto;
    margin-left: 115px;
    margin-top: 130px;
}

@keyframes neon-rainbow {
  0%   { color: #39ff14; text-shadow: 0 0 10px #39ff14, 0 0 40px #0fa; }
  10%  { color: #00fff7; text-shadow: 0 0 10px #00fff7, 0 0 40px #0ff; }
  20%  { color: #00bfff; text-shadow: 0 0 10px #00bfff, 0 0 40px #0af; }
  30%  { color: #0080ff; text-shadow: 0 0 10px #0080ff, 0 0 40px #08f; }
  40%  { color: #8e54e9; text-shadow: 0 0 10px #8e54e9, 0 0 40px #85f; }
  50%  { color: #ff00ea; text-shadow: 0 0 10px #ff00ea, 0 0 40px #f0f; }
  60%  { color: #ff0099; text-shadow: 0 0 10px #ff0099, 0 0 40px #f09; }
  70%  { color: #ffe600; text-shadow: 0 0 10px #ffe600, 0 0 40px #ff0; }
  80%  { color: #b6ff00; text-shadow: 0 0 10px #b6ff00, 0 0 40px #bf0; }
  90%  { color: #39ff14; text-shadow: 0 0 10px #39ff14, 0 0 40px #0fa; }
  100% { color: #39ff14; text-shadow: 0 0 10px #39ff14, 0 0 40px #0fa; }
}
.cute-box   {
  animation: neon-rainbow 6s linear infinite;
  background: #3c4638;
  border: 10px solid #271a54;
  border-radius: 18px;
  padding: 18px 24px;
  margin: 0 24px;
  box-shadow: 2px 4px 16px rgba(24, 194, 233, 0.07);
  font-family: 'Comic Sans MS', cursive, sans-serif;
   color: #39ff14; /* bright neon green */
  text-shadow:
    0 0 5px #39ff14,
    0 0 10px #39ff14,
    0 0 20px #39ff14,
    0 0 40px #0fa,
    0 0 80px #0fa;
  min-width: 160px;
  max-width: 200px;
  text-align: center;
  height: 90%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  
}

.cute-box p {
 color: #39ff14; /* bright neon green */
  text-shadow:
    0 0 5px #39ff14,
    0 0 10px #39ff14,
    0 0 20px #39ff14,
    0 0 40px #0fa,
    0 0 80px #0fa;
  font-weight: bold;
  margin:0.3em 0;
  margin:0.3em 0;
}

.june16,
.june23,
.june24 {
  border: 20px solid rgb(35, 23, 72);
  border-radius: 30px;
  height: 692px;
  width: auto;
 
}
.theartist {
  border: 20px solid rgb(35, 23, 72);
  border-radius: 30px;
  height: 692px;
  width: auto;
}
.squibzbangers {
  animation: squibz-glow 2.5s ease-in-out infinite;
}
@keyframes squibz-glow {
  0% {
    box-shadow: 0 0 12px 2px rgba(57,255,20,0.2), 0 0 24px 4px rgba(0,255,170,0.15);
  }
  50% {
    box-shadow: 0 0 32px 8px rgba(57,255,20,0.35), 0 0 48px 16px rgba(0,255,170,0.25);
  }
  100% {
    box-shadow: 0 0 12px 2px rgba(57,255,20,0.2), 0 0 24px 4px rgba(0,255,170,0.15);
  }
}
.entries-center {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  margin: 60px 0;
}
.entry-labels {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-top: 12px;
}
.entry-date {
  background: #0d0d0f;
  color: #39ff14; /* bright neon green */
  text-shadow:
    0 0 5px #39ff14,
    0 0 10px #39ff14,
    0 0 20px #39ff14,
    0 0 40px #0fa,
    0 0 80px #0fa;
  font-weight: bold;
  margin:0.3em 0;
  margin:0.3em 0;
  font-family: 'Comic Sans MS', cursive, sans-serif;
  font-weight: bold;
  border-radius: 10px;
  padding: 8px 18px;
  font-size: 1.5em;
  box-shadow: 0 4px 8px rgba(24, 233, 59, );
  text-align: center;
  min-width: 80px;
  margin: 10px 0;
}
.entries-center {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 32px;
  margin: 60px 0;
  flex-wrap: wrap;
}

.entry-block {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/*stack images on small screens */
@media (max-width: 900px) {
  .entries-center {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .entry-block img {
    max-width: 90vw;
    height: auto;
  }
  
}

.entry-box {
  background: #3c4638;
  border: 10px solid #271a54;
  border-radius: 14px;
  padding: 16px 20px;
  margin: 18px;
  box-shadow: 1px 2px 8px rgba(24, 194, 233, 0.10);
  color: #39ff14;
  text-shadow:
    0 0 5px #39ff14,
    0 0 10px #39ff14,
    0 0 20px #39ff14,
    0 0 40px #0fa;
  text-align: center;
  font-family: 'Comic Sans MS', cursive, sans-serif;
  max-width: 90%px;
  
}
.entry-box:hover {
  box-shadow:
    0 0 30px 4px #39ff14,   /* green glow */
    0 0 32px 5px #0fa;      /* blue-green outer glow */
  border-color: rgb(57, 255, 2, 0.4) ;     /* optional: neon border on hover */
  transition: box-shadow 0.3s, border-color 0.3s;
  cursor: pointer;
}
.months {
  background: #3c4638;
  border: 10px solid #271a54;
  border-radius: 14px;
  padding: 16px 20px;
  margin: 18px 0;
  box-shadow: 1px 2px 8px rgba(24, 194, 233, 0.10);
  color: #39ff14;
  text-shadow:
    0 0 5px #39ff14,
    0 0 10px #39ff14,
    0 0 20px #39ff14,
    0 0 40px #0fa;
  text-align: center;
  font-family: 'Comic Sans MS', cursive, sans-serif;
  line-height: 1.9;
  max-width: 260px;
  margin: 20px auto;

}