#heading {
  font-family: "Inconsolata", monospace;
}


body, html {
  height: 100%;
  font-family: "Inconsolata", monospace;
  margin: 0;
  display: flex;
  justify-content: center;  
  background-color: gre;  /* Just to distinguish the main content area */
}

.main-wrapper {
  width: calc(100vh * 16 / 9); /* width is calculated based on the viewport height */
  max-width: 100%;             /* ensuring it doesn't exceed the viewport width */
  height: 100vh;               /* take full viewport height */
  background-color: white;     /* optional: just to visually distinguish content area */
  overflow: hidden;            /* optional: to ensure content doesn't spill out */
}


#speed {
  font-family: inconsolata, Monaco, lucida console, Consolas, courier new;
  font-size: 0.9rem;
  text-transform: uppercase;
  margin: 10px auto 6px;
  width: 203px;
}


#title {
    text-align: center;
    font-size: 30px;
    margin-bottom: 10px;    
  }

#subtitle {
    font-size: 14px;   
    text-align: center;
    margin-bottom: 10px;     
  }
  #monthsCounter {
    font-size: 35px;  
    text-align: center;
    margin-bottom: 10px;      
  }

  .button-container {
    display: flex;
    justify-content: center; /* Horizontally center the buttons within the container */
    gap: 0px; /* Optional: Add some gap between the buttons */
    margin: auto; /* Horizontally center the button-container within its parent */
}
#pause-button, #slow-button, #fast-button  {
    padding: 3px;
    text-align: center;
    border: 1px solid #ccc;
    cursor: pointer;
    float: left;
    width: 60px;
    font-size: 14px;

}


.line-label-first-dates {
  font-size: 16px;
}

.line-label-matches {
  font-size: 16x;
}

.x-axis {
  font-size: 12px;
  font-family: "Inconsolata", monospace;
}