/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
.home-container {
  height: 586.24px;
  overflow: clip visible;
}

.home-container .jesse {
  justify-content: flex-end;
  width: 100%;
  display: flex;
}

.home-container .jesse .jesse-image {
  background-image: url("/_canopie/static/images/jesse-homepage.webp");
  background-position: 30%;
  background-size: cover;
  width: calc(100% - 580px);
  height: 100%;
}

.home-container .banner-container {
  width: 640px;
  height: 640px;
  position: absolute;
  top: 0;
  left: 0;
}

.home-container .banner-container .banner {
  aspect-ratio: 13 / 4;
  z-index: 20;
  background-repeat: no-repeat;
  background-size: contain;
  width: 130%;
  position: absolute;
  top: 0;
  left: 0;
}

.home-container .banner-container .banner.morning-star {
  clip-path: polygon(1.5% 34%, 0% 85%, 100% 40%, 96% 0%);
  background-image: url("/_canopie/static/images/morning-star-banner.webp");
  max-width: calc(100vw - 35%);
  top: 2%;
  left: 35%;
}

.home-container .banner-container .banner.music-club {
  clip-path: polygon(6.5% 30%, 5% 70%, 83% 80%, 84% 38%);
  background-image: url("/_canopie/static/images/music-club-banner.webp");
  max-width: calc(100vw - 4%);
  top: 51%;
  left: 4%;
}

@media (max-width: 768px) {
  .home-container {
    height: 410.368px;
  }

  .home-container .jesse .jesse-image {
    background-position: 14%;
    width: calc(100% - 348px);
  }

  .home-container .banner-container {
    width: 448px;
    height: 448px;
  }
}

@media (max-width: 640px) {
  .home-container {
    height: 91.6vw;
  }

  .home-container .jesse {
    display: none;
  }

  .home-container .banner-container {
    width: 100vw;
    height: 100vw;
  }

  .home-container .banner-container .banner {
    width: 100%;
  }

  .home-container .banner-container .banner.morning-star {
    width: 95%;
    max-width: calc(100vw - 3%);
    top: 7%;
    left: 3%;
  }

  .home-container .banner-container .banner.music-club {
    max-width: calc(100vw - 11%);
    top: 57%;
    left: 11%;
  }
}

main section {
  width: 100%;
  padding: calc(var(--spacing, .25rem) * 4);
  background-image: url("/_canopie/static/images/mats/mat1.webp");
  background-position-x: right;
  background-size: cover;
  position: relative;
}

main section#home {
  display: none;
}

.page-title {
  transform-origin: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
}

.section-vids .page-title {
  background-image: url("/_canopie/static/images/titles/vids.webp");
  width: 280px;
  height: 80px;
}

.section-music .page-title {
  transform-origin: top;
  background-image: url("/_canopie/static/images/titles/music.webp");
  width: 280px;
  height: 100px;
  transform: rotate(15deg) translateY(30px);
}

.youtube-icon {
  cursor: pointer;
  z-index: 1;
  background-color: #0000;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 68 48\"><path d=\"M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z\" fill=\"red\"/><path d=\"M45 24 27 14v20\" fill=\"white\"/></svg>");
  border: none;
  width: 68px;
  height: 48px;
  transition: filter .2s cubic-bezier(0, 0, .2, 1);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}

.section-vids .video-container {
  margin: auto;
  margin-bottom: calc(var(--spacing, .25rem) * 8);
  max-width: 900px;
  display: flex;
}

.section-vids .video-container:nth-of-type(odd) {
  justify-content: flex-end;
}

.menu {
  aspect-ratio: 1;
  width: 100%;
  position: relative;
}

.menu .menu-bg {
  top: calc(var(--spacing, .25rem) * 0);
  left: calc(var(--spacing, .25rem) * 0);
  background-image: url("/_canopie/static/images/menu/triangles-rainbow.webp");
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 100%;
  position: absolute;
}

