body {
	display: grid;
	grid-template-columns: 100vw;
	grid-template-rows: 100vh;
	grid-template-rows: 100svh;
	margin: 0;
	padding: 0;
	background: hsl(0, 0%, 0%);
	height: 100vh;
	height: 100svh;
	overflow: hidden;
}
body:target {
	background: black;
}

div {
	height: 100vh;
	height: 100svh;
	display: grid;
	opacity: 0;
	
}
body > div:first-child {
	display: none;
}

/* All images are stacked on top of each other */
/* And by default they are invisible */
img {
	display: block;
	margin: auto;
	max-height: 100vh;
	max-height: 100svh;
	max-width: 100vw;
	max-width: 100svw;
	outline: 1px solid brown;
}

/* The first image after the visible image */
/* It should be display block for transitions to work */
.was + div,
.is + div,
.willbe + div {
	opacity: 0;
	display: block;
}
/* These should be visible … */
div.is,
div.was,
div.willbe {
	display: grid;
	opacity: 1;
	grid-column-start: 1;
	grid-row-start: 1;
}
div.today {
	z-index: 1;
}
div.today ~ [data-time^="01"].is,
div.today ~ [data-time^="01"].was,
div.today ~ [data-time^="01"].willbe {
	z-index: 1;
}

img {
	opacity: 0;
	transition: opacity 2s .1s ease-in-out;
}
.done-loading img {
	opacity: 1;
}
/* This is for when there are more than 1 image for a certain timestamp */
div[data-show] img {
	display: none;
}
div[data-show='1'] img:nth-of-type(1),
div[data-show='2'] img:nth-of-type(2),
div[data-show='3'] img:nth-of-type(3),
div[data-show='4'] img:nth-of-type(4),
div[data-show='5'] img:nth-of-type(5),
div[data-show='6'] img:nth-of-type(6),
div[data-show='7'] img:nth-of-type(7),
div[data-show='8'] img:nth-of-type(8),
div[data-show='9'] img:nth-of-type(9),
div[data-show='10'] img:nth-of-type(10),
div[data-show='11'] img:nth-of-type(11),
div[data-show='12'] img:nth-of-type(12),
div[data-show='13'] img:nth-of-type(13),
div[data-show='14'] img:nth-of-type(14),
div[data-show='15'] img:nth-of-type(15),
div[data-show='16'] img:nth-of-type(16),
div[data-show='17'] img:nth-of-type(17),
div[data-show='18'] img:nth-of-type(18),
div[data-show='19'] img:nth-of-type(19),
div[data-show='20'] img:nth-of-type(20),
div[data-show='21'] img:nth-of-type(21),
div[data-show='22'] img:nth-of-type(22),
div[data-show='23'] img:nth-of-type(23),
div[data-show='24'] img:nth-of-type(24),
div[data-show='25'] img:nth-of-type(25),
div[data-show='26'] img:nth-of-type(26),
div[data-show='27'] img:nth-of-type(27),
div[data-show='28'] img:nth-of-type(28),
div[data-show='29'] img:nth-of-type(29),
div[data-show='30'] img:nth-of-type(30),
div[data-show='31'] img:nth-of-type(31) { 
	display: block;
}

[aria-live="polite"] {
	position: absolute;
	left: -1000vw;
}