@font-face {
  font-family: "Plain Germanica";
  src: url("/fonts/PlainGermanica.woff2") format("woff2");
}

@font-face {
  font-family: "Varela Round";
  src: url("/fonts/VarelaRound-Regular.woff2") format("woff2");
}

@keyframes growAndJiggle {
  0%,
  10% {
    transform: scale(1.05) rotate(2deg);
  }
  20% {
    transform: scale(1.1) rotate(-2deg);
  }
  30% {
    transform: scale(1.1) rotate(2deg);
  }
  40% {
    transform: scale(1.15) rotate(-1deg);
  }
  50% {
    transform: scale(1.15) rotate(1deg);
  }
  60% {
    transform: scale(1.2) rotate(-1deg);
  }
  70% {
    transform: scale(1.2) rotate(1deg);
  }
  80% {
    transform: scale(1.2) rotate(-0.5deg);
  }
  90% {
    transform: scale(1.2) rotate(0.5deg);
  }
  100% {
    transform: scale(1.2) rotate(0deg);
  }
}

body {
  --brand-red: #d92400;
  --brand-white: #fff4ed;
  --brand-black: #1a1f25;
  --germanica-font: "Plain Germanica", Helvetica, sans-serif;
  --varela-font: "Varela Round", Helvetica, sans-serif;
  background-color: var(--brand-white);
  font-family: var(--varela-font);
}

.drop-cap-h1 {
  font-size: 2em;
  font-family: var(--germanica-font);
}
.drop-cap-h1::first-letter {
  font-family: var(--germanica-font);
  font-size: 3em;
  color: var(--brand-red);
}

.header {
  display: flex;
  width: 100%;
  min-height: calc(16rem);
  box-sizing: border-box;
}

.header-logo-container {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0 1rem 1rem 1rem;
  width: auto;
  box-sizing: border-box;
}

header img.logo {
  max-height: calc(14rem);
  width: auto;
}

header a {
  position: relative;
  display: block;
  height: 100%;
  text-decoration: none;
  color: black;
}

header p {
  margin: -1.5rem 0 0 5.5rem;
}

.main-body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 97vh;
  width: 99vw;
  box-sizing: border-box;
  position: relative;
}

.main-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  order: 1;
  flex: 1;
  box-sizing: border-box;
  min-height: 0;
}

.main-content {
  flex: 4;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

left-sidebar {
  flex: 1.5;
  box-sizing: border-box;
  padding: 1rem;
  min-width: 14rem;
  max-width: 0;
}

.left-sidebar-text {
  font-size: 1.5rem;
  text-align: justify;
  hyphens: auto;
  text-justify: inter-character;
}

.left-sidebar-text::first-letter {
  font-family: var(--germanica-font);
  font-size: 3rem;
  color: var(--brand-red);
}

right-sidebar {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  flex: 1;
  max-width: calc(12rem);
  box-sizing: border-box;
}

.right-sidebar-guest-book {
  display: flex;
  flex-direction: column;
  padding-bottom: 2rem;
}

.right-sidebar-small-text {
  font-size: 1rem;
  text-align: center;
  color: var(--brand-black);
  padding: 0.75rem;
  padding-left: 1.5rem;
  margin: 0;
}
.right-sidebar-big-text {
  font-family: var(--germanica-font);
  font-size: 4rem;
  text-align: center;
  color: var(--brand-red);
  padding: 0;
  margin: calc(-0.5rem) 0 0 0;
}

.right-sidebar-guest-link {
  text-decoration: none;
}

.navigation-bar {
  position: absolute;
  left: calc(35%);
  margin-top: 3rem;
  padding: 1.5rem;
  width: 100%;
  display: flex;
  gap: 1rem;
}

.navigation-bar a {
  font-family: var(--germanica-font);
  color: var(--brand-red);
  font-size: 2rem;
  transform-origin: center;
}
.navigation-bar a::first-letter {
  font-size: 3rem;
}

.navigation-bar a:hover {
  animation: growAndJiggle 1s ease-in-out forwards;
}

embla-bluesky-carousel {
  display: block;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  padding: 1rem;
  position: relative;
}

embla-bluesky-carousel .embla__viewport {
  overflow: hidden;
  width: 100%;
  display: flex;
  align-items: center;
}

embla-bluesky-carousel .embla__container {
  display: flex;
  backface-visibility: hidden;
  gap: 1rem;
  align-items: center;
}

embla-bluesky-carousel .embla__slide {
  flex: 0 0 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  box-sizing: border-box;
  padding: 0.5rem;
}

@media (min-width: 768px) {
  embla-bluesky-carousel .embla__slide {
    flex: 0 0 calc(33.333% - 0.667rem);
  }
}

embla-bluesky-carousel .embla__slide img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

embla-bluesky-carousel .embla__button {
  position: absolute;
  z-index: 1;
  cursor: pointer;
  border: none;
  background: none;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
}

embla-bluesky-carousel .embla__button:hover {
  animation: growAndJiggle 1s ease-in-out forwards;
}

embla-bluesky-carousel .embla__button--prev {
  left: 0.5rem;
  top: calc(50% - 1.25rem);
}

embla-bluesky-carousel .embla__button--next {
  right: 0.5rem;
  top: calc(50% - 1.25rem);
}

embla-bluesky-carousel .embla__button--prev svg {
  transform: scaleX(-1);
}

embla-bluesky-carousel .bluesky-carousel-loading,
embla-bluesky-carousel .bluesky-carousel-empty,
embla-bluesky-carousel .bluesky-carousel-error {
  text-align: center;
  padding: 2rem;
}

/* Bluesky art gallery */
bluesky-art-gallery {
  display: block;
  width: 100%;
  max-height: 70vh;
  overflow-y: auto;
}

.gallery-loading,
.gallery-empty,
.gallery-error {
  text-align: center;
  padding: 2rem;
  font-size: 1.2rem;
  color: var(--brand-black);
  font-family: var(--varela-font);
}

.gallery-loading::after {
  content: "…";
  animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
  0% {
    content: "";
  }
  25% {
    content: ".";
  }
  50% {
    content: "..";
  }
  75% {
    content: "...";
  }
}

.gallery-error {
  color: var(--brand-red);
}

.gallery-grid {
  column-count: 3;
  column-gap: 1rem;
  width: 100%;
}

@media (max-width: 900px) {
  .gallery-grid {
    column-count: 2;
  }
}

@media (max-width: 540px) {
  .gallery-grid {
    column-count: 1;
  }
}

.gallery-item {
  break-inside: avoid;
  margin-bottom: 1rem;
  overflow: hidden;
  border-radius: 4px;
}

.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
}
.not-found-text {
  flex: 4;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.not-found-text p {
  margin: 0;
  font-size: 1rem;
}

.not-found-text h1 {
  font-family: var(--germanica-font);
  font-size: 3rem;
  color: var(--brand-red);
  margin: 0;
}

.not-found-text a {
  font-family: var(--germanica-font);
  letter-spacing: 0.1rem;
  color: var(--brand-red);
  cursor: pointer;
  text-decoration: underline;
  padding: 1rem 0.25rem 0.25rem 0;
}

volfboy-loader {
  display: block;
  width: 100%;
}

.volfboy-loader-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  min-height: 120px;
}

.loader-svg {
  max-height: 500px;
  max-width: 100%;
  width: auto;
}

.loader-svg.shimmer {
  animation: loader-shimmer 2.5s ease-in-out infinite;
}

@keyframes loader-shimmer {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.gallery-grid,
.embla {
  animation: content-fade-in 0.4s ease-in-out;
}

@keyframes content-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}