style.css

@font-face {
  font-family: 'texgyreadventorregular';
  src: url('./fonts/texgyreadventor_regular_macroman/texgyreadventor-regular-webfont.eot');
  src: url('./fonts/texgyreadventor_regular_macroman/texgyreadventor-regular-webfont.eot?#iefix') format('embedded-opentype'), url('./fonts/texgyreadventor_regular_macroman/texgyreadventor-regular-webfont.woff') format('woff'), url('./fonts/texgyreadventor_regular_macroman/texgyreadventor-regular-webfont.ttf') format('truetype'), url('./fonts/texgyreadventor_regular_macroman/texgyreadventor-regular-webfont.svg#texgyreadventorregular') format('svg');
  font-weight: normal;
  font-style: normal;
  text-transform: uppercase;
}

@font-face {
  font-family: 'texgyreadventorbold';
  src: url('./fonts/texgyreadventor_bold_macroman/texgyreadventor-bold-webfont.eot');
  src: url('./fonts/texgyreadventor_bold_macroman/texgyreadventor-bold-webfont.eot?#iefix') format('embedded-opentype'), url('./fonts/texgyreadventor_bold_macroman/texgyreadventor-bold-webfont.woff') format('woff'), url('./fonts/texgyreadventor_bold_macroman/texgyreadventor-bold-webfont.ttf') format('truetype'), url('./fonts/texgyreadventor_bold_macroman/texgyreadventor-bold-webfont.svg#texgyreadventorbold') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'texgyreadventoritalic';
  src: url('./fonts/texgyreadventor_italic_macroman/texgyreadventor-italic-webfont.eot');
  src: url('./fonts/texgyreadventor_italic_macroman/texgyreadventor-italic-webfont.eot?#iefix') format('embedded-opentype'), url('./fonts/texgyreadventor_italic_macroman/texgyreadventor-italic-webfont.woff') format('woff'), url('./fonts/texgyreadventor_italic_macroman/texgyreadventor-italic-webfont.ttf') format('truetype'), url('./fonts/texgyreadventor_italic_macroman/texgyreadventor-italic-webfont.svg#texgyreadventoritalic') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'nexa_rust_sansblack';
  src: url('./fonts/nexarustsans-black-webfont.woff2') format('woff2'), url('./fonts/nexarustsans-black-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

html {
  background: url(./img/backgrounds/IMG_20180616_171654-PANO.jpg);
  background-size: cover;
  background-attachment: fixed;
}

body {
  background: transparent;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'texgyreadventorregular';
  text-transform: uppercase;
  letter-spacing: .2em
}

h1 {
  font-size: 22px;
}

h5 {
  font-family: 'texgyreadventorbold';
  letter-spacing: .15em;
  font-size: 17px;
}

a {
  color: #24c2f1;
}

a:hover {
  color: #4999e4;
}

/* Subtle styling for the credits section */
.credits {
  font-size: 14px; /* Reduce font size */
  opacity: 0.7; /* Lower opacity to make it less prominent */
  color: #333; /* Use a lighter text color */
  margin-top: 10px; /* Add some space at the top */
  padding: 10px; /* Add padding for separation */
  background-color: rgba(255, 255, 255, 0.9); /* Lighter background color */
  border-radius: 5px; /* Rounded corners */
}

.credits p {
  margin: 5px 0; /* Adjust margin for spacing between lines */
}

.credits div {
  font-size: 12px; /* Reduce font size for inner div */
  opacity: 0.7; /* Lower opacity for inner div */
}

.credits div br {
  display: none; /* Hide line breaks in inner div */
}


.asset {
  position: relative;
  display: inline-block;
}

.asset-label {
  position: absolute;
  top: 0;
  right: 10px;
  margin: 0px !important;
  padding: 5px !important;
  border-top-left-radius: 0px !important;
  border-top-right-radius: 0px !important;
  background: #4eddf0 !important;
}

.asset-label img {
  width: 20px;
  height: 20px;
  margin: 0px !important;
  padding: 0px !important;
}

.assetGroup {
  text-align: center;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  grid-auto-rows: 1fr;
  justify-content: center;
}

.assetGroup div {
  display: inline-block;
  background: rgba(255, 255, 255, 0.13);
  padding: 10px 20px;
  border-radius: 4px;
  margin: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.assetGroup a img {
  max-height: 200px;
  max-width: 160px;
  display: inline-block;
}

.assetGroup a label {
  display: block;
  text-align: center;
  padding: 10px 3px 0;
}

.asset-section {
  display: none;
}

.asset-section.show {
  display: block;
}

.filters {
  margin: 25px;
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.filter-section {
  margin-right: 40px;
}

.filter-section:last-child {
  margin-right: 0;
}

.filter-section > .options {
  display: flex;
  flex-wrap: wrap;
}

.filter-section > .options > label > span {
  font-weight: normal;
  display: block;
  font-size: 14px;
  margin-right: 10px;
  padding: 3px;
  border-bottom: solid 2px white;
  cursor: pointer;
}

.filter-section > .options > label > input {
  display: none;
}

.filter-section > .options > label > input:checked + span {
  color: #4999e4;
  border-color: #4999e4;
}

.filter-section > .options > label > span:hover {
  color: #4999e4;
  border-color: #4999e4;
}

.filter-section > .options > label:last-child > span {
  margin-right: 0;
}