.color1 {color: #bcb48c;}
.color2 {color: #cbc7a6;}
.color3 {color: #212d55;}
.color4 {color: #4d7a96;}
.color5 {color: #bcd9d8;}    
.color6 {color: #f8f8f8}

html, body {
    overflow-x: hidden;
    background-color: #f0dab3;
}

#intro {
    padding: 20px; 
    margin-top: 30px;
    margin-left: 30px;
    margin-right: 30px;  
    background-color: #f8f8f8;
    color: black;
    text-align: left;
    text-decoration: solid;
}

h2 {
    font-family:Crimson Text, serif;
}

p {
    font-size: 18px;
}

hr {
    color: #d18903;
}

.kanit-regular-italic {
    font-family: "Kanit", sans-serif;
    font-weight: 400;
    font-style: italic;
}

/*Map*/

.main_container {
    display: flex;
    flex-direction: row;
    padding: 40px;
}

.map_container {
    display: flex;
    background-color: white;
    width: fit-content;
    height: 700px;
    justify-content: center;
    align-content: center;
    flex-grow: 1;
    overflow: hidden;
    position: relative;
    padding-top: 75px;
    padding-bottom: 40px;
}

.image-mapper-shape {
    fill: aqua;
    opacity: 30%;
}

g:hover .image-mapper-shape {
    fill: blue;
    stroke: white;
    stroke-width: 2px;
    opacity: 30%;
}

.popover {
    background-color: white;
    align-items: center;
    max-width: 210px; 
    display: flex;
    flex-direction: column;
    padding: 0px;
    z-index: 0;
}

.popover-header {
    background-color: white;
    text-align: center;
    text-wrap: normal;
    color: black;
    padding-top: 17px;
}

.popover body {
    padding: 0px;
}

.popover img.vertical_img {
    width: 150px;
    height: 170px;
}

.popover img.horizontal_img {
    width: 170px;
    height: 150px;
}

.popover img.square_img {
    width: 180px;
    height: 180px;
}

/*Map navbar*/

.map_navbar {
    background-color: #8DADC1;
    padding: 0px;
    position: relative;
}

/*Map navba subnavigation*/
.narrative {
    float: left;
    overflow: hidden;
}

.narrative button {
    font-size: 18px;
    font-weight: 400;
    border: none;
    outline: none;
    text-decoration: none;
    color: black;
    padding: 20px 16px;
    background-color: inherit;
    position: relative;
}

.narrative button:hover {
    background-color: #4d7a96;
    color: white;
}

.narrative button.active {
    background-color: #4d7a96;
    color: white;
    text-decoration: underline;
}



.subnav-content {
    display: none;
    position: absolute;
    left: 0;
    background-color: lightblue;
    width: 100%;
    z-index: 1;
}

.subnav-content button:hover {
    background-color: #4d7a96;
    color: white;
}

.subnav-content button.active {
    background-color: #4d7a96;;
    color: white;
    text-decoration: underline;
}

/*Items link subnav*/
.sidebar {
    background-color: #8DADC1;
    float: right;
    margin: 0;          
    padding-top: 70px;
    padding-left: 0px;
    padding-right: 0px;
    width: 250px;
    height: 700px;
    overflow-y: auto;
    justify-content: center;
}

.sidebar a {
    font-weight: 400;
    display: block;
    color: black;
    padding: 16px;
    text-decoration: none;
    cursor: pointer;
}

.sidebar a:hover:not(.active) {
    background-color: #4d7a96;
    color: white;
}

.sidebar::-webkit-scrollbar {
    width: 14px;
}
.sidebar::-webkit-scrollbar-track {
    border-radius: 10px;
    background: #8DADC1;
}
.sidebar::-webkit-scrollbar-thumb {
    background: #4d7a96;
    border-radius: 10px;
}
.sidebar::-webkit-scrollbar-thumb:hover {
    background: #bcd9d8;
}

/*Explore th narrative button*/
.explore_this_narrative_button_container {
    display: flex;
    align-items: center;
    padding: 20px;
}
            
#narrative_button {
    display: none;
    background-color: #212d55;
    color: white;
    border-color: white;
    text-decoration: bold 20px;
    border-width: 3px;
    padding-top: 12px;
    justify-content: center;
    text-align: center;
}

#narrative_button:hover {
    background-color: white;
    color: #212d55;
    border-color: #212d55;
}

.items_links {
    display: none;
    flex-wrap: wrap; 
    justify-content: center; 
}

.items_links a:hover {
    background-color: #0056b3; 
}

@media screen and (max-width: 1300px) {
    
    .layout-container {
        flex-direction: column; /* Stack items vertically */
    }

    .sidebar {
        width: 100%; /* Full width for sidebar */
        height: 400px;
        overflow-y: auto;
    }

    .all_items {
        padding-top: 0px;
        justify-content: center;
        text-align: center;
    }

    .explore_this_narrative_button_container {
        align-items: center;
    }

    .map_container {
        height: auto; /* Allow map container height to adjust */
    }

    .popover {
        max-width: 150px;
    }

    .popover-header {
        flex-wrap: wrap;
        font-size: 15px;
        text-align: center;
    }

    .popover img.vertical_img {
        width: 100px;
        height: 120px;
    }

    .popover img.horizontal_img {
        width: 130px;
        height: 100px;
    }

    .popover img.square_img {
        width: 120px;
        height: 120px;
    }

    .explore_this_narrative_button_container {
        justify-content: center;
    }

    #narrative_button {
        width: 200px;
        height: 100px;
    }
    
    .item_links_container {
        justify-content: center;
        text-align: center;
    }

    .items_links {                   
        flex-direction: column; /* Stack links vertically */
        align-items: center; /* Center align items */
    }

    .items_links a {
        flex: 0 1 calc(50% - 10px); 
    }
}   

@media screen and (max-width: 770px) {

    #intro {
        margin-top: 35px;
        margin-left: 0px;
        margin-right: 0px;
    }

    .main_container {
        padding-left: 0px;
        padding-right: 0px;
    }

    .narratives_container {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto; 
        overflow-y: auto;
        justify-content: flex-start;
    }


    .narrative {
        width: 100%; 
        height: auto;
        text-align: center;
    }

    .narrative button {
        float: none;
        text-align: center;
        width: 100%;
        display: block;
        text-align: center;
        padding: 16px; 
        font-size: 16px;
    }

    .subnavbtn {
        display: block;       
        padding: 16px; 
        width: 100%; 
    }

    .subnav-content {
        
        flex-wrap: wrap;
        position: relative;
        justify-content: center;
    }

    .subnav-content button {
        display: inline-block;
        width: auto;
    }

    .explore_this_narrative_button_container {
        padding-top: 0px;
        padding-bottom: 16px;
    }

    #narrative_button {
        width: 200px;
        height: 60px;
        font-size: 15px;
        padding: 14px;
        text-align:center;
    }
    
    .sidebar {
        height: auto;
    }

    .sidebar a {
        text-align: center;
        float: none;
    }

    .popover {
        max-width: 35vw;
    }

    .popover-header {
        font-size: 15px;
        flex-wrap: wrap;
        padding: 5px;
    }

    .popover-body {
        padding: 4px;
    }

    .popover img.vertical_img {
        width: 22vw;
        height: 24vw;
    }

    .popover img.horizontal_img {
        width: 24vw;
        height: 22vw;
    }

    .popover img.square_img {
        width: 24vw;
        height: 24vw;
    }

}