body {
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

.logo {    
    padding: 0;
    max-width: 90px; /* optional: control logo size */    
}

.logotitle {
    margin: 0;
    padding: 0;
    width: auto;        /* keep it flexible */
    max-width: 600px;   /* <-- adjust this to the size you want */
    height: auto;    
}

header {
  display: grid;
  grid-template-columns: auto 1fr; 
  align-items: center;
  column-gap: 0.5rem; /* small gap between logo and title */  
  border-bottom: 1px solid grey;

}

.logocontainer {
  display: flex;
  align-items: center; /* Centers vertically */
  justify-content: center; /* Centers horizontally */
  height: auto; /* Example height, define as needed */
  
}

main {
  display: grid;
  grid-template-columns: 25% 75%;  
}

.merchtitle {
  padding: 10px;
}

.timeline {
  padding: 10px;
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;  
}

.dateevent {
  display: grid;
  grid-template-columns: 20% 80%;
}

 .dateline, .eventline, .merch{
  margin-top: 15px;
}