/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: white;
  color: black;
  font-family: Verdana;
}

p {
  text-align: center;
}

h1 {
  text-align: center;
}

h1 span {
  background-color: orange;
}

h2 {
  text-align: center;
}

h2 span {
  background-color: yellow;
}

.text-item {
  background-color: orange;
  text-align: center;
}

.gallery-page-background {
  background-image: linear-gradient(rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.45)), url("Images/Backgrounds/Website_Wallpaper1.png");
  background-repeat: repeat;
  background-size: 220px auto;
  background-position: bottom right;
  animation: downright-diagonal-wallpaper-scroll 18s linear infinite;
}

.index-page-background {
  background-image: linear-gradient(rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.45)), url("Images/Backgrounds/Website_Wallpaper1.png");
  background-repeat: repeat;
  background-size: 220px auto;
  background-position: top left;
  animation: upleft-diagonal-wallpaper-scroll 18s linear infinite;
}

@keyframes downright-diagonal-wallpaper-scroll {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 220px 220px;
  }
}

@keyframes upleft-diagonal-wallpaper-scroll {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -220px -220px;
  }
}

.gif-center {
  width: 100%;
  text-align: center;
}

.hyperlink-icons {
  display: inline-flex;
  /*
  flex-direction: column;
  align-items: center;
  */
  gap: 10px;
  padding: 10px 0;
}

.hyperlink-icons a,
.hyperlink-icons img {
  display: block;
}

.hyperlink-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 20px solid transparent;
  border-image-source: url("Images/Site Assets/Containers and Buttons/Button_Idle.png");
  border-image-slice: 32 fill;
  border-image-width: 20px;
  border-image-outset: 0;
  border-image-repeat: round stretch;
  background-color: transparent;
  width: 168px;
  height: 168px;
  padding: 8px;
  box-sizing: border-box;
  cursor: pointer;
}

.hyperlink-button:hover {
  border-image-source: url("Images/Site Assets/Containers and Buttons/Button_Hover.png");
}

.hyperlink-button:active {
  border-image-source: url("Images/Site Assets/Containers and Buttons/Button_Pressed.png");
  transform: translateY(2px);
}

.hyperlink-button img {
  display: block;
  width: 120px;
  height: 120px;
  object-fit: contain;
}

/* CUSTOM FONT */
.image-font {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2px;
  line-height: 1;
}

.image-font-letter {
  width: 28px;
  height: 28px;
  object-fit: contain;
  image-rendering: auto;
}

.image-font-space {
  width: 12px;
  height: 1px;
}

.image-font-fallback {
  font-size: 0.9em;
  line-height: 1;
}

.clickable-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 24px solid transparent;
  border-image-source: url("Images/Site Assets/Containers and Buttons/Button_Idle.png");
  border-image-slice: 32 fill;
  border-image-width: 24px;
  border-image-outset: 0;
  border-image-repeat: repeat;
  background-color: transparent;
  min-width: 260px;
  min-height: 72px;
  padding: 5px 10px;
  cursor: pointer;
}

.clickable-button .image-font-letter,
.clickable-button .image-font-fallback,
.clickable-button .image-font-space {
  display: block;
  transform: translateY(-10px);
  /*transition: transform 90ms ease-out;*/
}

.clickable-button:hover {
  border-image-source: url("Images/Site Assets/Containers and Buttons/Button_Hover.png");
}

.clickable-button:active {
  border-image-source: url("Images/Site Assets/Containers and Buttons/Button_Pressed.png");
  transform: translateY(4px);
}

.clickable-button:active .image-font-letter,
.clickable-button:active .image-font-fallback,
.clickable-button:active .image-font-space {
  transform: translateY(0);
}

/* GALLERY PAGE */
.gallery-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  width: max-content;
}

.gallery-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 0 10px;
}

.gallery-item {
  border: 18px solid transparent;
  border-image-source: url("Images/Site Assets/Containers and Buttons/Image_Frame_1.png");
  border-image-slice: 64 64 64 64;
  border-image-width: 24px;
  border-image-outset: 0;
  border-image-repeat: repeat;
  padding: 8px;
  background: #fafafa;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 0 0 240px;
  cursor: pointer;
  transition: transform 120ms ease, filter 120ms ease;
  touch-action: manipulation;
}

.gallery-item img {
  display: block;
  width: 100%;
  height: auto;
}

.gallery-caption {
  margin-top: 6px;
  font-size: 0.9rem;
  color: #333;
  text-align: center;
}

.gallery-item:hover {
  background: #f2f2f2;
  transform: translateY(-2px);
  filter: brightness(1.02);
}

.gallery-item:focus-visible {
  outline: 3px solid #ffb300;
  outline-offset: 2px;
}

.gallery-lightbox {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1000;
}

.gallery-lightbox.is-open {
  display: flex;
}

.gallery-lightbox-panel {
  max-width: min(92vw, 1200px);
  max-height: 90vh;
  background: #fff;
  padding: 16px;
  border: 18px solid transparent;
  border-image-source: url("Images/Site Assets/Containers and Buttons/Image_Frame_1.png");
  border-image-slice: 64 64 64 64;
  border-image-width: 24px;
  border-image-repeat: repeat;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gallery-lightbox-image {
  display: block;
  max-width: 100%;
  max-height: min(75vh, 960px);
  width: auto;
  height: auto;
  margin: 0 auto;
}

.gallery-lightbox-caption {
  margin: 0;
  font-size: 1rem;
  color: #222;
  text-align: center;
}