body {
	margin: 1em;
}

img {
	max-width: 100%;
	max-height: calc(100vh - 3em);
}

p {
	margin: 0;
	font: 350 1em/1.2 'Fira Sans Condensed', 'Fira Sans', sans-serif;
	color: graytext;
}

const images = [
	{
		url: 'https://images.unsplash.com/photo-1522617889820-47708e025180?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTF8fGRpY2V8ZW58MHx8MHx8fDA%3D',
		creator: 'Jonathan Petersson',
		description: 'transparent dice (title image)',
	},
	{
		url: 'https://images.unsplash.com/photo-1590759237529-53f798771281?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTA4fHxkaWNlfGVufDB8fDB8fHww',
		creator: 'Gustavo Candido da Silva',
		description: 'Neoclicks',
	},
	{
		url: 'https://images.unsplash.com/photo-1530700538177-7ef88f1d1eb2?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8ODR8fGRpY2V8ZW58MHx8MHx8fDA%3D',
		creator: 'Nagy Arnold',
		description: 'vintage car',
	},
	{
		url: 'https://images.unsplash.com/photo-1647082916421-2f8a59f949a9?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjY4fHxkaWNlfGVufDB8fDB8fHww',
		creator: 'Robert Stump',
		description: 'man throwing dice'
	},
	{
		url: 'https://images.unsplash.com/photo-1681402720847-961bb1aab8d8?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MzQ2fHxkaWNlfGVufDB8fDB8fHww',
		creator: 'Stephen Harlan',
		description: 'Monopoly',
	}
];

// wrong implementation, no equal distribution
// const randomIndex = Math.round(Math.random() * (images.length - 1));

// correct implementation, equal distribution
const randomIndex = Math.floor(Math.random() * images.length);

document.body.insertAdjacentHTML('beforeend', `
	<img
		src="${images[randomIndex].url}"
		alt="${images[randomIndex].description}"
	/>
	<p>Photo by ${images[randomIndex].creator} on Unsplash</p>
`);