body { text-align: center; font-size: 16px; line-height: 1.5; font-family: Consolas, Courier, monospace; box-sizing: border-box; padding-left: 1em; padding-right: 1em; }
h1 { font-size: 5em; font-weight: 700; line-height: 1; margin-top: 0.5em; margin-bottom: 0.25em; }
header { border-bottom: 1px solid #ccc; padding-bottom: 2em; }
#prompt { max-width: 600px; margin: 0 auto; }
strong, #prompt h2 { font-weight: 700; }
main > h2:first-child, main > #intro { margin-top: 5em; }
main > #intro { margin-bottom: 5em; }
nav { background-color: #e5e5e5; display: inline-block; margin-top: 1em; border: 1px solid #b5b5b5; padding: 1em; }
nav ul li { display: inline; }
nav ul li:not(:first-child)::before { content: '| '; }
#intro { margin-top: 2em; }
.comic-img { display: block; max-width: 100%; height: auto; margin-bottom: 1em; margin-left: auto; margin-right: auto; }
.comic-img:hover { box-shadow: 0 3px 5px rgb(0 0 0 / 40%); }
[class^="row-"]:not(.captioned), .captioned + p { margin-bottom: 7.5em; }
[class^="row-"]:last-child { margin-bottom: 3em; }
footer { margin-bottom: 1em; }
.captioned + p { font-size: 85%; }

@media (min-width: 768px) {
	main { max-width: 80%; margin-left: auto; margin-right: auto; }
	.comic-img { margin-bottom: 0; }
	.captioned:not(.captioned-center) + p { text-align: right; }
	[class^="row-"] { display: flex; align-items: center; justify-content: center; }
	[class^="row-"]:not(.captioned), .captioned + p { margin-bottom: 10em; }
	.img-container:not(:first-child) { margin-left: 1em; }
	.row-3.split-3 { flex-wrap: wrap; }
	.row-3.split-3 .img-container { width: calc(50% - 0.5em); }
	.row-3.split-3 .img-container:last-child { width: 100%; margin-left: 0; margin-top: 1em; }
}
@media (min-width: 1200px) {
	main { max-width: 60%; margin-left: auto; margin-right: auto; }
	body[data-year="2023"] main { max-width: 80%; }
}
[class^="row-"].captioned { margin-bottom: 0; }



    /* links with additional info for accessibility */
a.info, button.info {
    position: relative;   
}
a.info span.linkInfo, button.info span.linkInfo, label.linkInfo {
    background-color: #f4ccd1;
    color: #3c042f;
    font-size: 80%;
    font-style: italic;
    font-weight: normal;
    /* left: 20%; */
    right: -50%;
    min-width: 14em;
    opacity: 0;
    padding: 0.25rem;
    position: absolute;
    text-align: center;
    text-transform: none;
    top: 90%;    
    transition: all 0.25s ease-in-out;
    visibility: hidden;
    width: 0;
}
a.info:hover span.linkInfo,
a.info:active span.linkInfo,
a.info:focus span.linkInfo {
    visibility: visible;
    opacity: 1;
}

.sr-only {
    position: absolute;
    margin: -1px 0 0 -1px;
    padding: 0;
    display: block;
    width: 1px;
    height: 1px;
    font-size: 1px;
    line-height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
    outline: 0;
}