@import url('https://fonts.googleapis.com/css2?family=Gruppo&display=swap');

:root{
	--blaine-black: rgb(18, 12, 5);
	--blaine-red: rgb(118, 20, 20);
	--blaine-white: rgb(255, 255, 255);
	--blaine-orange: rgba(251, 197, 164, 0.4);
	
	--blaine-fast: 0.5s;
	--blaine-med: 1s;
	--blaine-slow: 1.5s;

	--slideshow-height: min(90vh, calc(100vh - 5rem));
	--slideshow-width: 90vw;
}

/* TEXT */
body {
	font-family: "Gruppo";
}

a, a:visited, a:active, a:hover {
	text-decoration: none;
}

header h1 {
	font-size: min(4rem, 13vw);
	text-align: center;
}

footer {
	text-align: center;
}


/* COLOURS */
body {
	color: var(--blaine-white);
	background-image: radial-gradient(circle at bottom right, var(--blaine-red), var(--blaine-black) 30%);
	background-attachment: fixed;
}

header {
	background-color: rgba(0, 0, 0, 0.3);
}

dialog#slideshow {
	background-color: rgba(0, 0, 0, 0);
}

dialog#slideshow.slideshow {
	background-color: var(--blaine-orange);
}

a, a:visited, a:active, a:hover {
	color: var(--blaine-white);
}


/* ARRANGEMENT */
header {
	position: sticky;
	top: 0;
}

div#gallery {
	column-count: max(2, calc(100vw / 400px));
}

div#gallery img {
	box-sizing: border-box;
}

dialog#slideshow {
	position: fixed;
}

dialog#slideshow img {
	position: fixed;
	z-index: 20;
	top: 50vh;
	left: 50vw;
}

dialog#slideshow img.start-hidden,
dialog#slideshow img.end-hidden {
	z-index: 15;
}

footer {
	display: inline-block;
}


/* SIZING */
div#gallery img {
	max-width: 100%;
}

dialog#slideshow {
	width: 100vw;
	height: 100vh;
}

dialog#slideshow {
	/* override dialog defaults */
	max-width: 100vw;
	max-height: 100vh;
}

dialog#slideshow img {
	max-width: var(--slideshow-width);
	max-height: var(--slideshow-height);
}

dialog#slideshow img.start-hidden,
dialog#slideshow img.end-hidden {
	max-width: 0px;
	max-height: 0px;
}


/* SPACING */
html {
	padding: env(safe-area-inset);
}

body {
	margin: 0;
}

header h1 {
	margin: 0;
	padding: 1rem 0;
}

dialog #slideshow {
	padding: 0;
	margin: 0;
}

div#gallery {
	padding: 1rem;
}

div#gallery img {
	padding: 0.5rem;
}

footer {
	padding: 1rem;
}


/* TRANSITIONS */
@keyframes swap {
	0% {
		rotate: 0deg;
		transform: translate(-50%, -50%);
		max-width: var(--slideshow-width);
		max-height: var(--slideshow-height);
		z-index: 30;
	}

	25% {
		rotate: 45deg;
		transform: translate(50%, -75%);
		max-width: var(--slideshow-width);
		max-height: var(--slideshow-height);
		z-index: 10;
	}

	100% {
		rotate: 0deg;
		transform: translate(-50%, -50%);
		max-width: 0px;
		max-height: 0px;
		z-index: 10;
	}
}

dialog#slideshow {
	transition: background-color var(--blaine-fast);
}

dialog#slideshow img {
	transform: translate(-50%, -50%);
	transition-property: max-width, max-height;
	transition-duration: var(--blaine-fast);
}

dialog#slideshow img.end-hidden {
	transition-delay: var(--blaine-med);
}

dialog#slideshow img.forwards {
	animation-name: swap;
	animation-duration: var(--blaine-slow);
}

dialog#slideshow img.backwards {
	animation-name: swap;
	animation-duration: var(--blaine-med);
	animation-direction: reverse;
}