*::-webkit-scrollbar {
    display: none; /* hide scroll bar for chrome, safri and opera */
}

* {
    -ms-overflow-style: none; /* hide scroll bar for IE and Edge */
    scrollbar-width: none; /* hide scroll bar for Firefox */
}

@font-face {
    font-family: FFGoodPro-News;
    src: url("fonts/FFGoodPro-News.woff2");
}

@font-face {
    font-family: Beagley;
    src: url("fonts/Beagley/Beagley.otf");
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden; /* Prevents unwanted scrollbars */
}

/* =================================================================== */
/* =========================== SITE BORDER =========================== */
/* =================================================================== */

.persistent-border {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    border-width: 1vw 1vw 1vw 1vw;
    border-style: solid;
    border-color: #000;

    box-sizing: border-box;
    pointer-events: none;
    z-index: 9999;
}

/* This class on the BODY triggers the animation */
body.site-entered #landing {
    /* transform: translateY(-100%) skewY(-2deg); */
    clip-path: inset(0% 0% 100% 0%);
}
body.site-entered #content {
    transform: translateY(0);
}

/* =================================================================== */
/* ======================== SHUTTER ANIMATION ======================== */
/* =================================================================== */

#projector-overlay {
    position: fixed;
    top: 50vh;
    left: 150vw;
    width: 150vmax;
    height: 150vmax;

    z-index: 998;
    pointer-events: none;

    transform-origin: top left;
    transform: rotate(-90deg) translateZ(0);
    backface-visibility: hidden;
    will-change: transform;

    background-color: #050505;
    /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 600 600'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.15' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%50' height='100%50' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"),
    radial-gradient(circle at 100% 0%, rgba(180, 160, 130, 0.1) 0%, transparent 20%); */
    /* background-size: cover, cover; */
}

body.is-changing-section #projector-overlay {
    animation: pivot-shutter 650ms cubic-bezier(0.6, 0.05, 0.15, 0.95);
}

@keyframes pivot-shutter {
    0% { transform: rotate(-140deg); }
    40%, 60% { transform: rotate(-220deg); }
    100% { transform: rotate(-90deg); }
}

@media only screen and (max-width: 1000px) {
    #projector-overlay {
        top: 60vh;
        width: 160vmax;
        left: 160vw;
    }
}
@media only screen and (max-width: 700px) {
    #projector-overlay {
        left: 220vw;
    }
}

/* =================================================================== */
/* =========================== LANDING PAGE ========================== */
/* =================================================================== */

/* --- 1. Main Canvas --- */
#landing {
    display: block; /* display: none; and enabled pre-enterSite javascript*/
    position: absolute;

    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100vh;
    width: 100vw;
    overflow: hidden;

    /* transform-origin: left bottom;
    transition: transform 1s cubic-bezier(0.6, 0.05, 0.15, 0.95);
    transform: translateY(0%) skewY(0deg); */

    transition: clip-path 1s cubic-bezier(0.6, 0.05, 0.15, 0.7);
    clip-path: inset(0% 0% 0% 0%);

    z-index: 1001;

    /* temporary */
    background-color: #fffeed;
    background-image:
      repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.015) 0px, rgba(0, 0, 0, 0.015) 1px, transparent 1px, transparent 4px),
      repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.015) 0px, rgba(0, 0, 0, 0.015) 1px, transparent 1px, transparent 4px);
    background-blend-mode: multiply;
}

/* --- 2. The Text Pane --- */
.text-pane {
    position: absolute;
    z-index: 20;
    bottom: 5vh;
    left: 4vw;
}
.text-pane h1 {
    font-family: Beagley, serif;
    font-size: 5em;
    line-height: 1;
    margin: 0;
    color: #3D3A36;

    background-color: #2a2723;

    background-image:
      repeating-conic-gradient(rgba(255,255,255,0.06) 0% 25%, transparent 0% 50%),
      repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 4px),
      repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 4px);
    background-size: 8px 8px, 4px 4px, 4px 4px;
    background-blend-mode: multiply;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    text-shadow:
      0.3px 0.3px 0.8px rgba(0, 0, 0, 0.25),
      -0.3px -0.3px 0.8px rgba(0, 0, 0, 0.22),
      0 0 1.2px rgba(0, 0, 0, 0.28);
}

.text-pane p {
    font-family: FFGoodPro-News, sans-serif; font-size: 1.1em;
    margin: 0.5em 0 0 0.2em;
    color: #555;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.1);

    font-size: 1.1rem;
    line-height: 1.6;
    color: #1a1a1a;
    font-weight: 500;

    text-shadow:
      0 0 0.8px rgba(0, 0, 0, 0.25),
      0.3px 0.3px 0.6px rgba(0, 0, 0, 0.2),
      -0.3px -0.3px 0.6px rgba(0, 0, 0, 0.2);
}

