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;
}

body {
	line-height: 1;
    margin: 5px;
}

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; */
}

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

@media only screen 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;
    }
}

@media only screen and (orientation:portrait){
    #warningMessage { 
        display: none;
    }
} */

: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;
}

i, 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;
}

h2 {
    font-weight: 600;
}

/* preloader */

#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%);
    }
}

/* 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%);
    }
}

@keyframes slideInFromLeft {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes slideInFromRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#headlineWriting {
    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);
}

#headlineWriting2 {
    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;
  }

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

#barrier {
    background-color: var(--accent-color);
    min-width: 2px;
    height: 300px;
}

#actingContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    padding-top: 20rem;
    padding-bottom: 5rem;
    margin-top: 20px;
    margin-left: 10px;
    margin-right: 10px;
    user-select: none;
}

#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 scripts 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;
}

#scripts {
    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: #f1f1f1; /* 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);
}

/* set all paragraphs to hidden */
.actingCredits {
    display: none;
}

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

.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;
    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 {
    outline: 2px solid var(--accent-color);
}

.banner {
    text-align: center;
    padding: 30px;
    background-color: var(--secondary-color);
    border-radius: 50px;
    margin: 10px;
    margin-top: 50px;
    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);
}

#actingImages {
    margin: 5px;
}

.writingImage {
    transition: transform 0.3s ease;
}

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

.grid-wrapper {
    padding-top: 10px;
}

.grid-wrapper > div {
	display: flex;
	justify-content: center;
	align-items: center;
    min-width: fit-content;
}
.grid-wrapper > div > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50px;
}

.grid-wrapper {
	display: grid;
	grid-gap: 10px;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	grid-auto-rows: 200px;
	grid-auto-flow: dense;
}
.grid-wrapper .wide {
	grid-column: span 2;
}
.grid-wrapper .tall {
	grid-row: span 2;
}
.grid-wrapper .big {
	grid-column: span 2;
	grid-row: span 2;
}

.grid-wrapper img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	display: inline-block;
    cursor: pointer;
    user-select: none;
    -webkit-user-drag: none;
}

.writingImage:focus-visible {
	border-radius: 50px;
    outline: 4px solid var(--accent-color);
}

#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: white;
    cursor: pointer;
    user-select: none;
    /* align-self: center; Center the arrows along the x-axis */
}

.slide-container-from-left {
    position: relative;
    left: -10px;
    top: 5vh;
    width: 90%;
    max-width: 90vw;
    
    animation: slideInFromLeft 1.2s ease-out forwards;
}

.slide-container-from-right {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-top: 10rem;
    padding-bottom: 5rem;
    margin: auto;
    width: 100%;
    max-width: 90vw;
    animation: slideInFromRight 1.2s ease-out forwards;
    margin-top: 20rem;
}

.sliding-image-from-left {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0 1rem 1rem 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border: 4px solid var(--secondary-color);
}

.sliding-image-from-right {
    /* width: auto; */
    /* margin-left: auto; */
    height: 50%;
    max-height: 900px;
    display: block;
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border: 4px solid var(--secondary-color);
}

.text-box-right {
    position: absolute;
    right: -10%;
    width: 60%;
    bottom: clamp(-200px, -55%, 20px);

    max-width: 620px;
    padding: 1.5rem;
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    border-radius: 0.75rem;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    color: #333;
    line-height: 1.6;
    animation: fadeIn 1s ease-in forwards;
    animation-delay: 1s;
    opacity: 0;
}

.text-box-left {
    /* position: absolute; */
    /* left: 20%; */
    /* width: 60%; */
    /* top: clamp(80px, -55%, 20px); */

    margin-top: 20px;
    max-width: 620px;
    padding: 1.5rem;
    background-color: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(10px);
    border-radius: 0.75rem;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    color: #333;
    line-height: 1.6;
    animation: fadeIn 1s ease-in forwards;
    animation-delay: 1s;
    opacity: 0;
}

.text-box h2 {
    margin-top: 0;
    color: #111;
}

#attributions {
    display: flex;
    flex-direction: column; 
    justify-content: center; 
    margin: auto; 
    width: 50%; 
    text-align: center; 
    padding: 2rem;
    margin-top: 30rem;
    margin-bottom: 18rem;
}

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: 20px;
    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) {
    p {
        font-size: .9rem;
    }

    /* 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;
    }
}

@media screen and (max-width: 768px) {
    body {
        margin: 5px;
    }

    #actingContainer {
        display: block;
        margin: 20px;
    }
  
    #actingCategoryContainer {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
  
    .actingCategories {
        font-size: 1rem;
    }
  
    #barrier {
        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;
    }

    /* better fitting on smaller screens */
    .grid-wrapper {
        grid-auto-rows: 100px;
    }

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

    .slide-container-from-left {
        position: relative; /* Remove absolute positioning */
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: auto; /* Let content define height */
        padding: 1rem 0;
        left: 0; /* Reset position */
        /* Disable slide-in animations on mobile */
        animation: none;
        transform: none;
        margin: auto;
    }

    .slide-container-from-right {
        position: relative; /* Remove absolute positioning */
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: auto; /* Let content define height */
        left: 0; /* Reset position */
        /* Disable slide-in animations on mobile */
        animation: none;
        transform: none;
    }

    /* --- Override Image for Mobile --- */
    .sliding-image-from-left {
        position: relative; /* Reset from absolute */
        width: 95%;
        /* max-width: 500px; */
        border-radius: 1rem; /* Full radius for mobile */
        right: auto; /* Reset position */
    }

    .sliding-image-from-right {
        position: relative; /* Reset from absolute */
        width: 95%;
        /* max-width: 500px; */
        border-radius: 1rem; /* Full radius for mobile */
        margin-left: 0; /* Reset position */
    }

    /* --- Override Text Box for Mobile --- */
    .text-box-right,
    .text-box-left {
        position: relative; /* Remove absolute positioning */
        width: 90%;
        max-width: 500px;
        margin-top: 1rem;
        /* Reset all absolute positioning values */
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
        /* Adjust fade-in for quicker appearance */
        animation-delay: 0.2s;
    }

    #attributions {
        margin-top: 15rem;
        margin-bottom: 9rem;
    }
}

/* 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;
    }
}