@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');

@media (min-width: 768px) {

    .container_base
    {
        background-color: #F5F5F5;
    }

    .button_base
    {
        background-color: #E2E1D6;
        color: #222222;
        border-radius: 100px;
        padding: 16px;
    }

    .LocationStoryPanel
    {
        display: flex;
        /* height: 1024px; */
        height: calc(100vh - 48px);
        padding: 24px;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        flex-shrink: 0;
        overflow-y: auto;
    }

    .TimelinePanel
    {
        display: flex;
        /* height: 1024px; */
        height: 100vh;
        padding: 24px;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        flex-shrink: 0;
    }

    /* .LocationStoryPanel
    {
        display: flex;
        height: 1024px;
        padding: 24px;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        flex-shrink: 0;
    } */

    .LocationStory_MainTitle
    {
        flex: 0 1 0;
        color: #595025;
        font-family: Libre Baskerville;
        font-size: 32px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    .TitleNavigationTitle
    {
        flex: 0 1 0;
        color: #595025;
        font-family: Libre Baskerville;
        font-size: 32px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    .LocationStory_SubTitle
    {
        align-self: stretch;
        color: #595025;
        font-family: Libre Baskerville;
        font-size: 24px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    .LocationStory_EncounterInfo
    {
        align-self: stretch;
        color: #222;
        font-family: 'Source Sans 3';
        font-size: 18px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    .LocationStory_TextContent
    {
        /* flex: 1 0 0; */
        flex: 0 1 0;
        align-self: stretch;
        color: #222;
        font-family: 'Source Sans 3';
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        height: 100%;
    }


    .LocationStory_QuotedTextContent
    {
        /* flex: 1 0 0; */
        align-self: stretch;
        color: #222;
        font-family: 'Source Sans 3';
        font-size: 18px;
        font-style: italic;
        font-weight: 400;
        line-height: normal;
    }

    .LocationStory_ReferenceTextContent
    {
        /* flex: 1 0 0; */
        align-self: stretch;
        color: #595025;
        font-family: 'Source Sans 3';
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        overflow-wrap: break-word;
    }

    .NavigationButton_Base
    {
        display: flex;
        height: 48px;
        /* padding: 16px; */
        padding-left: 16px;
        padding-right: 16px;
        justify-content: center;
        align-items: center;
        gap: 8px;
        max-height: 48px;
        user-select: none;

        border-radius: 100px;
        background: #E2E1D6;
    }

    .NavigationButton_Base:hover
    {
        background: #C6C3A1;
    }

    .NavigationButton_Label
    {
        color: #222;
        text-align: center;
        font-family: 'Roboto';
        font-size: 16px;
        font-style: normal;
        /* font-weight: 510; */
        font-weight: 500;
        line-height: normal;
        vertical-align: middle;
        user-select: none;
    }

    .material-symbols-outlined
    {
        font-size: 16px;
        vertical-align: middle;
        font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
    }

    .TitleNavigationBar
    {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        align-self: stretch;
        height: 48px;
        max-height: 48px;
    }

    .TimelineContentPanel
    {
        display: flex;
        flex-direction: row;
        width: 100%;
    }

    .TimelineBarPanel
    {
        display: flex;
        padding: 8px;
        flex-direction: column;
        align-items: flex-start;
        gap: 74px;
        align-self: stretch;
        border-radius: 16px;
    }

    .TimelineBarPanelBackground
    {
        position: absolute;
        z-index: 0;
        background-color: #E2E1D6;
        width: 8px;
        left: 0;
        right: 0;
        margin: auto;
        height: calc(100%);
        top: 0;
        bottom: 0;
    }

    .TimelineYearContainer
    {
        display: flex;
        padding: 4px 8px;
        justify-content: center;
        align-items: center;
        gap: 8px;
        border-radius: 100px;
        background: #E2E1D6;
        user-select: none;
    }

    .TimelineYearLabel
    {
        color: #595025;
        font-family: 'Source Sans 3';
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        user-select: none;
    }

    .TimelineEncountersPanel
    {
        flex: 1 0 0;
        align-self: stretch;
    }

    .TimelineEncounterContainer
    {
        display: flex;
        /* width: 359px; */
        width: 327px;
        padding: 12px 16px;
        align-items: center;
        gap: 8px;
        border-radius: 16px;
        background: #FFF;
        /* position: relative; */
        position: absolute;
        user-select: none;
    }

    .TimelineEncounterContainer:hover
    {
        background: #E2E1D6;
    }

    .TimelineEncounterLabel
    {
        flex: 1 0 0;
        color: #595025;
        font-family: 'Source Sans 3';
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        user-select: none;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

    .TimelineGoButton
    {
        color: #595025;
        font-family: Roboto;
        font-size: 20px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        user-select: none;
    }

    .FloatingUIPanel
    {
        position: fixed;
        width: 480px;
        padding: 24px;
        height: 48px;
        display: flex;
        z-index: 2001;
    }

    .FloatingUIPanel_Left
    {
        top: 0px;
        left: 0px;
    }

    .FloatingUIPanel_Left > .NavigationButton_Base
    {
        margin-right: auto;
    }

    .FloatingUIPanel_Right
    {
        top: 0px;
        right: 0px;
    }

    .FloatingUIPanel_Right > .NavigationButton_Base
    {
        margin-left: auto;
    }
    
    .MainMenuContainer
    {
        width : 480px;
        position: fixed;
        right: 0 !important;
        top: 0;
        z-index: 3000;
        overflow-y: auto;
        background: #F5F5F5;
        box-shadow: 0px 2px 100px 0px rgba(0, 0, 0, 0.10);
    }

    #modal_bg
    {
        position: absolute;
        /* width: 100%;
        height: 100%; */
        /* background-color: #000; */
        opacity: 50%;
        z-index: 25000;
        margin: 0 0;
        overflow: none;
        /* left: 0; */
        top: 0;
    }

    .modal_bg_full
    {
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background-color: #000;
    }

    .modal_bg_map
    {
        /* width: calc(100% - 480px);
        height: 100%;
        left: 0;
        top: 0; */
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background: repeating-linear-gradient(
            to right,
            black 0%,
            black calc(100% - 480px),
            transparent calc(100% - 480px),
            transparent 100%
        )
    }

    .modal_bg_timeline
    {
        /* width: 480px;
        height: 100%;
        right: 0;
        top: 0; */
                /* width: calc(100% - 480px);
        height: 100%;
        left: 0;
        top: 0; */
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background: repeating-linear-gradient(
            to right,
            transparent 0%,
            transparent calc(100% - 480px),
            black calc(100% - 480px),
            black 100%
        )
    }

    #modal_intro
    {
        display: flex;
        width: 1100px;
        max-height: 70vh;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        flex-shrink: 0;
        align-self: stretch;
        z-index: 25001;
        position: absolute;
        border-radius: 16px;
        background: #FFF;
        max-height: 90vh;

        /* left: calc(50% - 596px); */
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    #modal_intro_container
    {
        width: 100vw;
        height: 100vh;
        position: absolute;
        margin: 0;
        padding: 0;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: none;
    }

    #modal_intro_top
    {
        height: 298px;
        min-height: 298px;
        align-self: stretch;
        background: #D9D9D9;
        background-image: url('GE_introImage.png');
        background-size: contain;
        background-position: -240%;
        border-radius: 16px 16px 0 0;
    }

    #modal_intro_header
    {
        display: flex;
        max-height: 48px;
        /* padding: 48px; */
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 16px;
        flex: 1 0 0;
        align-self: stretch;
    }

    #modal_intro_content
    {
        display: flex;
        /* padding: 48px; */
        /* min-height: 160px;
        max-height: 480px; */
        height: 220px;
        min-height: 220px;
        flex-direction: column;
        /* justify-content: center; */
        align-items: flex-start;
        gap: 16px;
        flex: 1 0 0;
        align-self: stretch;
        overflow-y: scroll;
    }

    #modal_intro_content_container
    {
        display: flex;
        padding: 48px;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 16px;
        flex: 1 0 0;
        align-self: stretch;
    }

    #modal_intro_controls
    {
        display: flex;
        padding-top: 8px;
        justify-content: flex-end;
        align-items: center;
        gap: 16px;
        align-self: stretch;
        max-height: 56px;
    }

    #modal_intro_controls_filler
    {
        flex: auto;
    }

    .intro_button
    {
        display: flex;
        height: 16px;
        padding: 16px;
        justify-content: center;
        align-items: center;
        gap: 8px;

        border-radius: 100px;
        background: #FFF;

        color: #222;
        text-align: center;
        font-family: "Source Sans 3";
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        user-select: none;
    }

    .intro_button:hover
    {
        border-radius: 100px;
        background: #E2E1D6;
    }

    .intro_content_block
    {
        flex: 1 0 0;
        align-self: stretch;
    }

    .intro_content_credit_block
    {
        flex: 1 0 0;
        align-self: stretch;
        top: 310px;
        position: fixed;
        text-align: right;
        width: calc(100% - 96px);
    }

    .intro_content_img_credit
    {
        color: #888;
        font-family: "Source Sans 3";
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    .intro_content_header
    {
        color: #222;
        font-family: Libre Baskerville;
        font-size: 46px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    .intro_content_text
    {
        color: #222;
        font-family: "Source Sans 3";
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    .intro_content_text > a
    {
        color: #7f7751;
    }

    .intro_content_footnote
    {
        color: #888;
        font-family: "Source Sans 3";
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    #modal_tutorial_outer
    {
        display: flex;
        flex-direction: row;
    }

    #modal_tutorial
    {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        flex-shrink: 0;
        align-self: stretch;
        z-index: 25001;
        position: absolute;
        border-radius: 16px;
        background: #FFF;
        max-height: 90vh;
        padding: 48px;
    }

    #modal_tutorial_arrow_right
    {
        width: 36px;
        height: 36px;

        top: 50%;
        right: 0;
        transform: translate(-494px, -50%);
        position: absolute;
        z-index: 30000;
    }
    
    #modal_tutorial_arrow_left
    {
        width: 36px;
        height: 36px;
        top: 50%;
        right: 0;
        transform: translate(-440px, -50%);
        position: absolute;
        z-index: 30000;
    }

    .modal_tutorial_page_1
    {
        width: 600px;
        /* left: calc(50% - 596px); */
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .modal_tutorial_page_2
    {
        /* width: 600px; */
        width: 552px;
        /* left: calc(50% - 596px); */
        top: 50%;
        right: 0;
        transform: translate(-528px, -50%);
        /* right: 576px; */
    }
    
    .modal_tutorial_page_3
    {
        /* width: 432px; */
        width: 320px;
        /* left: calc(50% - 596px); */
        top: 50%;
        right: 0px;
        transform: translate(-24px, -50%);
        /* right: 48px; */
    }

    #modal_tutorial_container
    {
        width: 100vw;
        height: 100vh;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }

    .modal_tutorial_top
    {
        height: 298px;
        min-height: 298px;
        align-self: stretch;
        background: #D9D9D9;
        border-radius: 16px 16px 0 0;
    }

    .modal_tutorial_content
    {
        display: flex;
        /* padding: 48px; */
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 16px;
        flex: 1 0 0;
        align-self: stretch;
    }

    .modal_tutorial_controls
    {
        display: flex;
        padding-top: 8px;
        justify-content: flex-end;
        align-items: center;
        gap: 16px;
        align-self: stretch;
    }

    .intro_tutorial_content_header
    {
        color: #222;
        font-family: "Source Sans 3";
        font-size: 24px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    #modal_credits_container
    {
        width: 100vw;
        height: 100vh;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }

    #modal_credits
    {
        display: flex;
        /* width: 1100px; */
        max-height: 440px;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        flex-shrink: 0;
        align-self: stretch;
        z-index: 25001;
        position: absolute;
        border-radius: 16px;
        background: #FFF;
        max-height: 90vh;
        padding: 48px;

        /* left: calc(50% - 596px); */
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .credits_list
    {
        columns: 4 152px;
        column-gap: 16px;
        list-style-type: none;
    }
}