*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    overflow-y: scroll;
}

/*  ROOT VARIABLES  */

:root {
    --universal-padding: 0px;

    --col-dark-gray: #2e2e2e;
    --col-pink: #F7A9B7;
    --col-white: #FFFFFF;
    --col-blue: #61CDF4;
    --col-purple: #844397;
    --col-indigo: #242164;
    --col-green: #019245;
    --col-yellow: #FEDB10;
    --col-orange: #F59122;
    --col-red: #EC1D23;
    --col-brown: #775120
}

/*  TYPOGRAPHY STYLES  */

h1 {
    font-family: 'Abril Fatface', serif;
    font-size: 64px;
    text-transform: uppercase;
    line-height: 1;
    color: var(--col-dark-gray);
}

h1:has(+ p) {
    margin-bottom: 15px;
}

h2 {
    font-family: 'Abril Fatface', serif;
    font-size: 48px;
    text-transform: uppercase;
    line-height: 1;
    color: var(--col-dark-gray);
}

h3 {
    font-family: 'Open Sans', sans-serif;
    font-size: 32px;
    font-weight: 400;
    color: var(--col-dark-gray);
}

h4 {
    font-family: 'Abril Fatface', serif;
    font-size: 24px;
    text-transform: uppercase;
    line-height: 1;
    color: var(--col-dark-gray);
}

h4:has(+ h1), h4:has(+ p) {
    margin-bottom: 15px;
}

h5 {
    font-family: 'Open Sans', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--col-dark-gray);
}

p {
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: var(--col-dark-gray);
}

p:has(+ a) {
    margin-bottom: 15px;
}

a {
    display: inline-block;
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--col-red);
    background-color: transparent;
    padding: 12px 25px;
    border: 2px solid var(--col-red);
    transition: 200ms;
    text-transform: uppercase;
}

a:hover, a:focus, a:focus-within {
    color: var(--col-white);
    background-color: var(--col-red);
}

.dark-section h1, .dark-section h2, .dark-section h3, .dark-section h4, .dark-section h5, .dark-section p, .dark-section a {
    color: var(--col-white);
}

.dark-section a {
    border: 2px solid var(--col-white);
}

.dark-section a:hover, .dark-section a:focus, .dark-section a:focus-within {
    color: var(--col-dark-gray);
    background-color: var(--col-white);
}

.film-title {
    width: max-content;
}

.film-title h3 {
    text-align: right;
}

@media (max-width: 960px) {
    h1 {
        font-size: 48px;
    }

    h2 {
        font-size: 36px;
    }

    h3 {
        font-size: 28px;
    }

    h4 {
        font-size: 24px;
    }

    h5 {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 32px;
    }

    h2 {
        font-size: 26px;
    }

    h3 {
        font-size: 24px;
    }

    h4 {
        font-size: 22px;
    }

    h5 {
        font-size: 20px;
    }
}

/*  UNIVERSAL ITEMS  */
section {
    position: relative;
    display: flex;
    width: 100%;
    z-index: 1;
}

.dark-section {
    position:relative;
    background-color: var(--col-dark-gray);
}

.dark-section::before {
    content:'';
    top: 0;
    bottom: 0;
    width: 12px;
    background: linear-gradient(var(--col-pink) 0% 10%, var(--col-white) 10.1% 20%, var(--col-blue) 20.1% 30%, var(--col-purple) 30.1% 40%, var(--col-indigo) 40.1% 50%, var(--col-green) 50.1% 60%, var(--col-yellow) 60.1% 70%, var(--col-orange) 70.1% 80%, var(--col-red) 80.1% 90%, var(--col-brown) 90.1% 100%);
}

.page-width {
    width: calc(100% - 30px);
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: center;
}

.rainbow-divider {
    width: 100%;
    margin-bottom: 15px;
}

@media (max-width: 960px) {
    .two-column {
        grid-template-columns: 1fr;
    }
}

/*  HEADER STYLES */

