body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
      text-align: center;
      padding: 20px;
}

main {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 420px); /* Adjust this value to leave space for header and footer */
}

footer {
  background-color: #f0f0f0;
  text-align: center;
  /* padding: 20px; */
}

.date-input-container {
  align-items: center;
  margin-bottom: 20px;
}

/* Styles for the label */
.date-input-container label {
margin-right: 10px;
font-size: x-large;
vertical-align: bottom;
align-items: center; /* Vertically center the label content */
height: 100%; /* Take up the full height of the container */
}

input[type="date"] {
appearance: none;
border: 1px solid #ccc;
padding: 8px 12px;
border-radius: 6px;
font-size: 16px;
width: 200px;
background-color: #f8f8f8;
color: #333;
outline: none;
transition: border-color 0.3s ease;
}

/* Styles for the date input when it's focused */
input[type="date"]:focus {
border-color: #0066cc;
box-shadow: 0 0 5px #0066cc;
}

/* Styles for the date input's drop-down arrow */
/* Note: Styling the drop-down arrow is not consistent across browsers */
input[type="date"]::-webkit-calendar-picker-indicator {
filter: invert(30%);
}

input[type="date"]::-webkit-inner-spin-button {
display: none;
}

input[type="date"]::-webkit-clear-button {
display: none;
}


/* Add this CSS to your existing styles.css or add a new CSS file */
/* Styles for the toolbar */
.toolbar {
  display: flex;
  justify-content: center; /* Center the buttons horizontally */
  margin-top: 20px; /* Add some spacing from the date input */
  /* align-items: stretch; */
  /* margin-left: 10px; */
  /* margin-right: 10px; */
}

.toolbar button {
  margin:    5px;
  font-size: 37px;
}

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 200,
  'GRAD' 0,
  'opsz' 48
}