.menu .menu-content {
  top: calc(var(--spacing, .25rem) * 0);
  left: calc(var(--spacing, .25rem) * 0);
  width: 100%;
  height: 100%;
  position: absolute;
}

.menu .menu-content .link {
  cursor: pointer;
  color: #0000;
  background-repeat: no-repeat;
  background-size: contain;
  display: block;
  position: absolute;
}

.menu .menu-content .link:hover {
  filter: brightness(2.2) contrast(1.1);
}

.menu .menu-content .link.band {
  clip-path: polygon(11% 61%, 72% 0, 91% 32%, 66% 44%, 29% 87%);
  background-image: url("/_canopie/static/images/menu/band.webp");
  width: 25%;
  height: 17%;
  top: 38%;
  left: 31%;
}

.menu .menu-content .link.vids {
  clip-path: polygon(-11% 92%, 77% -4%, 96% 26%, 67% 62%, 13% 115%);
  background-image: url("/_canopie/static/images/menu/vids.webp");
  width: 20%;
  height: 12%;
  top: 44%;
  left: 39%;
}

.menu .menu-content .link.music {
  clip-path: polygon(7% 73%, 72% 0, 86% 0%, 100% 26%, 69% 44%, 16% 100%);
  background-image: url("/_canopie/static/images/menu/music.webp");
  width: 25%;
  height: 17%;
  top: 48%;
  left: 41%;
  transform: rotate(-5deg);
}

.menu .menu-content .link.live {
  clip-path: polygon(0% 58%, 62% -10%, 81% 32%, 46% 64%, 3% 117%);
  background-image: url("/_canopie/static/images/menu/live.webp");
  width: 20%;
  height: 9%;
  top: 29%;
  left: 15%;
}

.menu .menu-content .link.contact {
  clip-path: polygon(-17% 41%, 103% 0%, 100% 32%, 62% 46%, 6% 82%);
  background-image: url("/_canopie/static/images/menu/contact.webp");
  width: 20%;
  height: 16%;
  top: 53%;
  left: 57%;
}

section#band {
  --header-angle: 0deg;
  --header-width: 280px;
  --header-height: 100px;
  --header-computed-height: calc((var(--header-height) * cos(var(--header-angle))) +
		var(--header-width) *
		sin(var(--header-angle)));
  --header-computed-width: calc((var(--header-width) * cos(var(--header-angle))) +
		var(--header-height) *
		sin(var(--header-angle)));
  padding-top: calc(var(--header-computed-height) + 1rem);
  padding-inline: calc(var(--spacing, .25rem) * 4);
}

section#band .big-block {
  height: calc(var(--spacing, .25rem) * 0);
}

@media (min-width: 40rem) {
  section#band .big-block {
    height: calc(300px - var(--header-computed-height));
  }
}

@media (min-width: 48rem) {
  section#band .big-block {
    height: calc(445px - var(--header-computed-height));
  }
}

section#band .big-block {
  width: calc(var(--spacing, .25rem) * 0);
}

@media (min-width: 40rem) {
  section#band .big-block {
    width: 100%;
  }
}

@media (min-width: 48rem) {
  section#band .big-block {
    width: 630px;
  }
}

section#band .big-block {
  float: left;
}

section#band .band-header {
  left: calc(var(--spacing, .25rem) * 4);
}

@media (min-width: 40rem) {
  section#band .band-header {
    left: 440px;
  }
}

@media (min-width: 48rem) {
  section#band .band-header {
    left: 630px;
  }
}

section#band .band-header {
  content: "";
  height: var(--header-height);
  width: var(--header-width);
  transform-origin: center;
  transform: translateY(calc((var(--header-computed-height) - var(--header-height)) / 2))	translateX(calc((var(--header-computed-width) - var(--header-width)) / 2))	rotate(var(--header-angle));
  z-index: 10;
  background-image: url("/_canopie/static/images/titles/band.webp");
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 1rem;
}