html {
/*	font-family: serif;*/
	font-family: sans-serif;
}

body {
	margin: 0;
	padding: 0;
	margin-bottom: 2rem;
}

#list, #breadcrumb, .btn-list, #file, #gallery, #img-metadata, #page-footer {
	margin: auto;
	width: 80ch;
	max-width: 95vw;
}

video#file { display: block; width: auto; }

#page-footer {
	margin-top: 1.5rem;
	display: flex;
	justify-content: flex-end;
}


#search-bar {
	display: block;
	margin: auto;
	width: 30ch;
	max-width: 95vw;
	margin-bottom: 0.5rem;
}
#search-bar.hidden { display:none; }
#list-page #list tr.hidden { display: none; }
table#list tbody tr.selected td:first-child { text-decoration: underline; }




#img-page #breadcrumb { margin: 1.5rem auto 0.5rem auto;  }
#list-page #breadcrumb { margin: 0.5rem auto 0.5rem auto;  }
#breadcrumb {
	display: flex;
	margin: 0.5rem auto 1.5rem auto;
	gap: 0.1rem 0;
	flex-wrap: wrap;
}
#breadcrumb a, #breadcrumb span {
	display: block;
	box-sizing: border-box;
	height: 1.4rem;
	padding: 0.2rem 0.4rem; /* 1rem + 2 * 0.2rem = 1.4rem */

	color: black;
	text-decoration: none;
}
#breadcrumb a { background-color: honeydew; }
#breadcrumb a:hover { text-decoration: underline; background-color: ghostwhite; }


#img-page .btn-list { margin-bottom: 1.5rem; }
.btn-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 0.5rem;
	gap: 0.5rem;
}
.btn-list a {
	display: block;
	box-sizing: border-box;
	height: 1.8rem;
	padding: 0.4rem 0.4rem; /* 1rem + 2 * 0.4rem = 1.8rem */

	color: black;
	text-decoration: none;
	background-color: lavender;
}
.btn-list span { flex-grow: 1; }
.btn-list a:hover { background-color: ghostwhite; }
.btn-list a.hidden { display: none; }






#gallery {
	margin: auto;
	width: 95vw;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.2rem;
}
#gallery img { max-width: 31vw; }
#gallery .fake-anchor { display: block; transform: translateY(-50vh); }

#img-page body {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.img-container {
/*	height: 100vh;*/
	margin: 0 auto;
	display: flex;
	align-items: stretch;
	overflow: hidden;
}
#img {
	width: 100%;
	height: auto;
	max-width: 100vw;
	max-height: 100vh;
}
.img-container a.arrow {
	--width: min(50%, 30vw);

	display: block;
	position: relative;
	width: var(--width);
	margin-right: calc(-1 * var(--width));
}
.img-container a.arrow svg {
	display: block;
	position: absolute;
	top: 50%;
	width: 2ch;
	height: 4ch;
}
.img-container a.arrow.left { left: 0; }
.img-container a.arrow.right { right: var(--width); }
.img-container a.arrow.left svg  { left:  1ch; }
.img-container a.arrow.right svg { right: 1ch; }
.img-container a.close {
	position: relative;
	display: block;
	width: 8ch;
	height: 8ch;
	margin-right: -8ch;

	top: 0;
	right: 8ch;
}
.img-container a.close svg {
	display: block;
	position: absolute;
	height: 3ch;
	width: calc(3ch * 7/8);
	top: 1ch;
	right: 1ch;
}
.img-container a.arrow.hidden { display: none; }

pre#file { overflow-x: scroll; }

table#list { border-collapse: collapse; }

table#list thead {
	border-bottom: 1px solid black;
	text-align: left;
	cursor: pointer;
}

table#list tbody td {
	--row-height: 2rem;
	--cell-hpadding: .4rem;
	height: var(--row-height);
	padding: 0;
}

/* make the whole row clickable */
table#list tbody td a {
	text-decoration: none;
	color: inherit;
	display: block;
	width: 100%;
	height: var(--row-height);
	line-height: var(--row-height);
	padding: 0 var(--cell-hpadding);
	box-sizing: border-box; /* changes the click bbox (hover the dl column) */
}

/* give horizontal space to the last column as well */
table#list tbody td:last-child { padding: 0 var(--cell-hpadding); }

/* color ideas:  aliceblue, antiquewhite */
table#list tbody tr { background-color: ivory; }
table#list tbody tr.dir { background-color: honeydew; }
table#list tbody tr:hover { background-color: ghostwhite; }
table#list tbody tr:hover td:first-child { text-decoration: underline; }

/* only allow the first column to grow */
table#list td, table#list th { white-space: nowrap; }
table#list td:not(:first-child) { width: 0; }



#auth-form {
	margin: auto;
	width: 40ch;
	max-width: 95vw;
}
#auth-form > div { margin-top: 1rem; }
#auth-form #username, #auth-form #password { width: 100%; }