html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* reset end */

@font-face {
    font-family: 'Montserrat';
    src: url('../../fonts/Montserrat/Montserrat-VariableFont_wght.woff2') format('woff2'),;
    /* font-display: swap; */
}

/* fadeout animation for preloader */
@keyframes fadeoutandmove {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    50% {
        opacity: 0;
        transform: translateX(0);
    }
    51% {
        opacity: 0;
        transform: translateX(-100%);
    }
    100% {
        opacity: 0;
        transform: translateX(-100%);
    }
}

/* to ensure use in portrait mode on mobile */
#warningMessage { 
    display: none; 
    font-family: 'Montserrat', sans-serif;
}

:root {
    /* light */
    --background-color: #f8eade;
    --text-color: #280e12;
    --text-shadow-color: #280e12;
    --primary-color: #eccb5f;
    --secondary-color: #f3d4be;
    --accent-color: #75152a;
    --shadow-color: 29deg 21% 57%;
    /* transition variable to graduate the change, starts at 0ms to then be changed to 400ms when slider is pressed. This is to prevent the background from starting at white before going to the default background colour due to the transition being loaded at start*/
    --global-transition: 0ms;
}

body {
    display: flex;
    font-family: 'Montserrat', sans-serif;
    flex-direction: column;
    flex: 1 0 auto;
    color: var(--text-color); 
    background-color: var(--background-color);
    transition: background-color var(--global-transition);
    margin: 5px;
}

h1 {
    font-weight: 500;
    font-size: 2rem;
}

h2 {
    font-weight: 600;
    font-size: 1.5rem;
}

h3, h4 {
    font-weight: 500;
    line-height: 3;
}

b {
    font-weight: 575;
}

p {
    font-size: 1rem;
    line-height: 1.5;
}

em {
    font-style: italic;
}

/* font is applied directly to buttons because going through the body tag doesn't seem to work */
button {
    font-family: 'Montserrat', sans-serif;
}

#content {
    display: none;
}

#preloaderWrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--background-color);
    position: fixed;
    top: 0;
    left: 0;
    margin: auto;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    /* 200s animation is changed to 2s default when page is ready, to avoid flash of preloader when internet is fast */
    animation: fadeoutandmove 200s ease-in forwards;
}

#preloader {
    display: flex;
    justify-content: center;
    align-items: center;
    animation: rotate 1.5s ease-in-out infinite;
    width: 120px;
    height: 120px;
    padding: 15px;
    border-radius: 100px;
    border: solid 2px black;
    background-color: var(--primary-color);
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
  
@keyframes shiftUpDown {
    0% {
        transform: translateX(0%);
    }
    50% {
        transform: translateY(-10%);
    }
}

#headlineActing {
    font-weight: bold;
    /* margin-bottom: -40px; */
    margin-top: 30px;
    text-shadow: 
    0px 0px 0 var(--background-color),  
    0px 0px 0 var(--background-color),
    0px  0px 0 var(--background-color),
    3px  3px 0 var(--background-color);
}

#headlineActing2 {
    font-size: 3.5rem;
    font-weight: normal;
    font-style: italic;
    margin: 10px;
}

/* highlight color and skew for 'sophie' */
mark {
    font-size: 2.5rem;
    --mark-color: var(--primary-color);
    --mark-skew: 0.25rem;
    --mark-height: 1rem;
    --mark-overlap: 0.3rem;
    color: var(--text-color);
    /* ensures text color transitions gradually */
    transition: color var(--global-transition);    
    
    margin-inline: calc(var(--mark-overlap) * -1);
    padding-inline: var(--mark-overlap);
    background-color: transparent;
    background-image:
        linear-gradient(
            to bottom right,
            transparent 50%,
            var(--primary-color) 50% 100%
        ),
        linear-gradient(
            to right,
            var(--primary-color),
            var(--primary-color)
        ),
        linear-gradient(
            to top left,
            transparent 50%,
            var(--primary-color) 50%
        );
    background-size:
        0.25em 1em,
        calc(100% - 0.25em * 2 + 1px) 1em,
        0.25em 1em;
        background-position:
        left center,
        center,
        right center;
        background-repeat: 
        no-repeat;
  }

#logoContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--secondary-color);
    border-radius: 50px;
    padding-left: 5px;
    padding-right: 5px;
    box-shadow:
    0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.14),
    1.5px 2.9px 3.7px -0.4px hsl(var(--shadow-color) / 0.14),
    2.7px 5.4px 6.8px -0.7px hsl(var(--shadow-color) / 0.14),
    4.5px 8.9px 11.2px -1.1px hsl(var(--shadow-color) / 0.14),
    7.1px 14.3px 18px -1.4px hsl(var(--shadow-color) / 0.14),
    11.2px 22.3px 28.1px -1.8px hsl(var(--shadow-color) / 0.14),
    17px 33.9px 42.7px -2.1px hsl(var(--shadow-color) / 0.14),
    25px 50px 62.9px -2.5px hsl(var(--shadow-color) / 0.14);
    transition: transform 0.3s ease;
}

#logoContainer:hover {
    transform: translateY(-4px);
}

#spotlightLogo {
    width: 170px;
    height: auto;
    cursor: pointer;
    margin-bottom: 5px;
    margin-left: 10px;
    margin-top: 10px;
}

#filmmakersLogo {
    width: auto;
    height: 30px;
    margin-bottom: 5px;
    margin-right: 10px;
    margin-top: 10px;
}

#logoContainer a:focus-visible {
    border-radius: 10px;
    outline: 2px solid var(--accent-color);
}

#filmmakersLogoLetter {
    fill: var(--text-color);
}

#quickNavContainer {
    margin-top: 10px;
    height: fit-content;
    z-index: 9;
}

.quickNavButtons {
    font-size: 1rem;
    color: var(--text-color);
    margin: 5px;
    padding: 10px;
    border-radius: 50px;
    cursor: pointer;
    background-color: var(--secondary-color);
    border-style: none;
    user-select: none;
    box-shadow:
    0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.14),
    1.5px 2.9px 3.7px -0.4px hsl(var(--shadow-color) / 0.14),
    2.7px 5.4px 6.8px -0.7px hsl(var(--shadow-color) / 0.14),
    4.5px 8.9px 11.2px -1.1px hsl(var(--shadow-color) / 0.14),
    7.1px 14.3px 18px -1.4px hsl(var(--shadow-color) / 0.14),
    11.2px 22.3px 28.1px -1.8px hsl(var(--shadow-color) / 0.14),
    17px 33.9px 42.7px -2.1px hsl(var(--shadow-color) / 0.14),
    25px 50px 62.9px -2.5px hsl(var(--shadow-color) / 0.14);
    /* Remove the highlight effect on touch devices */
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.3s ease;
}

.quickNavButtons:hover {
    transform: translateY(-4px); 
}

#actingLinkHeading {
    display: flex;
    text-align: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 1.5rem;
    user-select: none;
}

#barrier {
    display: none;
    background-color: var(--accent-color);
    min-width: 2px;
    height: 300px;
    border-radius: 200px;
}

#barrier2 {
    background-color: var(--accent-color);
    min-width: 2px;
    height: 300px;
    border-radius: 200px;
}

#barrierShort {
    background-color: var(--accent-color);
    min-width: 2px;
    height: 30px;
    margin-left: 15px;
    margin-right: 15px;
    border-radius: 200px;
}

#actingContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 420px;
    gap: 50px;
    margin-top: 10rem;
    margin-bottom: 10rem;
}

.actingCredits {
    display: none;
}

/* override so details paragraph is visible on page landing */
#details {
    display: block;
}

#actingCreditsContainer {
    /* display: flex; */
    min-width: 500px;
    max-width: 500px;
    min-height: 0px;
    max-height: 500px;
    margin-top: 20px;
    margin-bottom: 20px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* forces all paragraphs to be centered except for the theatre one which has the scroll. Necessary to stop text from being hidden */
.boxCentering {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0px;
    max-width: 500px;
    min-height: 0px;
    max-height: 500px;
}

/* forces very short paragraph to be positioned corrrectly */
.boxCentering2 {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0px;
    max-width: 500px;
    min-height: 0px;
    max-height: 300px;
}

#theatre {
    align-items: flex-start;
}

#actingCreditsContainer::-webkit-scrollbar {
    width: 8px;
}

#actingCreditsContainer::-webkit-scrollbar-thumb {
    background-color: var(--accent-color); /* Color of the scrollbar handle */
    border-radius: 4px; /* Rounded corners */
}

#actingCreditsContainer::-webkit-scrollbar-track {
    background-color: var(--secondary-color); /* Color of the scrollbar track */
    border-radius: 4px; /* Rounded corners */
}

