LeRobot-worldwide-hackathon/countdown

1body {2  margin: 0;3  padding: 0;4  background: black;5  font-family: 'IBM Plex Mono', monospace;6  color: #fff;7  text-align: center;8  height: 100vh;9  overflow: hidden;10}11 12#starfield {13  position: fixed;14  top: 0;15  left: 0;16  z-index: 0;17  background: black;18}19 20.container {21  position: relative;22  z-index: 1;23  display: flex;24  flex-direction: column;25  justify-content: center;26  align-items: center;27  height: 100vh;28  width: 100%;29}30 31h1 {32  font-size: 2rem;33  margin-bottom: 2vh;34  color: #aaa;35  letter-spacing: 2px;36}37 38#countdown {39  display: flex;40  justify-content: center;41  align-items: center;42  gap: 4vw;43  height: 70vh; /* takes 70% of screen height */44  width: 100%;45}46 47#countdown div {48  display: flex;49  flex-direction: column;50  align-items: center;51  justify-content: center;52  font-size: 10vw; /* scale numbers based on width */53  line-height: 1;54}55 56#countdown span:last-child {57  font-size: 1.5vw;58  margin-top: 1vh;59  letter-spacing: 1px;60  text-transform: uppercase;61  color: #ccc;62}63 64@keyframes pulse {65  0% { transform: scale(1); }66  50% { transform: scale(1.05); }67  100% { transform: scale(1); }68}69 70@keyframes pop {71  0% { transform: scale(1); }72  100% { transform: scale(1.1); }73}74 75#event-info {76  position: absolute;77  top: 20px;78  left: 20px;79  z-index: 2;80  color: #fff;81  font-size: 0.7vw;82  letter-spacing: 1px;83  text-align: left;84  background-color: rgba(0, 0, 0, 0.4); /* subtle background for readability */85  padding: 8px 12px;86  border-radius: 6px;87  max-width: 40vw;88}89 90