:root {
  --spring-easing: linear(0, -0.1604 1.33%, -0.2738 2.73%, -0.3123 3.45%, -0.3397, -0.3554 4.97%, -0.3589, -0.3596 5.76%, -0.3564 6.29%, -0.3483 6.84%, -0.3175 7.99%, -0.2669 9.22%, -0.1949 10.57%, -0.0341 13.02%, 0.3476 18.17%, 0.514 20.55%, 0.6702 23.06%, 0.7971 25.47%, 0.9043 27.99%, 0.9484, 0.9868 30.55%, 1.0198 31.87%, 1.0472 33.22%, 1.0696 34.62%, 1.0869 36.07%, 1.1001 37.73%, 1.1078 39.5%, 1.1099 41.4%, 1.1065 43.49%, 1.1006 45.17%, 1.0915 47.09%, 1.0432 55.35%, 1.0222 59.58%, 1.0056 64.24%, 0.9956 69.13%, 0.9919 73.19%, 0.9912 77.92%, 0.9996);
  --ease: cubic-bezier(0.08, 0.82, 0.19, 1);
  --card-width: 12;
  --card-radius: 0.8;
  --card-border-width: 0.5;
  --wrapper-size: 1200px;
  --bg-color: hsl(5, 100%, 13%);
  --dark-bg-color: hsl(220, 6%, 13%);
  --text-color: #DDD;
}
@font-face {
  font-family: 'Voltaire';
  src: local('fonts/Voltaire'), url('fonts/Voltaire.woff2') format('woff2'), url('fonts/Voltaire.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Limelight';
  src: local('Limelight Regular'), local('Limelight-Regular'), url('fonts/subset-Limelight-Regular.woff2') format('woff2'), url('fonts/subset-Limelight-Regular.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  position: relative;
}
html {
  font-size: clamp(15px, calc(12px + 1vw), 22px);
  scroll-behavior: smooth;
  width: 100vw;
}
body {
  font-family: Voltaire, Tahoma, sans-serif;
  background: var(--bg-color);
  color: var(--text-color);
  margin: 0;
  width: 100%;
  overflow-x: clip;
  overflow-y: scroll;
}
body::after {
  position: absolute;
  content: "";
  pointer-events: none;
  inset: 0;
  opacity: 0.1;
  background: url("icons/cardsuits.svg");
  background-size: 6rem;
  background-attachment: fixed;
  mix-blend-mode: soft-light;
}
a {
  display: inline-block;
  color: hsl(from var(--bg-color) h s 80%);
  transition: color, transform;
  transition-duration: 0.6s;
  transition-timing-function: var(--ease);
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}
a:hover,
a:focus,
a:active,
a.active {
  color: white;
  transform: scale(1.05);
}
h1,
h2,
h3 {
  font-family: Limelight;
  scale: 1 1.3;
}
h2 {
  margin: 0;
  font-variant-caps: small-caps;
  font-size: 2.6rem;
}
h3 {
  font-variant-caps: small-caps;
  font-size: 2.25rem;
  margin: 0;
}
h4 {
  margin: 0;
  font-variant-caps: small-caps;
  font-size: 1.5rem;
  line-height: 1;
  text-wrap: balance;
}
.links {
  z-index: 2;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}
.links img {
  width: 2em;
  height: 2em;
  transition: filter 0.2s;
  filter: invert(90%) drop-shadow(0 0 0.5rem hsla(0, 0%, 0%, 0.5));
}
.wrapper {
  display: flex;
  flex-flow: inherit;
  justify-content: inherit;
  align-items: inherit;
  align-content: inherit;
  width: 100vw;
  width: min(var(--wrapper-size), calc(100vw - 2rem));
  margin-inline: auto;
}
/*************
*  SECTIONS  *  
*************/
section {
  position: relative;
  scroll-margin-top: 2rem;
  width: 100%;
  padding-block: 3rem;
  padding-inline: 1rem;
}
section > * {
  z-index: 2;
}
section.hidden:nth-child(even) .description {
  transform: translateX(-30px);
  opacity: 0.1;
}
section.hidden:nth-child(odd) .description {
  transform: translateX(30px);
  opacity: 0.1;
}
section:nth-of-type(odd) {
  background: var(--dark-bg-color);
}
/**********
*  CARDS  *
**********/
.card-box {
  font: inherit;
  color: var(--text);
  appearance: none;
  background: transparent;
  border: transparent;
  perspective: clamp(300px, 50vw, 600px);
  width: calc(var(--card-width)*1rem);
  height: calc(var(--card-width)*1.5rem);
  transform-style: preserve-3d;
  transition: transform;
  transition-duration: 0.6s;
  transition-timing-function: var(--ease);
}
.card-box .card {
  transform-style: preserve-3d;
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  z-index: 6;
  transition: transform;
  transition-duration: 0.9s;
  transition-timing-function: var(--spring-easing);
  border-radius: calc(var(--card-radius)*1rem);
  box-shadow: 0 0 0.75rem rgba(0, 0, 0, 0.5);
}
.card-box .card .card-front,
.card-box .card .card-back {
  position: absolute;
  inset: 0;
  border-radius: calc(var(--card-radius)*1rem);
  width: 100%;
  height: 100%;
  margin: 0;
}
.card-box .card .card-back {
  background-color: hsl(from var(--bg-color) h s 25%);
  background-image: url("data:image/svg+xml,<svg id='patternId' width='250%' height='250%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='32' height='32' patternTransform='scale(1) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='hsla(0, 100%, 23%, 1)'/><path d='M37.657 10.343l-4.243 4.243m-2.828 2.828l-4.243 4.243m11.314 0l-4.243-4.243m-2.828-2.828l-4.243-4.243m-20.686 0l-4.243 4.243m-2.828 2.828l-4.243 4.243m11.314 0l-4.243-4.243m-2.828-2.828l-4.243-4.243'  stroke-linecap='square' stroke-width='2' stroke='hsla(0, 0%, 0%, .5)' fill='none'/><path d='M16-8v6m0 4v6m8-8h-6m-4 0H8m8 24v6m0 4v6m8-8h-6m-4 0H8'  stroke-linecap='square' stroke-width='2' stroke='hsla(0, 0%, 0%, .5)' fill='none'/></pattern></defs><rect width='200%' height='200%' transform='translate(0,-64)' fill='url(%23a)'/></svg>");
  transform: rotateY(180deg);
  font-size: 1.5rem;
  line-height: 1em;
  font-weight: bold;
  font-variant: all-small-caps;
  white-space: pre-line;
  text-wrap: balance;
  padding-inline: 1rem;
  backface-visibility: hidden;
  outline: solid calc(var(--card-border-width)*1rem) var(--text-color);
  outline-offset: calc(-0.9rem * var(--card-border-width));
}
.card-box.flipped .card {
  transform: rotateY(180deg);
}
.card-box:hover,
.card-box:focus {
  cursor: pointer;
  z-index: 10!important;
  transform: scale(1.05);
}
.card-box:hover .card,
.card-box:focus .card {
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.75);
}
@media (prefers-reduced-motion: reduce) {
  .card-box:focus .card-back {
    visibility: visible;
    animation: unset;
  }
  .card {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    border-radius: calc(var(--card-radius)*1em);
    outline: solid var(--card-border-width) var(--text-color);
    outline-offset: calc(-1 * var(--card-border-width));
  }
  .card .card-front {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .card .card-back {
    position: absolute;
    inset: 0;
    margin: 0;
    background: rgba(0, 0, 0, 0.6);
    white-space: pre-line;
    width: 100%;
    height: 100%;
    visibility: hidden;
  }
}
/***********
*  HEADER  *
/***********/
header {
  position: fixed;
  width: 100%;
  z-index: 1000;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  align-items: center;
  font-size: clamp(1em, 3vw, 1.5rem);
  padding: 0.5rem;
  filter: drop-shadow(0 0 0.1rem black) drop-shadow(0 0 0.3rem black) drop-shadow(0 0 1rem black);
}
header .sections {
  color: white;
  text-align: center;
  flex-grow: 1;
  max-width: 1000px;
}
header #logo {
  flex-grow: 2;
}
header #logo svg {
  height: 2.5em;
  width: 2.5em;
}
header #logo svg * {
  fill: white!important;
}
/*********
*  HERO  *
*********/
@keyframes fadeBg {
  from {
    background-position: 40% 20%;
  }
  to {
    background-position: center top;
  }
}
#hero {
  width: 100%;
  height: 95vh;
  background: url("img/all.webp");
  background-size: cover;
  background-repeat: no-repeat;
  animation: 10s var(--ease) forwards fadeBg;
  filter: saturate(160%);
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-end;
  text-align: center;
  text-shadow: 0 0 1vw black;
}
@media only screen and (max-width: 768px) {
  #hero {
    height: 60vh;
  }
}
@keyframes fadeUp {
  from {
    translate: 0 1rem;
    opacity: 0;
  }
}
#titles {
  width: 100%;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  gap: 1rem;
  animation-name: fadeUp;
  animation-duration: 5s;
  animation-timing-function: var(--ease);
  animation-fill-mode: forwards;
  transform: rotate(-3deg) skew(-10deg);
}
#titles .links {
  transform: skew(10deg);
}
#titles h2 {
  padding: 0;
  font-size: 1.5rem;
  font-family: Voltaire;
}
#titles #title {
  font-variant: small-caps;
  margin: 0;
  font-size: clamp(3rem, 12vw, 6rem);
  line-height: 0.7;
  scale: 1 1.3;
  white-space: pre-wrap;
  font-family: Limelight,Impact;
}
/************************
*  ABOUTUS & SHOW LIST  *
************************/
.card-spread > *:nth-child(1) {
  z-index: 5;
}
@media (width > 640px) {
  .card-spread > *:nth-child(1) {
    margin-top: 4rem;
    rotate: -15deg;
  }
}
@media (width <= 640px) {
  .card-spread > *:nth-child(1) {
    margin-inline: -2rem;
    margin-top: 0rem;
    rotate: -16deg;
  }
}
.card-spread > *:nth-child(2) {
  z-index: 4;
}
@media (width > 640px) {
  .card-spread > *:nth-child(2) {
    margin-top: 1rem;
    rotate: 0deg;
  }
}
@media (width <= 640px) {
  .card-spread > *:nth-child(2) {
    margin-inline: -2rem;
    margin-top: 6.5rem;
    rotate: 0deg;
  }
}
.card-spread > *:nth-child(3) {
  z-index: 3;
}
@media (width > 640px) {
  .card-spread > *:nth-child(3) {
    margin-top: 0rem;
    rotate: 15deg;
  }
}
@media (width <= 640px) {
  .card-spread > *:nth-child(3) {
    margin-inline: -2rem;
    margin-top: 13rem;
    rotate: 16deg;
  }
}
.card-spread > *:nth-child(4) {
  z-index: 2;
}
@media (width > 640px) {
  .card-spread > *:nth-child(4) {
    margin-top: 1rem;
    rotate: 30deg;
  }
}
@media (width <= 640px) {
  .card-spread > *:nth-child(4) {
    margin-inline: -2rem;
    margin-top: 19.5rem;
    rotate: 32deg;
  }
}
.card-spread > *:nth-child(5) {
  z-index: 1;
}
@media (width > 640px) {
  .card-spread > *:nth-child(5) {
    margin-top: 4rem;
    rotate: 45deg;
  }
}
@media (width <= 640px) {
  .card-spread > *:nth-child(5) {
    margin-inline: -2rem;
    margin-top: 26rem;
    rotate: 48deg;
  }
}
.card-spread > *:nth-child(6) {
  z-index: 0;
}
@media (width > 640px) {
  .card-spread > *:nth-child(6) {
    margin-top: 9rem;
    rotate: 60deg;
  }
}
@media (width <= 640px) {
  .card-spread > *:nth-child(6) {
    margin-inline: -2rem;
    margin-top: 32.5rem;
    rotate: 64deg;
  }
}
#aboutus,
#show-list {
  width: 100%;
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  gap: 2rem;
  --card-width: 9;
}
@media only screen and (max-width: 640px) {
  #aboutus,
  #show-list {
    --card-width: 7;
  }
}
#aboutus .card-spread,
#show-list .card-spread {
  display: flex;
  flex-flow: row nowrap;
}
/**********
*  SHOWS  *
**********/
#show-list h2 {
  text-align: center;
}
#shuffle,
#technotopie,
#sitcom,
#avantpremiere {
  --card-width: 14;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  column-gap: 4rem;
  row-gap: 1rem;
}
#shuffle a,
#technotopie a,
#sitcom a,
#avantpremiere a {
  font-size: 2rem;
}
#shuffle h2,
#technotopie h2,
#sitcom h2,
#avantpremiere h2 {
  width: 100vw;
}
#shuffle .card-box,
#technotopie .card-box,
#sitcom .card-box,
#avantpremiere .card-box {
  height: calc(var(--card-width) * 1.4145rem);
}
#shuffle .card-box .card,
#technotopie .card-box .card,
#sitcom .card-box .card,
#avantpremiere .card-box .card {
  rotate: 2deg;
}
#shuffle:nth-child(even),
#technotopie:nth-child(even),
#sitcom:nth-child(even),
#avantpremiere:nth-child(even) {
  flex-flow: row-reverse wrap;
}
#shuffle:nth-child(even) .card-box .card,
#technotopie:nth-child(even) .card-box .card,
#sitcom:nth-child(even) .card-box .card,
#avantpremiere:nth-child(even) .card-box .card {
  rotate: -2deg;
}
#shuffle .description,
#technotopie .description,
#sitcom .description,
#avantpremiere .description {
  transition: transform 2s, opacity 1s;
  transition-timing-function: var(--ease);
  max-width: 27rem;
  display: flex;
  flex-flow: column nowrap;
  justify-content: start;
  white-space: pre-line;
  gap: 0.5rem;
}
#shuffle .description .next-date,
#technotopie .description .next-date,
#sitcom .description .next-date,
#avantpremiere .description .next-date,
#shuffle .description a,
#technotopie .description a,
#sitcom .description a,
#avantpremiere .description a {
  align-self: center;
}
@media only screen and (max-width: 768px) {
  #shuffle,
  #technotopie,
  #sitcom,
  #avantpremiere {
    --card-width: 10;
  }
  #shuffle .description,
  #technotopie .description,
  #sitcom .description,
  #avantpremiere .description {
    order: 10;
  }
}
/************
*  CONTACT  *
************/
#infos {
  display: flex;
  flex-flow: column nowrap;
}
#infos h2 {
  text-align: center;
}
#infos h3 {
  padding-top: 1em;
  text-align: center;
}
#infos .container {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
#infos .container h2,
#infos .container h3 {
  flex-basis: 100vw;
}
#infos .container > *:not(h2,h3) {
  flex: 1;
  text-align: center;
}
#infos .container .links {
  margin-top: 1rem;
}
#infos .container img.round {
  width: 6rem;
  height: 6rem;
}
#infos .container img.esquif {
  width: 8rem;
  height: 192rem/85;
}
/***********
*  FOOTER  *
***********/
footer.wrapper {
  display: flex;
  flex-flow: row nowrap;
  font-size: 0.8em;
  justify-content: space-between;
  align-items: center;
}
footer.wrapper p {
  white-space: pre-line;
}
/**********
*  LINKS  *
***********/
#links .wrapper {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  margin: auto;
  min-height: 80vh;
  gap: 1rem;
  padding-top: 2rem;
  padding-bottom: 6rem;
}
#links .wrapper #titles {
  padding-block: 2rem;
}
#links .wrapper .button {
  padding-block: 1rem;
  padding-inline: 2rem;
  width: min(25rem, 70vw);
  border: 4px solid black;
  box-shadow: 0.5rem 0.5rem 1rem rgba(0, 0, 0, 0.5);
  background: var(--bg-color);
  border-radius: 1rem;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  gap: 2rem;
}
#links .wrapper .button:hover img,
#links .wrapper .button:focus img {
  filter: invert(100%);
}
#links .wrapper .button:hover .logo,
#links .wrapper .button:focus .logo {
  background: white;
}
#links .wrapper .button > .logo,
#links .wrapper .button > img {
  width: 2.5rem;
  height: 2.5rem;
}
#links .wrapper .button .logo {
  background: #CDCDCD;
  border-radius: 0.25rem;
  margin: 0.5rem;
  transition: background 0.2s;
}
#links .wrapper .button .logo img {
  width: 2rem;
  height: 2rem;
  padding: 0.25rem;
}