@font-face {
  font-family: "sans-poster-bold";
  src: url("assets/SansPosterBold 2025-02-17 18_38_30.ttf");
  font-weight: normal;
  font-style: normal;
}
@media (max-width: 600px) {
  .page-links img {
    width: clamp(8vw, 10vw, 60px);
  }
}
body {
  color: #fffcf5;
  background-color: #222;
  font-family: "sans-poster-bold", sans-serif;
  margin: 0;
  padding: 2vw;
  box-sizing: border-box;
  text-align: center;
}

h1 {
  font-size: clamp(3rem, 7vw, 8rem);
  margin: 2vh 0 3vh;
}
hr {
  opacity: 0.25;
  margin: 7vh;
}
.header-links {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: min(4vw, 48px);
  margin-bottom: 3vh;
}
.header-links img {
  max-width: 100%;
  height: auto;
  flex-shrink: 1;
  width: min(20vw, 80px);
}

.social-links img {
  width: clamp(32px, 4vw, 48px);
  height: auto;
  display: block;
  transition: all 300ms ease-in-out;
}

.page-links img {
  width: clamp(64px, 8vw, 120px);
  height: auto;
  display: block;
  margin: 0;
  padding: 0;
  transition: all 200ms ease-in-out;
  transform-origin: bottom center;
}
.social-links img:hover {
  filter: saturate(100%) invert(63%) sepia(51%) saturate(5899%)
    hue-rotate(78deg) brightness(101%) contrast(84%);
  transform: scale(1.2);
}
.page-links img:hover {
  filter: saturate(100%) invert(63%) sepia(51%) saturate(5899%)
    hue-rotate(78deg) brightness(101%) contrast(84%);
}
.live-button {
  transition: all 200ms ease-in-out;
  transform-origin: bottom center;
}
.live-button:hover {
  transform: scale(1.1);
}
.about-button {
  transition: all 200ms ease-in-out;
  transform-origin: bottom center;
}
.about-button:hover {
  transform: scale(1.1);
}
.fanclub-button {
  width: clamp(74px, 8vw, 130px);
  align-self: flex-end;
  transform: scale(1.15) translateY(8%);
  transform-origin: bottom center;
}
.fanclub-button:hover {
  transform: scale(1.2) translateY(8%);
}
.shop-button {
  transition: all 200ms ease-in-out;
  transform-origin: bottom center;
}
.shop-button:hover {
  transform: scale(1.1);
}
.contact-button {
  transition: all 200ms ease-in-out;
  transform-origin: bottom center;
}
.contact-button:hover {
  transform: scale(1.1);
}
.ccl-button {
  width: clamp(74px, 8vw, 130px);
  align-self: flex-end;
  transform: scale(1.5) translateY(50%) translateX(10%);
  transform-origin: bottom center;
}
.ccl-button:hover {
  transform: scale(1.4) translateY(40%) translateX(10%);
}

.about-section {
  text-align: left;
  padding: 6vw;
  font-size: clamp(1rem, 2vw, 3rem);
  line-height: 1.5;
}
.skating-polly-about-pic {
  display: block;
  margin: 0 auto;
}
.first-letter {
  font-size: larger;
}
.bio-section-left {
  display: grid;
  grid-template-columns: 60% 40%;
}
.bio-section-left img {
  justify-content: right;
  margin-right: 0;
  padding-right: 0;
}
.bio-section-right {
  display: grid;
  grid-template-columns: 40% 60%;
  text-align: right;
}
.bio-section-right img {
  justify-content: left;
  padding-left: 0;
  margin-left: 0;
}

.contact-heading {
  font-size: clamp(2rem, 4vw, 5rem);
  margin-top: 10vh;
}

.contact-page a {
  color: #fffcf5;
  transition: all 200ms ease-in-out;
}
.contact-page a:hover {
  transform: scale(1.4);
  filter: saturate(100%) invert(63%) sepia(51%) saturate(5899%)
    hue-rotate(78deg) brightness(101%) contrast(84%);
}

.contact-list {
  list-style: none;
  display: block;
  line-height: 3;
  padding: 5vh;
}
.contact-link {
  transition: all 200ms ease-in-out;
}
.contact-link:hover {
  transform: scale(1.2);
}
.google-contact-form {
  width: 50%;
  height: 900px;
}