body {
  height: 100svh;
  margin: 0%;
  font-family: Arial, sans-serif;
  text-align: center;
  background: linear-gradient(270deg, rgba(15, 15, 15, 1), rgba(45, 45, 45, 1));
  //overflow: hidden;
}
#header-container {
  padding-block: 12px;
  height: 75px;
  font-size: 2rem ;
  color: white;
  background: rgba(175,175,175, .5);
  width: 100%;
  z-index: 999;
  .button{
    border-radius: 6px;
  }
}
.detail-btn{
  height: 48px;
  grid-column: 1/4;
  background: none;
//  border: 1px solid grey;
}
.card-btn{
  background: none;
//  border: 1px solid grey;
}
.event-display h4 {
  background: rgba(100, 100, 100, 0.5);
  margin: 0px;
 // grid-column: 1/4;
}
.event-display h3 {
//  border: 1px solid orange;
  text-align: justify;
  margin: 0px;
}
.event-display h2 {
//  border: 1px solid magenta;
  margin: 0px;
}
.event-display h1 {
//  border: 1px solid pink;
  margin-block: 12px;
  color: #000000;
  background: none;
}
.event-display p {
  margin: 6px;
  font-size: 1rem;
}
.event-display {
  position: relative;
  transform: translateX(-50%);
  left: 50%;
  display: grid;
  gap: 24px;
margin-top: 24px;
//border: 3px solid orange;
  max-width: 550px;
}
.event-card
{
display: grid;
border-radius: 24px;
background: linear-gradient(rgba(205, 225, 225, .7), rgba(245, 245, 245, .7));
//border: 1px solid red;
}
.current-event{
  min-height: 200px;
  padding: .5rem;
  grid-column: 2/3;
  background: rgba(0,255,0, 0.2);
}
.next-event{
  min-height: 200px;
  padding: .5rem;
  grid-column: 2/3;
  background: rgba(255,0,0, 0.1);
}
.event-grid{
display: grid;
grid-template-columns: 48px 1fr 48px;
//grid-auto-flow: row;
}
.countdown{
  grid-column: 1/4;
}
#timeRemaining {
  background: green;
}
#timeToGo {
  background: red;
}
.input{
  border-radius: 6px;
  font-size:14px;
}