/***************************
  image.css
***************************/

img {
  width: 100%;

  max-height: 80vh;
  max-width: fit-content;

}

.banner {
  /* width: 200px; */
  height: 40px;
  width: fit-content;
}

.medium {
  width: 26vw;
  height: 26vw;
  object-fit: cover;
}

.image-set a:hover {
  background-color: var(--type1-base-color);
}

.banner a:hover {
  background-color: var(--type1-base-color);
}


/* https://css-loaders.com/hypnotic/ */
/* HTML: <div class="loader"></div> */
#loader {
  width: 10vw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-conic-gradient(var(--type1-main-color), var(--type1-main-color) 1deg 18deg, #0000 20deg 36deg);
  animation: l9 4s infinite linear;
  /* position: relative; */
  display: block;
  position: absolute;
  z-index: 999;
  margin-top: 40vh;
  margin-bottom: 40vh;
  margin-left: 45vw;
  margin-right: 45vw;
}

#loader::before {
  content: "";
  position: absolute;
  border-radius: 50%;
  inset: 0;
  background: inherit;
  animation: inherit;
}

@keyframes l9 {
  100% {
    transform: rotate(.5turn)
  }
}