/* Always dark
:root {
  --color-bg: white;
  --color-text: #404040;
  --color-table-bg: white;
  --color-table-bg--head: #efefef;
  --color-table-bg--even: whitesmoke;
  --color-table-text: #222222;
  --color-link-text: #3498db;
  --color-link-text--visited: #8e44ad;
  --color-search-text: #8e44ad;
  --color-search-bg: white;
  --color-search-border: rgba(0, 0, 0, .15);
  --color-search-border--focus: #8e44ad;
} */

/* @media (prefers-color-scheme: dark) { */
  :root {
    --color-bg: #222222;
    --color-text: #bbb;
    --color-table-bg: #222222;
    --color-table-bg--head: #181818;
    --color-table-bg--even: #333;
    --color-table-text: #ccc;
    --color-link-text: #3096d5;
    --color-link-text--visited: #9e4ebf;
    --color-search-text: #9e4ebf;
    --color-search-bg: #181818;
    --color-search-border: rgba(255, 255, 255, .15);
    --color-search-border--focus: #9e4ebf;
    --banner-height: 10rem;
    --nav-height: 3rem;
    --nav-bg-color: #080808;
    --nav-link-color: #181818;
    --nav-link-color-hover: #333;
    --btn-bg-color: #080808;
    --btn-bg-color-hover: #181818;
    --card-bg-color: #121212;
  }
/* } */

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 300;
  color: var(--color-text);
  background-color: var(--color-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/*body::before {
  content: ' ';
  display: block;
  background: transparent url('./Strip_banner.png') no-repeat center / auto var(--banner-height);
  width: 100%;
  height: var(--banner-height);
}*/

nav {
	flex: 0 0 max-content;
	width: 100%;
	display: flex;
	background-color: var(--nav-bg-color);
	justify-content: center;
	/* order: -1; */
}

nav::before {
	flex: 0 0 calc(var(--nav-height) * (2559 / 472));
	height: var(--nav-height);
	content: ' ';
	display: block;
	background: transparent url('./Strip_banner.png') no-repeat left / auto var(--nav-height);
	margin-right: 1rem;
}


nav > div {
	flex: 0;
	display: flex;
}

nav > div > a,
nav > div > nav-dropdown,
nav-dropdown > div > a {
	flex: 0 0;
	height: var(--nav-height);
	display: flex;
	padding: 0 2rem;
	margin: 0;
	white-space: nowrap;
	background-clip: border-box;
	align-items: center;
	justify-content: space-around;
	/*background-color: var(--nav-link-color);*/
	transition: background-color 0.5s;
	font-weight: bold;
	font-size: larger;
	color: var(--color-link-text);
}

nav > div > a:hover,
nav > div > nav-dropdown:hover,
nav-dropdown > div > a:hover {
	background-color: var(--nav-link-color-hover);
	text-decoration: none;
}

@media (max-width: 1090px) {
	nav {
		flex-direction: column;
		align-items: center;
	}
	nav::before {
		flex-basis: calc(2 * var(--nav-height));
		width: calc(2 * var(--nav-height) * (2559 / 472));
		background-size: auto calc(2 * var(--nav-height));
		margin-right: 0;
	}
}

@media (max-width: 810px) {
	nav > div {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
}

table {
  width: 100%;
  background: var(--color-table-bg);
  border: 0;
  table-layout: auto;
}

table thead {
  background: var(--color-table-bg--head);
}

table tr th,
table tr td {
  padding: 0.5625rem 0.625rem;
  /* font-size: 0.875rem; */
  color: var(--color-table-text);
  text-align: left;
  line-height: 1.125rem;
}

table thead tr th {
  padding: 0.5rem 0.625rem 0.625rem;
  font-weight: bold;
}

table tr.even {
  background: var(--color-table-bg--even);
}

a {
  text-decoration: none;
  color: var(--color-link-text);
}

a:hover {
  text-decoration: underline;
}

a:visited {
  color: var(--color-link-text--visited);
}

.img-wrap {
  vertical-align: middle;
  display: inline-block;
  margin-right: 8px;
  width: 16px;
  height: 16px;
}

.img-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
}

.img-wrap + a {
  display: inline-block;
  vertical-align: middle;
}

.hidden {
  display: none;
}

#page-header {
  display: flex;
  align-items: center;
  margin-left: 0.625rem;
  margin-right: 0.625rem;
}

