:root {
    --primary: rgb(194, 10, 194);
    --dark: rgb(92, 5, 92);
    --secondary: #FF6922;
    --green: #0fbd0f;
    --dark-green: #033803;
    --light: #EFFDF5;
    --white: #FFFFFF;
    --dark-white: #DDDDDD;
}


.notice-board {
  background-color: var(--primary);
  border: 1px solid var(--dark);
  border-radius: 8px;
  margin: 0px auto;
  font-family: Arial, sans-serif;
  font-weight: 700;
  color: var(--light);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  position: fixed;
  bottom: 0;
  overflow: hidden;
  width: 100%;
  height: 25px;
  text-align: center;
  z-index: 10000000000;
}

.notice-item {
  position: absolute;
  width: 100%;
  opacity: 0;
  text-align: center;
  font-size: 1em;
  animation: fadeCycle 16s infinite;
}

.notice-item:nth-child(1) { animation-delay: 0s; }
.notice-item:nth-child(2) { animation-delay: 4s; }
.notice-item:nth-child(3) { animation-delay: 8s; }
.notice-item:nth-child(4) { animation-delay: 12s; }
/* .notice-item:nth-child(5) { animation-delay: 12s; } */

@keyframes fadeCycle {
  0% { opacity: 0; transform: translateY(20px); }
  10% { opacity: 1; transform: translateY(0); }
  25% { opacity: 1; transform: translateY(0); }
  35% { opacity: 0; transform: translateY(-20px); }
  100% { opacity: 0; }
}