header {
    display: flex;
    background: linear-gradient(90deg, var(--col-dark-gray) 0 50%, var(--col-pink) 50.1% 55%, var(--col-white) 55.1% 60%, var(--col-blue) 60.1% 65%, var(--col-purple) 65.1% 70%, var(--col-indigo) 70.1% 75%, var(--col-green) 75.1% 80%, var(--col-yellow) 80.1% 85%, var(--col-orange) 85.1% 90%, var(--col-red) 90.1% 95%, var(--col-brown) 95.1% 100%);
    padding-top: 60px;
    padding-bottom: 15px;
}

header h1, header h3 {
    color: var(--col-white);
}

@media (max-width: 960px) {
    header {
        background: linear-gradient(90deg, var(--col-dark-gray) 0 80%, var(--col-pink) 80.1% 82%, var(--col-white) 82.1% 84%, var(--col-blue) 84.1% 86%, var(--col-purple) 86.1% 88%, var(--col-indigo) 88.1% 90%, var(--col-green) 90.1% 92%, var(--col-yellow) 92.1% 94%, var(--col-orange) 64.1% 96%, var(--col-red) 96.1% 98%, var(--col-brown) 98.1% 100%);
    }
}

/*  INTRO SECTION  */

.intro-section-left-column {
    padding: 90px 0;
}
  
.intro-section-right-column {
    position: relative;
    width: calc(100% + var(--universal-padding));
    height: 100%;
}

.intro-video-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    pointer-events: none;;
}
.dark-contact-grace-btn-col {
    margin-top: 40px;
}
.intro-video-container::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 15px;
    bottom: 120px;
    aspect-ratio: 1/1;
    background-image: url("https://riveroflifelgbtq.addonitsolutions.com/wp-content/uploads/2024/09/2310-ROL-Circle.webp");
    background-size: contain;
    background-repeat: no-repeat;

    transform: translateX(-50%);
}

.intro-section-right-column iframe {
    /* Extend it beyond the viewport... */
    width: 300%!important;
    height: 100%;
    /* ...and bring it back again */
    margin-left: -100%!important;
}

@media (max-width: 960px) {
    .intro-section-left-column {
        padding-top: 30px;
    }

    .intro-section-right-column {
        order: -1;
        width: 100%;
        margin-top: 15px;
    }

    .intro-video-container {
        position: relative;
        width: 100%;
        height: 560px;
    }
}

@media (max-width: 480px) {
    .intro-video-container {
        height: 360px;
    }
}

/*  STORY SECTION  */
.story-section .two-column:nth-of-type(1) {
    padding-top: 90px;
    padding-bottom: 180px;
}

.story-section .two-column:nth-of-type(2) {
    padding-top: 45px;
    padding-bottom: 180px;
}

.film-fest-logo, .rainbow-divider {
    max-width: 100%;
}

.quote-container {
    position: relative;
    background-color: var(--col-white);
    padding: 60px 30px 60px 180px;
}

.quote-container::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -15px;
    right: calc(100% - 165px);
    aspect-ratio: 1/1;
    background-image: url("https://riveroflifelgbtq.addonitsolutions.com/wp-content/uploads/2024/09/2310-ROL-Quotation-Mark.webp");
    background-size: contain;
    background-repeat: no-repeat;
    transform: translateY(-50%);
}

.quote-container p {
    color: var(--col-dark-gray);
}

@media (max-width: 960px) {
    .quote-container {
        padding: 30px 15px 30px 90px;
    }
    .quote-container::before {
        right: calc(100% - 75px);
    }
}

/*  TRAILER SECTION  */
#watch-trailer {
    overflow: hidden;
    margin-top: -90px;
    margin-bottom: -90px;
    z-index: 10;
}
.trailer-section {
    position: relative;
}

.trailer-section::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: calc(100% - 60px);
    aspect-ratio: 1/1;
    background-image: url('https://riveroflifelgbtq.addonitsolutions.com/wp-content/uploads/2024/09/2310-ROL-Line-Character-left.webp');
    background-size: contain;
    background-position: right;
    background-repeat: no-repeat;
    pointer-events: none;
}

