@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap&family=Prompt:ital,wght@0,400;1,600&display=swap');
.anton-regular {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.prompt-regular {
  font-family: "Prompt", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.prompt-semibold-italic {
  font-family: "Prompt", sans-serif;
  font-weight: 600;
  font-style: italic;
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
    font-family: "Prompt", monospace, 'Arial', sans-serif;
}

.slide {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: black;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  position: relative;
  display: flex;             /*turns this element into a flex container. direct children become flex items*/
  flex-direction: column;    /*main axis of the flex container runs top-to-bottom. children stack vertically*/
  align-items: flex-start;          /*CROSS axis alignment*/
  justify-content: center;          /*MAIN axis alignment*/
}

        .slide h1,
        .slide-inner h1 {
            font-size: clamp(1.5rem, 5vw, 3rem);
            font-family: "Anton", monospace, 'Arial', sans-serif;
            color: white;
            text-align: center;
        }

        .slide p,
        .slide-inner p{
            font-size: clamp(1rem, 2vw, 1.5rem);
            font-family: "Prompt", monospace, 'Arial', sans-serif;
            color: white;
            text-align: center;
            margin-top: 16px;
        }
        .slide-inner p.small-text{
            font-size: clamp(0.6rem, 1.2vw, 0.9rem);
        }
        .slide-inner p.scrollable{
            overflow-y: auto;
            align-items: flex-start;
        }

        .slide p.left,
        .slide-inner p.left{
            text-align: left;
        }
        .slide-inner.right h1,
        .slide-inner.right p,
        .slide-price p{
            text-align: right;
        }

        .slide a {
            font-size: clamp(1rem, 2.5vw, 1.5rem);
            color: rgb(255, 154, 222);
            margin-top: 20px;
        }

        .slide a:hover {
            font-size: clamp(1rem, 2.5vw, 1.5rem);
            color: #fff;
            background-color: rgba(255, 215, 0, 0.2);
            margin-top: 20px;
            transition: background-color 0.25s ease;
        }

        .slide a:active {
            background-color: #fff;
        }

.slide-inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 1% 5% 1%;
}

.slide-price {
    padding-left: 15%
}

.slide-bios{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
}

.slide-bios .slide-inner.right{
    align-items: flex-end;
}

.align-bottom {
    position: absolute;
    bottom: 3%;
    justify-content: flex-end;
    text-align: center;
    padding-bottom: 5%;
}
.align-center {
    align-items: center;
}

.castmembers{
  position:relative;
  overflow: hidden;
}
.castmembers-link{
  position: absolute;
  border-radius: 50%;
  display: block;
  cursor: pointer;
  transform: translate(-50%, -50%);
}
.highlight-ring {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid transparent;
}
.castmembers-link:hover .highlight-ring {
    border-color: rgb(255, 215, 0);  /* or whatever highlight color you want */
    box-shadow: 0 0 12px gold;
    transition: border-color 2s ease;
}

.button-link{
  position: absolute;
  border-radius: 12px;
  display: block;
  cursor: pointer;
}
.button-highlight-ring{
    width: 100%;
    height: 100%;
    border-radius:12px;
    border: 3px solid transparent;
}
.button-link:hover .button-highlight-ring{
    border-color: rgb(255, 215, 0);  /* or whatever highlight color you want */
    box-shadow: 0 0 12px gold;
    transition: border-color 0.2s ease;
}

@media (max-wdith: 768px){
    .slide-inner p.scrollable {
        overflow-y: auto;
        align-items: flex-start;
    }
}