left-sidebar {
    height: 90vh;
    top: 5vh;
    position: sticky;
}

    @media screen and (max-width: 1250px) {
        .page-elements {
            gap: 0;
        }

        left-sidebar {
            background-image: url("../assets/tifa_no_background.png");
            background-position: right;
            background-size: cover;

            --left-page-width: 40%;
            --min-left-page-width: 0;

        }

        left-sidebar .left-bottom-elements .left-sidebar-lower-buttons {
            width: 60%;
        }
    } 

    @media screen and (max-width: 1000px) {
        left-sidebar {
            background-image: none;
            top: 0;
        }

            left-sidebar .left-bottom-elements .left-sidebar-lower-buttons {
                width: 100%;
            }
    }

#review-content, #info-content {
    display: flex;
    flex-direction: column;
    gap: 3rem;    
    width: var(--middle-page-width);   
    padding: 1rem;
}

/* HEADER ========================================================================================================================== */

.article-header {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    color: var(--dark-text);
    margin-bottom: 2rem;
}

    .article-header .spoiler-options {
        width: 100%;
    }

        @media screen and (max-width: 1000px) {
            .article-header .spoiler-options .button-text {
                font-size: 1rem;
            }
        }

    .article-header img {
        height: 100%; width: 100%;
        max-height: 30vh;
        object-fit: cover;
    }
    
    .article-header h3 {
        align-self: end;
    }

    .article-header::after {
        content: "";
        height: 0.5rem;
        width: 100%;
        background-color: var(--primary-accent);
    }

/* PAGE STYLING =============================================================================================================== */

.text-section, .text-section-no-margin {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-right: 0.25rem;
}

.text-section {
    margin-bottom: 3rem;
}

    .text-section h2 {
        margin-bottom: 1rem;
    }

    .text-section img {
        object-fit: contain;
        max-height: 50vh;
        margin: 1rem 0;
    }

    @media screen and (max-width: 900px) {
        .text-section {
            gap: 1rem;
        }
    }

.image-quote {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    width: 100%;
    margin-bottom: 1rem;
}

    .image-quote img {
        width: 50%;
    }

    .image-quote .quote {
        width: 25%;
    }

        .image-quote .quote .speaker {
        text-align: right;
        }

    @media screen and (max-width: 650px) {
        .image-quote {
            flex-direction: column;
            gap: 1rem;
        }

        .image-quote img {
            width: 100%;
        }

        .image-quote .quote {
            width: 75%;
        }
    }

/* LAYOUTS =========================================================================================================================================== */

.two-column {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    height: 100%;
    width: 100%;
}

    .two-column .text-section {
        
    }

.two-column div {
    width: 100%;
    height: 100%;
}

.two-column img {
    width: 100%;
}

.two-column .text-section-no-margin {
    width: 100%;
}

    @media screen and (max-width: 1000px) {
        .two-column  {
            flex-direction: column;
        }
    }

/* DIRECTORY SECTION ================================================================================================================ */

.directory-container {
    width: 100%;

    display: flex;
    align-self: center;

    gap: 10rem;
}

    .directory-container .right {
        width: 40%;
    }

    .directory-container .left {
        height: 100%;
    } 

    @media screen and (max-width: 1000px) {
        .directory-container {
            flex-direction: column;
            gap: 2rem;
        }

        .directory-container .right {
            width: 100%;
        } 
    }

/* SPOILER STYLING ============================================================================================================================ */

.no-spoilers .spoilers, .no-spoilers .single-line-spoilers, .no-spoilers .hide-with-spoilers {
    display: none;
}

.spoiler-tags .spoilers span, .spoiler-tags .spoilers span a, .spoiler-tags .single-line {
    background-color: var(--dark-text);
}

    .spoiler-tags .single-line:hover {
        background-color: var(--background);
    }

    .spoiler-tags .spoilers:hover span, .spoiler-tags .spoilers:hover i, .spoiler-tags .spoilers:hover a { /* if the user hovers over the div with the spoilers show all lines (makes it so they have hover over the gutters and still see the spoilers) */
        /* color: var(--background); */
        background-color: var(--background);
    }

.spoiler-tags img.spoilers { /* image spoiler */
    opacity: 0.75;
    filter: brightness(0%);
}

    .spoiler-tags img.spoilers:hover {
        opacity: 1;
        filter: brightness(100%);
    }

.spoiler-tags div.spoilers p span { /* image quote spoiler */
    background-color: var(--dark-text);
}

    .spoiler-tags div.spoilers:hover p span {
        background-color: var(--background);
    }

    .spoiler-tags img.spoilers:hover + .spoilers > p > span, .spoiler-tags img.spoilers:hover + .spoilers > p > span > a { /* when hoving over the image also reveal the quote */
        background-color: var(--background);

        /* this does not work in the other direction (overing over a quote shows an image) because
            1) its hard :smiles:
            2) i think it makes more sense this way since an image can spoil much more than a quote
                maybe someone is using the hover tags to see if theyd be spoiled by something or not
                if they hover over the quote and theyre fine with it- then they can hover over the image and see it as well
        */
    }

/* INFO PAGE =========================================================================================================================================== */

#info-header {
    display: flex;
    gap: 1rem;
    width: 100%;
}

#info-header img {
    height: 100%;
    width: 25%;
}

#info-header h1 {
    margin: 0;
}

.header-divider {
    height: 1rem;
    width: 50%;
    background-color: var(--secondary-accent);
    margin-bottom: 1rem;
}

#frog-ix-image {
    width: 20rem;
}

/* BOTTOM ARROW THAT GOES BACK TO THE TOP OF THE PAGE ========================================================================================================== */

.back-to-top {
    border: 0.15rem solid var(--dark-text);
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: end;
    text-decoration: none;
    background-color: var(--primary-accent);

    width: 4rem;
}

    .back-to-top:hover {
        background-color: var(--secondary-accent);
    }

.back-to-top h4 {
    font-size: 2rem;
    color: var(--background);
}

    .back-to-top:hover h4 {
        color: var(--dark-text);
    }