/* --- 3. The Cubist Figure Container --- */
.cubist-figure {
    position: absolute;
    width: 30vw;
    height: 85vh;
    right: 8vw;
    top: 50%;
    transform: translateY(-50%);
}

/* --- 4. General Shard Styles --- */
.shard {
    position: absolute;
    overflow: hidden;
    transition: transform 0.4s ease, z-index 0s 0.2s;
    background-color: #000; /* Black background for clean lines */
}
.shard img {
    width: 100%; height: 100%; object-fit: cover;
    filter: sepia(70%) grayscale(20%); transition: filter 0.4s ease, opacity 0.4s ease;
    opacity: 0.9;
}
.shard:hover {
    z-index: 15;
    transform: scale(1.03);
    transition: transform 0.4s ease, z-index 0s;
}
.shard:hover img {
    filter: sepia(0%) grayscale(0%);
    opacity: 1;
}

.shard-1 {
    width: 40%; height: 30%; top: 0%; left: 30%; z-index: 5;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.shard-2 {
    width: 32%; height: 50%; top: 10%; left: 0%; z-index: 3;
    clip-path: polygon(100% 28%, 100% 72%, 0 100%, 0 0);
}
.shard-3 {
    width: 32%; height: 50%; top: 10%; left: 68%; z-index: 3;
    clip-path: polygon(100% 0, 100% 100%, 0 72%, 0 28%);
}
.shard-4 {
    width: 40%; height: 35%; top: 28%; left: 30%; z-index: 6;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.shard-5 {
    width: 20%; height: 25%; top: 25%; left: 20%; z-index: 7;
    clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.shard-6 {
    width: 20%; height: 25%; top: 25%; left: 60%; z-index: 7;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.shard-7 {
    width: 35%; height: 40%; top: 60%; left: 15%; z-index: 4;
    clip-path: polygon(0 0, 100% 35%, 100% 100%, 0 100%);
}
.shard-8 {
    width: 35%; height: 40%; top: 60%; left: 50%; z-index: 4;
    clip-path: polygon(0 35%, 100% 0, 100% 100%, 0 100%);
}
.shard-9 {
    width: 30%; height: 20%; top: 55%; left: 35%; z-index: 8;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.shard-10 {
    width: 25%; height: 15%; top: 0%; left: 5%; z-index: 2;
    opacity: 0.8;
}
.shard-11 {
    width: 25%; height: 15%; top: 0%; left: 70%; z-index: 2;
    opacity: 0.8;
}
.shard-12 {
    width: 20%; height: 15%; top: 85%; left: 40%; z-index: 2;
    opacity: 0.8;
}

/* =================================================================== */
/* ============================ NAVIGATION =========================== */
/* =================================================================== */

nav {
    position: absolute;
    z-index: 997;

    height: 100vh;
    width: 100vw;
    padding: 0;
    margin: 0;

    display: flex;
    flex-direction: column;
    pointer-events: none;
    justify-content: center;
}

nav ul {
    list-style-type: none;
    writing-mode: vertical-lr;
    transform: scale(-1, -1);
    font-family: Beagley, serif;
    color: #000;

    padding: 0 1vw 0 0;
    margin: 0;
    width: 7vw;
    height: 100%;

    display: flex;
    flex-direction: row;
    justify-content: center;
    font-size: 4.5vw;

    border-width: 0 0 0 2px;
    border-style: solid;
    border-color: #000;

    background-image:
      repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.015) 0px, rgba(0, 0, 0, 0.015) 1px, transparent 1px, transparent 4px),
      repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.015) 0px, rgba(0, 0, 0, 0.015) 1px, transparent 1px, transparent 4px);
    background-blend-mode: multiply;
}

nav ul li {
    display: flex;
    align-items: center;
    cursor: pointer;
    pointer-events: auto;

    width: 100%;
    padding: 3vh 0 3vh 0;
    text-decoration: none;
    transition: all 400ms ease-in-out;
}

nav ul li:hover {
    background: transparent;
    color: #34856c; /* colour should also be chosen from CURRENT content */
    transform: translate(5px, 5px);
    text-shadow:
        1.5px 1.5px 0 #0e0e0e,
        -1.5px -1.5px 0 #0e0e0e,
        -1.5px -1.5px 0 #0e0e0e,
        -1.5px 1.5px 0 #0e0e0e,
        1.5px -1.5px 0 #0e0e0e,
        -5px -5px #4fd1a8;
}

/* next/prev buttons */
.section-nav {
    font-size: 2.2vw;
}


/* "(and contact)" */
nav ul > li > div {
    align-self: flex-start;
    position: relative;
    width: 0;
    height: 0;
    padding-left: 0.5vw;
}

nav ul > li > div > span {
    min-height: max-content;
    min-width: max-content;
    position: absolute;
    color: #6d6d6d;
    font-family: 'Courier New', Courier, monospace;
    font-style: italic;
    font-size: 1.2vw;
    padding: auto;
}

nav ul li:hover > div span, #left li > div span {
    text-shadow: none;
}

