/* 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;
}

/* 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;
}

.gallery-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;
}

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

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

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

.gallery-button:active .image-font-letter,
.gallery-button:active .image-font-fallback,
.gallery-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;
}

.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;
}