html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background: #ffffff;
}

.shiny {
  --shiny-top-offset: 3vh;
  --shiny-image-size: min(90vw, 700px);
  --shiny-background-image-ratio: 0.539;
  --shiny-background-color: #f8d932;

  position: relative;
  min-height: 100vh;
}

.shiny__content {
  position: absolute;
  top: var(--shiny-top-offset);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 1200px);
}

.shiny__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(
    var(--shiny-top-offset) +
    (var(--shiny-image-size) * var(--shiny-background-image-ratio))
  );
  background: var(--shiny-background-color);
  transition: background-color 180ms ease;
}

.shiny__image {
  display: block;
  width: var(--shiny-image-size);
  max-width: 100%;
  height: auto;
}

.shiny__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1em;
  width: 100%;
  margin-top: clamp(-70px, -5vw, -12px);
  text-align: center;
}

.shiny__link {
  margin: 0;
  color: #000000;
  font-size: clamp(4.5rem, 18vw, 9rem);
  line-height: 0.88;
  text-decoration: none;
  transition: color 180ms ease;
}

.shiny__link--demo:hover,
.shiny__link--demo:focus-visible{
  color: #e221a3;
}

a.shiny__link:focus-visible {
  outline: none;
}

.shiny:has(.shiny__link--demo:hover),
.shiny:has(.shiny__link--demo:focus-visible) {
  --shiny-background-color: #e221a3;
}

.shiny:has(.shiny__link--gig:hover) {
  --shiny-background-color: #000000;
}

.shiny--static .shiny__background {
  transition: none;
}

.passion-one-regular {
  font-family: "Passion One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.passion-one-bold {
  font-family: "Passion One", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.passion-one-black {
  font-family: "Passion One", sans-serif;
  font-weight: 900;
  font-style: normal;
}