/* close section for about and projects */
.close {
    min-width: 5vw;
    min-height: 10vh;
    padding-right: 2vw;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: auto;

    border-width: 0 0 0 0;
    border-style: solid;
    border-color: #000;

    background-image:
      repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.015) 0px, rgba(0, 0, 0, 0.015) 1px, transparent 1px, transparent 4px),
      repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.015) 0px, rgba(0, 0, 0, 0.015) 1px, transparent 1px, transparent 4px);
    background-blend-mode: multiply;
}

.close img {
    max-width: 50px;
}

/* === PROJECTS WINDOW === */
#projects {
    z-index: -1;
    position: absolute;
    display: flex;
    flex-direction: row;
    /* width: 100vw;
    height: 100%; */
    transform: translate(-100vw, 0);
    transition: transform 0.2s;


    background: #090909;

    width: 91vw;
    padding-left: 9vw;
    height: 100vh;
    padding-top: 1vw;
}

#projects.active {
    transform: translate(0 ,0);
}

#projects ul {
    display: initial;
    overflow: auto;

    /* width: 91vw;
    padding-left: 9vw;
    height: 100%;
    padding-top: 1vw; */
    width: 100%;
    height: 100%;

    margin-left: auto;
    margin-right: auto;

    /* background: #090909; */
    writing-mode: initial;
    transform: none;
}

#projects ul li {
    float: left;
    position: relative;
    overflow: hidden;
    width: 20%;
    padding: 0;
}

#projects ul li:hover {
    transform: none;
}

#projects ul li.active {
    a img {
        filter: grayscale(0);
    }
}

#projects ul li a img {
    width: 100%;
    height: auto;
    filter: grayscale(100%);
    display: block;
    transition: transform 0.5s ease;
}

#projects ul li a img:hover {
    filter: grayscale(0);
    transform: scale(1.1);
}

#projects ul li:has(~ li:not(active):hover),
#projects ul li:not(active):hover ~ li {
    a img {
        filter: grayscale(100%);
    }
}

@media only screen and (max-width: 480px) {
    #projects ul li {
        width: 100%;
    }
}
@media only screen and (max-width: 650px) and (min-width: 481px) {
    #projects ul li {
        width: 50%;
    }
}
@media only screen and (max-width: 1050px) and (min-width: 651px) {
    #projects ul li {
        width: 33.3%;
    }
}
@media only screen and (max-width: 1290px) and (min-width: 1051px) {
    #projects ul li {
        width: 25%;
    }
}

/* === ABOUT WINDOW === */
#about {
    position: absolute;
    z-index: -1;
    display: flex;
    flex-direction: row;

    width: 93vw;
    padding-left: 7vw;
    height: 100%;

    font-family: FFGoodPro-News, sans-serif;

    background: #fffeed;
    pointer-events: auto;
    transform: translate(-100vw, 0);
    transition: transform 0.3s;

    background-color: rgba(255, 254, 237, 0.9);
    background-image:
      repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.015) 0px, rgba(0, 0, 0, 0.015) 1px, transparent 1px, transparent 4px),
      repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.015) 0px, rgba(0, 0, 0, 0.015) 1px, transparent 1px, transparent 4px);
    background-blend-mode: multiply;
}

#about > div:not(.close) > img {
    width: auto;
    height: auto;
    max-width: 80vw;
    max-height: 80vh;
}

#about > div:not(.close) {
    display: flex;
    flex-direction: row;
    gap: 5vh;
    padding: 0 5vw 0 5vw;
    align-items: center;
}

#about p {
    text-align: justify;
    text-justify: inter-word;
    font-size: 3vh;
}

#about div > h2 {
    font-size: 10vh;
    margin: 0;
}

#about div > p > span {
    color: #34856c;
}

#about div > p > a {
    cursor: pointer;
    color: #34856c;
}

#about div > p > a:hover {
    text-shadow: 0 0 0.01px black;
}

#about.active {
    transform: none;
}

/* =================================================================== */
/* =========================== PROJECT VIEW ========================== */
/* =================================================================== */

