body {
    font-family: Arial, sans-serif;
    margin: 20px;
}
header {
    /* header background image */
    background-image: url('../images/landing-pic.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
    color: white;
    min-height: 220px; /* ensure header shows the background */
    padding: 28px 20px;
    box-sizing: border-box;
    background-color: #000000; /* fallback while image loads */
    background-blend-mode: normal;
}
p {
    font-size: 16px;
}
footer {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
    color: #777;
}

/* Link colorway using CSS variables + pseudo-selectors */
:root {
    --link: #1a73e8;
    --link-visited: #5b3bd1;
    --link-hover: #174ea6;
    --link-active: #113f8a;
    --link-focus: #ffd54f;
}

nav ul {
    padding: 0;
    text-align: center;
}

li {
    margin: 10px 0;
    list-style-type: none;
}

div.week ol {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    padding: 0;
}

div.week {
    border: #000000 1px solid;
    
}

div.week ol li {
    padding: 10px;
    border-radius: 5px;
    text-align: center;
}

li button.list-button {
  width: 30%;
  border: 1px solid #000;
  border-radius: 14px;
  padding: 0.9em 1.2em;
  background: whitesmoke;
  cursor: pointer;
  font: inherit;
}

li button.week-button {
  width: 100%;
  border: 1px solid #000;
  border-radius: 14px;
  padding: 0.9em 1.2em;
  background: green;
  cursor: pointer;
  font: inherit;
}

a {
    color: var(--link);
    text-decoration: none;
    transition: color 150ms ease, text-decoration-color 150ms ease;
}
a:visited {
    color: var(--link-visited);
}
a:hover {
    color: var(--link-hover);
    text-decoration: underline;
}
a:active {
    color: var(--link-active);
}
a:focus-visible {
    outline: 3px solid var(--link-focus);
    outline-offset: 3px;
}