#actingCategoryContainer {
    display: flex;
    flex-direction: column;
}

#detailsButton {
    background-color: var(--primary-color);
    color: var(--text-shadow-color);
}

.actingCategories {
    color: var(--text-color);
    font-size: 1rem;
    margin: 5px;
    padding: 10px;
    border-radius: 50px;
    cursor: pointer;
    background-color: var(--secondary-color);
    border-style: none;
    user-select: none;
    /* custom variable for shadow */
    box-shadow:
    0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.14),
    1.5px 2.9px 3.7px -0.4px hsl(var(--shadow-color) / 0.14),
    2.7px 5.4px 6.8px -0.7px hsl(var(--shadow-color) / 0.14),
    4.5px 8.9px 11.2px -1.1px hsl(var(--shadow-color) / 0.14),
    7.1px 14.3px 18px -1.4px hsl(var(--shadow-color) / 0.14),
    11.2px 22.3px 28.1px -1.8px hsl(var(--shadow-color) / 0.14),
    17px 33.9px 42.7px -2.1px hsl(var(--shadow-color) / 0.14),
    25px 50px 62.9px -2.5px hsl(var(--shadow-color) / 0.14);
}

.actingCategories:focus-visible, .actingCategories:hover, .quickNavButtons:focus-visible {
    outline: 2px solid var(--accent-color);
}

.banner {
    text-align: center;
    padding: 20px;
    background-color: var(--secondary-color);
    border-radius: 50px;
    margin: auto;
    width: fit-content;
    margin-top: 5rem;
    user-select: none;
    box-shadow:
    0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.14),
    1.5px 2.9px 3.7px -0.4px hsl(var(--shadow-color) / 0.14),
    2.7px 5.4px 6.8px -0.7px hsl(var(--shadow-color) / 0.14),
    4.5px 8.9px 11.2px -1.1px hsl(var(--shadow-color) / 0.14),
    7.1px 14.3px 18px -1.4px hsl(var(--shadow-color) / 0.14),
    11.2px 22.3px 28.1px -1.8px hsl(var(--shadow-color) / 0.14),
    17px 33.9px 42.7px -2.1px hsl(var(--shadow-color) / 0.14),
    25px 50px 62.9px -2.5px hsl(var(--shadow-color) / 0.14);
}

.examples {
    display: flex;
    flex-direction: row;
    user-select: none;
}

.halves {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.halfBanner {
    text-align: center;
    background-color: var(--secondary-color);
    border-radius: 50px;
    width: fit-content;
    margin: auto;
    /* padding: 12px; */
    padding-right: 10rem;
    padding-left: 10rem;
    margin-top: 1rem;
    box-shadow:
    0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.14),
    1.5px 2.9px 3.7px -0.4px hsl(var(--shadow-color) / 0.14),
    2.7px 5.4px 6.8px -0.7px hsl(var(--shadow-color) / 0.14),
    4.5px 8.9px 11.2px -1.1px hsl(var(--shadow-color) / 0.14),
    7.1px 14.3px 18px -1.4px hsl(var(--shadow-color) / 0.14),
    11.2px 22.3px 28.1px -1.8px hsl(var(--shadow-color) / 0.14),
    17px 33.9px 42.7px -2.1px hsl(var(--shadow-color) / 0.14),
    25px 50px 62.9px -2.5px hsl(var(--shadow-color) / 0.14);
    margin-bottom: 1rem;
}


.sides {
    display: flex;
    flex-direction: column;
    margin: 10px;
    flex: 1;
    align-items: center;
    gap: 10px;
}

.videoContainer {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio (9 / 16 * 100) */
}

.showreelYoutube {
    position: absolute;
    width: 100%;
    height: 100%;
}

#actingImagesContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 5rem;
    user-select: none;
}

.image {
    min-width: 200px;
    min-height: auto;
    max-width: 400px;
    max-height: 400px;
    border-radius: 10%;
    margin: 5px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.image:focus-visible {
    border-radius: 10%;
    outline: 2px solid var(--accent-color);
    transform: translateY(-4px);
}

.image:hover {
    transform: translateY(-4px);
}

#overlay {
    display: none;
    position: fixed;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    user-select: none;
}

#overlayImage {
    display: block;
    max-width: 80%;
    max-height: 80%;
    margin: 1em;
    border-radius: 10%;
}

.carouselArrow {
    font-size: 35px;
    color: #f8eade;
    cursor: pointer;
    user-select: none;
    /* align-self: center; Center the arrows along the x-axis */
}