main {
    height: 100vh;
    width: 100vw;
    position: relative;
}

.section-inner {
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    flex-direction: row;

    position: relative;
    overflow: auto;

    background-image:
      repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.015) 0px, rgba(0, 0, 0, 0.015) 1px, transparent 1px, transparent 4px),
      repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.015) 0px, rgba(0, 0, 0, 0.015) 1px, transparent 1px, transparent 4px);
    background-blend-mode: multiply;
}

/* === TITLE CARD === */
.title-card {
    display: flex;
    width: auto;
    height: 80vh;
    background-color: transparent;
    margin: 0 15vw 0 15vw;

    justify-self: center;

    border-color: #222;
    border-width: 3px;
    border-style: solid;
}

.title-card-text {
    width: 50%;
    box-sizing: border-box;
    padding: 5vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #3D3A36;
}

.title-card-text h2 {
    font-family: Beagley;
    font-size: 15vh;
    text-shadow: 5px 5px #4fd1a8;
    margin: 0;
    line-height: 0.7;
    height: max-content;
    color: #ebb935;
}

.title-card-text p {
    font-family: 'FFGoodPro-News', sans-serif;
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 40ch; /* Limits text width for readability */
}

.title-card-text .scroll-prompt {
    font-family: 'FFGoodPro-News', sans-serif;
    color: #888;
    margin-top: 3rem;
    border: 1px solid #ccc;
    padding: 0.5rem 1rem;
    align-self: flex-start;
}

.title-card-image {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.title-card-image img {
    height: 80%;
    object-fit: cover; /* This makes it work for both landscape and portrait photos */
}

/* === STANDARD 'EXHIBITION VIEW' === */
.images {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 93vw;
    position: absolute;
}

.text {
    font-family: FFGoodPro-News, sans-serif;
    text-align: justify;
    text-justify: inter-word;
    font-size: 3vh;

    max-height: 75vh;
    min-width: 35vw;
    max-width: 80vw;
    height: auto;
    width: auto;
    padding: 0 17vw 0 17vw;

    display: flex;
    flex-direction: column;
}

.text-long {
    min-width: max-content;
    max-width: max-content;
    word-wrap: none;
}

.text .def {
    align-self: flex-start;
    color: #6d6d6d;
    font-size: 2vh;
    padding: 1vh 1vw 1vh 1vw;
    margin-top: 5vh;
    max-width: max-content;
    word-wrap: none;

    border: solid #000000;
    border-width: 0 3px;
    background-repeat: no-repeat;
    background-size: 4px 3px;
    background-position: top left, top right, bottom left, bottom right;
    background-image: linear-gradient(#000000, #000000),
                      linear-gradient(#000000, #000000),
                      linear-gradient(#000000, #000000),
                      linear-gradient(#000000, #000000);
}

.text .def i {
    color: #000000;
    font-size: 2.4vh;
}

.image {
    padding: 0 5vw 0 5vw;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.image img {
    max-height: 80vh;
    height: auto;
    width: auto;
    max-width: 90vw;
}

figcaption {
    font-family: FFGoodPro-News, sans-serif;
    font-style: italic;
    padding-top: 5px;
    font-size: 1em;
}

/* =================================================================== */
/* ========================= RESPONSIVENESS ========================== */
/* =================================================================== */

/* === First Portrait Change === */
@media (max-aspect-ratio: 9/8) {
    nav ul li {
        font-size: 5vh;
    }

    /* .cover img {
        transform: rotate(90deg);
        max-width: 80vh;
        max-height: 95vw;
    } */

    /* .images .text {
        width: max-content;
    } */
}

/* === Second Portrait Change === */
@media (max-aspect-ratio: 13/8) {
    #about, #projects {
        flex-direction: column;
        left: 0;
        top: -100vh;
        margin: 0;
    }

    #about.active, #projects.active {
        top: 0;
        left: 0;
    }

    #about > div:not(.close) {
        left: 0;
        overflow: auto;
        flex-direction: column;
        padding-top: 5vh;
        padding-bottom: 5vh;
        padding-left: 10vw;
        padding-right: 10vw;
    }

    .close {
        padding: 0;
    }

    .close img {
        transform: rotate(90deg);
    }
}

/* === Third Portrait Change === */
@media (max-aspect-ratio: 20/29) {
    nav {
        justify-content: flex-start;
    }

    nav .section-nav {
        visibility: hidden;
    }

    nav > ul {
        width: 100vw;
        height: 9vh;
        padding-top: 1vh;
        font-size: 5vh;
        writing-mode: inherit;
        transform: inherit;
        border-width: 0 0 2px 0;
        gap: 10vw;
    }

    /* FIX POSITION OF "(and contact)" */

    #about, #projects {
        width: 100vw;
        height: 91vh;
        padding: 10vh 0 0 0;
        transform: translate(0, -100vh);
    }

    /* no point in greyscaling non-selected ones as only one project can be seen at a time */
    #projects ul li a img {
        filter: grayscale(0);
    }

    /* .cover {
        flex-direction: column;
        position: static;
        min-height: 93vh;
        display: flex;
        justify-content: center;
        margin-top: 7vh;
    } */

    .images {
        flex-direction: column;
        margin: 0;
        gap: 10vh;
        padding-bottom: 5vh;
        top: 100vh;
    }

    .image  {
        border: none;
        margin: 0;
    }
}

/* =================================================================== */
/* ========================= FIRSTROLL.HTML ========================== */
/* =================================================================== */

#firstroll {
    padding: 0;
    margin: 0;
    height: 100vh;
    display: flex;
    pointer-events: auto;
}

