@media (hover: hover) and (pointer: fine) {
  .tab button:hover {
      background-color: white;
      border-top: 1px solid white;
      border-left: 1px solid white;
      border-right: 1px solid white;
      border-bottom: 1px solid transparent;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: content-box;
}

body {
  font-family: 'Courier New', monospace;
  margin: 40px;
  background-color: black;
  font-size: 14px;
  font-weight: normal;
}

.folder-row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 40px;
  border-bottom: 1px solid white;
  padding-bottom: 20px;
}

.folder-row:last-child {
  border-bottom: 1px solid transparent;
}

.image-container {
  margin-right: 20px;
}

.image-container img {
  width: 100%;
  height: auto;
  max-height: 720px;
  object-fit: contain;
  object-position: left;
}

.video-container {
  flex: 0 0 31%;
  max-width: 31%;
}

.video-count-1 {
  flex: 0 0 70%;
  max-width: 70%;
}

.video-count-2 {
  flex: 0 0 45%;
  max-width: 45%;
}

.textWrapper {
  margin-top: 1em;
}

.caption {
  margin-top: 1px;
  margin-bottom: 20px;
  font-size: 14px;
  color: white;
  word-break: break-word;
}

h1 {
  color: white;
  font-size: 14px;
  margin-bottom: 20px;
}

h2.folder-title {
  margin-bottom: 10px;
  font-size: 14px;
  color: white;
}

.highlight2 {
  color: rgb(252, 165, 52);
  font-weight: bold;
}

.highlight3 {
  color: rgb(21, 197, 250);
  font-weight: bold;
}

.highlight {
  color: #00d973;
  font-weight: bold;
}

.right-element {
  position: fixed;
  top: 15px;
  right: 16px;
  z-index: 20;
}

a:hover {
  animation: blinker 0.3s linear infinite;
}

p {
  color: white;
  margin-bottom: 20px;
  width: 60%;
}

@keyframes blinker {
  50% {
  filter: invert(100%);
  }
}

a {
  color: rgb(0, 0, 0);
  font-size: 16px;
  text-decoration: none;
}

p {
  color: white;
  margin-bottom: 25px;
  width: 60%;
}

.j{
  display: block;
  margin-bottom: 10px;
}

.photographer {
  /* margin-top: 10px; */
  font-size: 0.9em;
  opacity: 0.7;
    /* margin-top: 0.5em; */
    margin-bottom: -20px;
    z-index: -1;
}

div.footer {
  width: calc(100% - 80px);
  position: fixed;
  bottom: 10px;
  mix-blend-mode: difference;
}

.mobileOnly {
  display: none;
}

/* /////////////  button ///////////// */

.tab {
  overflow: hidden;
  margin-top: 4em;
}

.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 0;
  padding-right: 16px;
  padding: 1em 1em;
  transition: 0.3s;
  padding-bottom: 1em;

  border-top: 1px solid rgb(0, 0, 0);
  border-left: 1px solid rgb(0, 0, 0);
  border-right: 1px solid rgb(0, 0, 0);
  border-bottom: 1px solid transparent; /* keeps size consistent */
      border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}




/* Create an active/current tablink class */
.tab button.active {
  border-top: 1px solid white;
  border-left: 1px solid white;
  border-right: 1px solid white;
  border-bottom: 1px solid transparent; /* keeps size consistent */
  
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

/* Style the tab content */
.tabcontent {
  display: none;
  border-top: none;
}

@media (max-width: 768px)  {

  .image-container {
  flex: 1 1 100% !important; /* Make each image container take full width */
  max-width: 100% !important;
    margin-right: auto;

  }

  .video-container {
  flex: 1 1 100% !important; /* Make each image container take full width */
  max-width: 100% !important; /* Override max-width */
  } 

  body {
  margin: 19px;}
  

  p {
  width: 98%;
  }

  .sticky {
  position: sticky;
  top: 0;
  padding-top: 1em;
  overflow: hidden;
  background-color: black;
}

.sticky-bottom {
  top: 2.5em;
}

.sticky-bottom {
  top: 2.5em;
}

  .mobileOnly {
    display: block;
  }

  .spacer {
    height: 30vh;
    width: auto;
  }

}


@media (hover: none) and (pointer: coarse) {

    .tab button:hover {
      background-color: transparent;
}

  .image-container {
  flex: 1 1 100% !important; /* Make each image container take full width */
  max-width: 100% !important;
  margin-right: auto;

  }

  .video-container {
  flex: 1 1 100% !important; /* Make each image container take full width */
  max-width: 100% !important; /* Override max-width */
  } 

  body {
  margin: 19px;}
  

  p {
  width: 98%;
  }

  .mobileOnly {
    display: block;
  }

  .spacer {
    height: 25vh;
    width: auto;
  }

  .sticky {
  position: sticky;
  top: 0;
  padding-top: 1em;
  overflow: hidden;
  background-color: black;
}

.sticky-bottom {
  top: 2.5em;
}

}