#videos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding-top: 50px;
    padding-bottom: 50px;
}

.nondragable {
    user-select: none;
    -webkit-user-drag: none;
}

footer {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding-left: 10px;
    padding-right: 10px;
    background-color: var(--secondary-color);
    border-radius: 50px;
    margin: 10px;
    margin-top: 10px;
    margin-bottom: 20px;
    box-shadow:
    0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.14),
    1.5px 2.9px 3.7px -0.4px hsl(var(--shadow-color) / 0.14),
    2.7px 5.4px 6.8px -0.7px hsl(var(--shadow-color) / 0.14),
    4.5px 8.9px 11.2px -1.1px hsl(var(--shadow-color) / 0.14),
    7.1px 14.3px 18px -1.4px hsl(var(--shadow-color) / 0.14),
    11.2px 22.3px 28.1px -1.8px hsl(var(--shadow-color) / 0.14),
    17px 33.9px 42.7px -2.1px hsl(var(--shadow-color) / 0.14),
    25px 50px 62.9px -2.5px hsl(var(--shadow-color) / 0.14);
}

footer p {
    max-width: 300px;
    text-align: center;
    margin: 10px;
    font-size: 0.65rem;
}

@media screen and (max-width: 450px) {
    .actingCredits {
        display: none;
    }

    .quickNavButtons:hover {
        transform: translateY(0px); 
    }

    /* forces all paragraphs to be centered except for the scripts one which has the scroll. Necessary to stop text from being hidden */
    /* stops text from being hidden on mobile */
    .boxCentering {
        display: flex;
        align-items: flex-start;
    }
}

@media screen and (min-width: 450px) and (orientation: landscape) {
    #actingCreditsContainer {
        max-height: 400px;
    }
}

/* for small screens */
@media screen and (max-width: 768px) {
    body {
        margin: 5px;
    }

    #actingContainer {
        display: block;
        margin: 20px;
        margin-top: 10rem;
    }

    #actingCategoryContainer {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    /* .actingCategories {
        font-size: 1rem;
    } */

    #barrier {
        display: block;
        width: 300px;
        height: 2px;
        position: relative;
        margin-top: 30px;
        margin-bottom: 20px;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    #barrier2 {
        display: block;
        width: 300px;
        height: 2px;
        position: relative;
        margin-top: 30px;
        margin-bottom: 20px;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    #actingCreditsContainer {
        min-height: 50vh;
        max-height: 500px;
        min-width: 0px;
        max-width: 400px;
        /* center */
        margin: 0 auto;
    }

    .boxCentering2 {
        display: flex;
        justify-content: none;
        align-items: none;
        min-width: 0px;
        max-width: 200px;
        min-height: 0px;
        max-height: 200px;
    }

    .examples {
        /* display: flex; */
        flex-direction: column;
    }

    #spotlightLogo {
        width: 125px;
    }

    #filmmakersLogo {
        width: 150px;
    }

    .image:hover {
        transform: translateY(0px);
    }
}

/* Light mode styles */
@media (prefers-color-scheme: light) {
    :root {
        --background-color: #f8eade;
        --text-color: #280e12;
        --text-shadow-color: #280e12;
        --primary-color: #eccb5f;
        --secondary-color: #f3d4be;
        --secondary-color-half-opacity: #f3d5becc;
        --accent-color: #75152a;
        --shadow-color: 29deg 21% 57%;
        --global-transition: 400ms;
    }
}

/* Dark mode styles */
@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #280e12;
        --text-color: #f8eade;
        --text-shadow-color: #280e12;
        --primary-color: #e6bf3d;
        --secondary-color: #150b04;
        --secondary-color-half-opacity: #150b04cc;
        --accent-color: #de4566;
        --shadow-color: 350deg 74% 2%;
        --brightness: 70%;
        --global-transition: 400ms;
    }
}

/* @media only screen and (max-width: 915px) and (max-height: 412px) and (orientation:landscape) {
    #wrapper { 
        display: none; 
    }

    #warningMessage { 
        display: flex;  */
        /* position: fixed; */
        /* justify-content: center;
        align-items: center;
        font-size: 1rem;
        margin: 26vh;
        background-color: var(--background-color);
        text-align: center;
    }
} */

/* ensure warning text in portrait mode on mobile */
/* @media only screen and (orientation:portrait){
    #warningMessage { 
        display: none;
    }
} */