body {
    font-family: "Luckiest Guy", cursive;
    max-width: 720px;
    margin: 2rem auto;
    padding: 0 1rem;
    color: #222;
    line-height: 1.5;
}

h1 {
    margin-bottom: 0.25rem;
}

.subtitle {
    margin-top: 0;
    color: #555;
}

table.calendar {
    width: 100%;
    border-collapse: separate;
    border-spacing: 3px;
    table-layout: fixed;
    margin: 1.5rem 0 2rem;
    background: linear-gradient(160deg, #041e38 0%, #0a3d6e 45%, #062a4d 100%);
    padding: 8px;
    border-radius: 8px;
}

table.calendar caption {
    caption-side: top;
    font-size: 1.5rem;
    font-weight: bold;
    padding-bottom: 0.75rem;
    text-align: left;
    color: #0a3d6e;
}

table.calendar th,
table.calendar td {
    border: 1px solid rgba(255, 255, 255, 0.25);
    width: 14.28%;
    height: 70px;
    padding: 4px 6px;
    vertical-align: top;
    text-align: left;
    color: #fff;
    border-radius: 4px;
}

table.calendar td {
    background: linear-gradient(145deg, #1a5276 0%, #0e3a5c 55%, #072640 100%);
}

table.calendar th {
    height: auto;
    background: linear-gradient(180deg, #1f618d 0%, #0d3b66 100%);
    text-align: center;
    font-weight: bold;
    padding: 8px 4px;
    color: #fff;
}

/* Birthday (October 5) highlighted in purple */
table.calendar td.birthday {
    background: linear-gradient(145deg, #9b4dca 0%, #6a1b9a 55%, #4a148c 100%);
    color: #fff;
    font-weight: bold;
    box-shadow: inset 0 0 0 2px #e0aaff;
}

.media {
    margin: 2rem 0;
}

.media h2 {
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
}

.birthday-svg {
    display: block;
    max-width: 220px;
    height: auto;
}

.bitmap-link img {
    display: block;
    max-width: 320px;
    height: auto;
    border: 1px solid #ccc;
}