@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 (max-width: 767px) and (orientation: portrait) {

    .container_base
    {
        background-color: #F5F5F5;
    }

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

    .LocationStoryPanel
    {
        display: flex;
        /* height: 1024px; */
        padding: 24px;
        /* top: 334px; */
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        flex-shrink: 0;
        overflow-y: hidden;
        overflow-x: none;
        /* width: 100%; */
    }

    .TimelinePanel
    {
        display: flex;
        /* height: 1024px; */
        height: 100vh;
        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: 20px;
        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: 16px;
        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: 14px;
        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: 14px;
        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: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    .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: 16px;
        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;
        top: 0px;
        right: 0px;
        padding: 24px;
        height: 48px;
        display: flex;
        z-index: 10000;
    }

    .FloatingUIPanel > .NavigationButton_Base
    {
        margin-left: auto;
    }

    .MainMenuContainer
    {
        width : 100%;
        height : 334px;
        bottom : 0;
        left: 0;
        background: #F5F5F5;
        border-radius: 8px 8px 0px 0px;
        box-shadow: 0px 2px 100px 0px rgba(0, 0, 0, 0.10);
        position: absolute;
        overflow-y: auto;
    }

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

    #modal_intro
    {
        display: flex;
        /* width: 1100px; */
        width: 100vw;
        max-height: 80vh;
        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; */
        height: 12vh;
        min-height: 12vh;
        align-self: stretch;
        background: #D9D9D9;
        background-image: url('GE_introImage.png');
        background-size: 100% 100%;
        /* 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: 12px;
        align-self: stretch;
        max-height: 56px;
    }

    #modal_intro_controls_filler
    {
        flex: auto;
    }

    .intro_button
    {
        display: flex;
        height: 16px;
        padding: 8px;
        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: 14px;
        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_header
    {
        color: #222;
        font-family: Libre Baskerville;
        font-size: 26px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    .intro_content_credit_block
    {
        flex: 1 0 0;
        text-align: right;
    }

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

    .intro_content_text
    {
        color: #222;
        font-family: "Source Sans 3";
        font-size: 16px;
        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
    {
        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_page_1
    {
        width: 100vw;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .modal_tutorial_page_2
    {
        width: 100vw;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .modal_tutorial_page_3
    {
        width: 100vw;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    #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;
        width: calc(100vw - 48px);
        padding: 24px;
        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: 100vw;
        /* 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;

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

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