.trailer-section::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(100% - 60px);
    aspect-ratio: 1/1;
    background-image: url('https://riveroflifelgbtq.addonitsolutions.com/wp-content/uploads/2024/09/2310-ROL-Line-Character-right.webp');
    background-size: contain;
    background-position: left;
    background-repeat: no-repeat;
    pointer-events: none;
}

.trailer-section iframe {
    width: 100%;
    aspect-ratio: 16/9;
}

@media (max-width: 1200px) {
    .trailer-section::before, .trailer-section::after{
        display: none;
    }
}

/*  DIRECTOR'S BIO  */
.directors-bio .two-column {
    padding-top: 180px;
    padding-bottom: 90px;
}

.directors-bio .inner-section-col-two {
    position: relative;
    width: 100%;
    height: 100%;
}

.grace-headshot {
    position: absolute;
    width: 100%;
    height: calc(100% + 180px);
    left: 0;
    top: 0;
    object-fit: cover;
}

@media (max-width: 960px) {
    .grace-headshot {
        position: relative;
        aspect-ratio: 1/1;
        height: auto;
    }
}

/*  DRAMA THERAPY  */
section:has(.drama-therapy-one) {
    z-index: 5;
}

.drama-therapy-one {
    padding-top: 180px;
    padding-bottom: 90px;
}

.drama-therapy-two {
    padding-top: 180px;
    padding-bottom: 180px;
}

.drama-therapy-three {
    padding-top: 90px;
    padding-bottom: 90px;
}

.drama-therapy-one .inner-section-col-one, .drama-therapy-three .inner-section-col-one {
    position: relative;
    width: 100%;
    height: 100%;
}

.drama-therapy-img-one, .drama-therapy-img-two {
    position: absolute;
    width: 100%;
    height: calc(100% + 180px);
    left: 0;
    object-fit: cover;
}

.drama-therapy-img-one {
    top: 0;
}

.drama-therapy-img-two {
    bottom:0;
}

.drama-therapy-stats li {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 3fr;
    align-items: center;
    gap: 15px;
}

.drama-therapy-stats li:has(+ li) {
    margin-bottom: 30px;
}

@media (max-width: 960px) {
    .mobile-flip {
        order: -1;
    }

    .drama-therapy-one , .drama-therapy-two, .drama-therapy-three {
        padding-top: 90px;
        padding-bottom: 90px;
    }

    .drama-therapy-img-one, .drama-therapy-img-two {
        position: relative;
        aspect-ratio: 1/1;
        height: auto;
    }
}

/*  CONTACT US  */
.contact-us {
    padding-top: 90px;
    padding-bottom: 90px;
}

.contact-us h4 {
    margin-bottom: 15px;
}
.contact-us a {
    margin-bottom: 10px;
}

.contact-us input:first-of-type {
    width: 100%;
    padding: 12px 25px;
    border: 2px solid var(--col-white);
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: var(--col-white);
    background: transparent;
    margin-bottom: 15px;
    transition: 200ms;
}

.contact-us input:first-of-type:focus, .contact-us input:first-of-type:focus-within, .contact-us input:first-of-type:target {
    outline: none!important;
    border: 2px solid var(--col-red);
}

#mc-embedded-subscribe {
    width: max-content;
    display: inline-block;
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--col-white);
    background-color: transparent;
    padding: 12px 25px;
    border: 2px solid var(--col-white);
    transition: 200ms;
    text-transform: uppercase;
}

#mc-embedded-subscribe:hover, #mc-embedded-subscribe:focus, #mc-embedded-subscribe:focus-within {
    color: var(--col-dark-gray);
    background-color: var(--col-white);
}

/*  FOOTER  */
footer .page-width {
    padding-top: 90px;
    padding-bottom: 90px;
}

footer .two-column {
    align-items: flex-start;
}

footer .film-title {
    margin-left: auto;
}