#page-header > h1 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

#search {
  display: block;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  line-height: 1.25;
  color: var(--color-search-text);
  background-color: var(--color-search-bg);
  background-image: none;
  background-clip: padding-box;
  border: 1px solid var(--color-search-border);
  border-radius: 0.25rem;
  margin-left: 1rem;
  -webkit-appearance: textfield;
}

#search:focus {
  border-color: var(--color-search-border--focus);
  outline: 0;
}

group-list {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-auto-rows: 1fr;
	gap: 2rem;
	padding: 2rem;
}

group-list > a {
	display: grid;
	grid-template-columns: max-content 1fr max-content;
	grid-template-rows: 2rem 2rem 1fr;
	aspect-ratio: 1;
	background-position: top;
	background-repeat: no-repeat;
	background-size: cover;
	border: black solid 1px;
	transition: box-shadow 0.35s;
}

group-list > a:hover {
	box-shadow: 0 0 1.5rem black;
	text-decoration: none;
}

group-list > a > * {
	grid-row: 1;
}

group-list > a > span {
	grid-column: 1;
	padding: 0 1rem;
	font-size: larger;
	font-weight: bolder;
}

group-list > a > span + span {
	grid-column: 3;
	font-size: medium;
}

group-list > a::before {
	content: ' ';
	display: block;
	grid-column: 1 / -1;
	grid-row: 1;
	background-image: linear-gradient(rgba(0,0,0,1), rgba(0,0,0,0.75), rgba(0,0,0,0));
}

@media (max-width: 1280px) {
	group-list {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

@media (max-width: 974px) {
	group-list {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 660px) {
	group-list > a {
		grid-template-columns: 1fr;
	}
	group-list > a > span + span {
		grid-column: 1;
		grid-row: 2;
	}
	group-list > a::before {
		grid-row: 1 / 3;
	}
}

@media (max-width: 440px) {
	group-list {
			grid-template-columns: 1fr;
	}
}

a.btn {
	display: block;
	width: max-content;
	height: max-content;
	padding: 1rem;
	margin: 1rem;
	background-color: var(--btn-bg-color);
	border-radius: 1rem;
	transition: background-color 0.35s;
	font-weight: bolder;
}

a.btn:hover {
	text-decoration: none;
	background-color: var(--btn-bg-color-hover);
}

.card {
	background-color: var(--card-bg-color);
	padding: 2rem;
	border-radius: 1rem;
	margin: 2rem;
}
.card > h2 {
	margin-top: 0;
}

nav-dropdown > div {
	opacity: 0;
	transition: opacity 0.35s, top 4s;
	position: absolute;
	left: 0;
	top: -100%;
	width: 100%;
	/* height: var(--nav-height); */
	background-color: var(--nav-bg-color);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	z-index: 1;
}

nav-dropdown:hover > div {
	opacity: 1;
	top: var(--nav-height);
	transition: opacity 0.35s, top 0.15s;
}

@media (max-width: 1090px) {
	nav-dropdown:hover > div {
		top: calc(3 * var(--nav-height));
	}
}

@media (max-width: 810px) {
	nav-dropdown:hover > div {
		top: calc(4 * var(--nav-height));
	}
}

/* Hide extra columns so they don't squash file names */
@media (max-width: 600px) {
  .indexcollastmod, .indexcoldesc, .indexcolsize {
    display: none;
  }

  h1 {
    font-size: 1.5em;
  }

  #page-header {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    margin-bottom: 1em
  }

  #search {
    margin-left: 0;
  }
}

@media (max-width: 400px) {
  h1 {
    font-size: 1.375em;
  }
}