#firstroll > .cover {
    /* position: absolute; */
    background-color: #fffeed;
    overflow: auto;
    diplay: flex;
    gap: 2vw;
    width: 90vw;
    padding-left: 8vw;
    padding-right: 2vw;
    /* z-index: -1; */
}

#firstroll > .cover > img {
    max-width: 70vw;
    height: auto;
    width: auto;
}

#firstroll > .cover > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: right;

    gap: 5vh;
    height: 100vh;
    width: auto;
    max-width: 50vw;
}

#firstroll > .cover > div > h1 {
    font-family: Beagley;
    font-size: 15vh;
    text-shadow: 5px 5px #4fd1a8;
    margin: 0;
    line-height: 0.5;
    height: max-content;
}

#firstroll > .cover p {
    font-family: FFGoodPro-News;
    font-size: 2.6vh;
    margin: 0;
    line-height: 0.9;
    max-width: 20vw;
}

#firstroll > .images {
    height: 100vh;
}

.cover {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cover img {
    display: block;
    height: auto;
    width: auto;
    max-width: 85vw;
    max-height: 90vh;
}

@media (max-aspect-ratio: 13/8) {
    #firstroll > .cover {
        flex-direction: column;
        gap: 2vh;
    }

    #firstroll > .cover > div {
        flex-direction: row;
        max-width: 100vw;
        height: auto;
        max-height: max-content;
        margin-top: 5vh;
    }

    #firstroll > .cover > img {
        transform: none;
        transform-origin: none;
        align-self: center;
        max-height: 60vh;
        max-width: 100vw;
        margin-bottom: 5vh;
    }

    #firstroll .cover > div > p {
        text-align: left;
        align-self: center;
        max-width: 500px;
    }
}

@media (max-aspect-ratio: 17/16) {
    #firstroll > .cover > img {
        max-height: 40vh;
        max-width: 80vw;
    }

    #firstroll > .cover > div {
        padding: 25vh 7vw 0 7vw;
        flex-direction: column;
        align-items: center;
    }

    #firstroll > .cover > div > p {
        text-align: justify;
    }
}

@media (max-aspect-ratio: 20/29) {
    #firstroll > .cover {
        padding: 0;
        width: 100vw;
        gap: 5vh;
    }

    #firstroll > .cover > img {
        max-width: 90vw;
        max-height: 100vh;
    }
}


/* scrolling progress bar */
/* #header {
    display: none;
    position: fixed;
    top: 2vw;
    width: 87vw;
    z-index: 4;
    margin-left: 9vw;
    margin-right: 4vw;
}

#progressContainer {
    background-color: rgba(120, 120, 120, 0.2);
    width: 90%;
    height: 1px;
}

.progress-bar {
    background-color: rgba(0, 0, 0, 1);
    width: 100%;
    height: 1px;
}

#progressBarTip {
    position: absolute;
    top: -2.2vw;
    width: 87vw;
    font-size: 15px;
    font-family: FFGoodPro-News;
    text-align: center;
    color: #6d6d6d;
    transition: ease-in 1s;
    visibility: visible;
    opacity: 0.8;
} */

/* =================================================================== */
/* ==================== INDIVIDUAL PROJECT STYLES ==================== */
/* =================================================================== */

#tangledTapestryCanvas {
    background-color: rgba(255, 254, 237, 0.9);
}

#tangledTapestryCanvas .title-card div h2 {
    color: #000;
    text-shadow: 5px 5px #d84949;
}

#echoesOfTheRoadCanvas {
    background-color: rgba(229, 240, 229, 0.9);
}

#thePeopleOfDjerdapCanvas {
    background-color: rgba(173, 34, 122, 0.9);
}