.global_header {
  --left-align: 5%;
}
.global_header h1 {
  color: var(--primary);
  text-transform: uppercase;
  font-weight: 900;
  font-size: 4em;
  margin: 0;
  padding: 0 0 0 var(--left-align);
}
.subheader {
  width: 100%;
  margin: 0;
  padding: 0;
}
.subheader h2 {
  margin: 0;
  padding: .5em 0 .5em var(--left-align);  
}
.subheader a {
  margin:0 1em 0 0;
}
.inverted a {
  color: black;
}
footer {
  padding: 0.5em 3em;
  margin: 1em 0 0 0;
  background: var(--gray-dark)
}

main h2 {
  position: sticky;
  z-index: 3;
  top: 0;
  background: var(--gray-900);
  background: linear-gradient(90deg, rgba(33,37,41,1) 0%, rgba(33,37,41,1) 10em, rgba(33,37,41,.1) 100%);
}

.block_container {
  margin: 4em 5% 1em 5%;
  padding-left: 5%;
}

.block {
  display: block;
  position: relative;
  margin: 4em auto 1em 0;
  padding:0;
  max-width: 1500px;
}
@media (max-width: 800px) {
  .block_container {
    margin-left: 2%;
    margin-right: 2%;
    padding-left: 0;
  }
}

/** In use? **/
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr));
}
.gallery-grid img {
  width: 100%;
  height: auto;
}


.tabs {
  display: flex;
  flex-wrap: wrap;
}
.tabs input[type="radio"] {
  position: absolute;
  top: 0;
  left: -9999px;
}
.tabs .tablabel {
  padding: .4em 1em;
  border-bottom: 1px solid var(--gray-800);
  margin: 0 .2em;
}
.tabs .tablabel:hover {
  background: var(--secondary);
  color: var(--white);
  cursor: pointer;
}
.tabs .tablabel:active {
  background: var(--secondary);
  color: var(--white);
}
.tabs .tab-content {
  display: none;
  overflow: hidden;
  order: 999;
  width: 100%;
}
.tabs [id^="tab"]:checked + .tablabel {
  border-bottom-color: var(--secondary);
  font-weight: bold;
}
.tabs input:checked + .tablabel + .tab-content {
  display: block;
}



.tabs-vertical {
  display: flex;
  gap: 3em;
  flex-wrap: nowrap;
}
.tablist {
  padding: 1em 1em 1em 0;
  min-width: 17em;
}
.tablist ul {
  padding: 0;
  margin: 0;
  list-style: none;
  width: 100%;
}
.tablist label {
  display: block;
  margin: 0.8em 0;
  padding: 0.6em 1em;
  border-bottom: 1px solid var(--gray-800);
  width: 100%;
  cursor: pointer;
}
.tablist span {
  white-space: nowrap;
  display: block;
}
.tablist label:hover {
  background: var(--secondary);
  color: var(--white);
  cursor: pointer;  
}
.tabcontent {
  display: none;
  overflow: hidden;
}
.tabcontent.active {
  display: block;
  gap: 3em;
}
.tabs-vertical .current {
  border-bottom-color: var(--secondary);
}
.tab-content-area {
  width: 100%;
  overflow: hidden;
}
.tabcontent .desc {
  width: 50%;
  max-width: 600px;
  min-width: 300px;
}
@media (max-width: 900px) and (min-width: 600px) {
  .tablist {
    min-width: 10em;
  }
  .tablist label {
    padding: 0.6em 0.2em;
  }
  .tabcontent .desc {
    width: 100%;
  }
}
@media (max-width: 600px) {
  .tabs-vertical {
    flex-wrap: wrap;
  }
}


.gallery {
  width: 100%;
  overflow-x: scroll;
  display: flex;
  white-space: nowrap;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 0.4em;
  padding-bottom: 1.2em;
  gap: 0.5em;
}
.gallery > * {
  scroll-snap-align: start;
  min-width: 96%;
  object-fit: cover;
  background: rgba(0 , 0, 0, 0.1);
  white-space: normal;
}

.gallery .fit-contain, .fit-contain, .fit-contain img {
  object-fit: contain;
}
.gallery picture .height-full, .height-full {
  max-height: 100%;
  height: 100%;
  aspect-ratio: unset;
}
.gallery picture img:has(.height-full) {
  max-height: 100%;
  height: 100%;
  border:1px solid red;
}
.widescreen img {
  aspect-ratio: 16/9;
}


[data-playpause] {
  border: 0;
  appearance: none;
  width: 5em;
  height: 5em;
  border-radius: 50%;
  display: block;
  margin:10px;
}
[data-playpause]:hover,  [data-playpause]:active {
  cursor: pointer;
  background: var(--primary);
  color: var(--black);
  opacity: 1;
}

.playing {
  animation: pulse 2s infinite;
  background: var(--gray-800);
}
@keyframes pulse {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
	}
}


.external {
  color: var(--white);
}
.external:hover {
  color: var(--link-color);  
}