/*  Define colours here*/
:root {
    --header-bg-colour: hsla(180, 97%, 15%, 0.99);
    --programme__type--repeat--bg-colour: hsl(205, 51%, 45%);
    --programme__type--normal--bg-colour: darkgreen;
    --header-height: 30vh;
  }
  
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  /* Initial conditions, the overflow-x causes the empty rhs space*/
  html,
  body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
    /* added to fix font size increase in landscape on phones*/
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
  }
  body {
    /* font-family: "Arial", sans-serif; */
    font-family: "Source Sans Pro", "Open Sans", sans-serif;
    font-weight: 400;
    font-size: 1em;
    background-color: black;
    color: beige;
    width:100%;
    max-width: 1600px;
  }

  body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/gig-guide/HR\ Logo\ Transparent\ No\ Shadow.png'); /* Replace with your image */
    background-size: 30%;
    background-repeat: repeat;
    background-position: center;
    opacity: 0.15; /* Adjust for transparency level */
    z-index: 1; /* Places the background behind all other content */
    pointer-events: none;}

  header {   
    background-color: var(--header-bg-colour);
    padding: 0.5em 0;
    text-align: center;
    height:auto;
  }
  
main{
    width: 95%;
    margin: 0 auto;
}
footer{
    background-color: #1b6274;
    color: white;
    height: 2rem;
    align-content: center;
}

p{
    margin: 0.2rem;
    font-size: 
}
a{
    text-decoration: none;
    color: greenyellow;
}
.container{
    width: 90%;
    max-width: 1190px;
    margin: 0 auto;
    text-align: center;
}

.detailtext{
  color : #eeeef4;
  font : normal 12px Arial, Helvetica, sans-serif;
}

.new__day{
  background-color: #e9e1bed7;
  font-size: 0.8rem;
  color : #444455;
  padding: 5px;
  text-align : left;
  border:1px solid grey;
  position: sticky;
  top: 0;
}
.day__title{
    display: flex;
    gap:10px;
}
.event{
    display: flex;
    font-size: 0.8rem;
    gap:10px;
    background-color:black;
    padding: 5px;
    color: white;
    text-align: left;
    line-height: 1.2;
    text-transform:capitalize;
}
.event:nth-child(odd){
    background-color: #2d3436;
}
.event:nth-child(even){
    background-color: rgb(56, 70, 70);
}
.event__date{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.date {
    text-align: left;
}

.sponsor {
    font-size: small;
    text-align: right;
    align-self: flex-start;

}
.event__name{
    flex-basis:50%;
}
.event__venue{
    flex-basis: 50%;
}

@media (min-width: 400px){
    .event{
        font-size: 1rem;
    }
    .event__date{
        font-size: 1.2rem;
    }
}