body {margin: 0px 0px; padding: 0; height: 100vh;
}

a {
    text-decoration: none;
}


.header-container {
    position: fixed;
    top: 0;
    width: 100%;
    height: 95px;
    background-color: #f3f3df;
    z-index: 2;

}

.banner {
    width: 25%;
    display: inline-block;
}

.banner h1 {
    font-size: 28px;
    line-height: 0.8;
    letter-spacing: 4px;
    margin-left: 180px;
    margin-top: -80px;
    width: fit-content;

}

.banner h1 .subtitle {
    font-family: "manofa-condensed", sans-serif;
    font-size: 16px;
    letter-spacing: 0;
    opacity: 70%;
    text-transform: uppercase;
}

.top-nav {
    width: 70%;
    margin-left: 300px;
    margin-top: -60px;
    background-color: transparent;
    font-family: "manofa-condensed", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    text-align: right;
    text-transform: uppercase;

}

.top-nav a {
    color: darkolivegreen;
    padding: 0 20px;
}


.top-nav a.active {
    color: darkkhaki;
    font-weight: 600;

}

.topicon {
    margin: 20px 30px 20px 100px;
}


h1 {
    font-family: "manofa", sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 36px;
    color: darkolivegreen;
    text-align: left;
}


.intro_header {
    display: block;
    margin-top: 100px;
}

.intro_header h1 {
    font-family: "manofa-condensed", sans-serif;
    font-size: 84px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    margin: 0;
}

h2, h3 {
    font-family: "manofa", sans-serif;
    color: darkolivegreen;
    font-weight: 300;
}

h2 {
    padding-bottom: 10px;
}

p {
    font-family: haboro-contrast-normal;
    line-height: 1.5;
}

a {
    color: darkkhaki;
}

a:hover {
    font-weight: 600;
    color: #ffdd55;

}

ul {
    font-family: haboro-contrast-normal;
    font-size: 1rem;
    list-style-image: url(img/duriansmall-01-01.svg);

}

li {
    padding-left: 7px;
}

.main {
    display: block;
    padding: 0px 20px 10px 20px;
    margin: 150px 200px 40px 200px;
    height: 618px;
}

.main_map {
    display: block;
    padding: 0px 20px 0px 20px;
    margin: 0px 200px 0px 200px;
    height: fit-content;
    text-align: center;
}

.main_diary {
    padding: 0px 20px 10px 20px;
    margin: 150px 180px 40px 180px;
    height: 1300px;
}

.main_diarytext {
    width: 760px;
    height: fit-content;
    padding-right: 40px;
    padding-bottom: 80px;
    float: left;
}

.main_diarytbl table{
    display: inline-block;
    padding-left: 5px;
}

table {
    font-family: haboro-contrast-condensed;
    font-size: 13px;
    text-transform: uppercase;
}

table th.tbltitle {
    background-color: transparent;
    font-family: haboro-contrast-normal ;
    font-size: 16px;
}

th {
    padding: 5px 5px;
    background-color: rgba(179, 179, 37, 0.16);
    border-radius: 3px;
    color: darkolivegreen;

}

td {
    text-align: center;
    background-color: #ffdd55;

}

.highlights {
    margin-left: 800px;
    margin-right: 40px;
    margin-top: 30px;
    padding: 5px 10px 5px 10px;
    border: 3px dotted #ffdd55;
}

.highlights p {
    margin: 5px;
}

.highlights ul {
    padding-left: 20px;
    margin-top: 0px;
}

.highlights li {
    margin-bottom: 5px;
    font-size: 15px;
}


#box .highlights {
    margin: 50px 35% 0 35%;

}

.intro {
    display: flex;
    align-items: stretch;
    height: 550px;
    padding: 0 15%;
    /* background-color: beige; */
} 

.intro_left {
    flex: 0 0 25%;
    padding: 2%;
}

.intro .intro_left .caption {
    font-size: 11px;
    font-style: italic;
    line-height: 0;
    color: rgba(85, 107, 47, 0.655);
    width: 250px;
}

.intro_right {
    flex-direction: column;
    display: flex;
    flex-grow: 1;
}

.intro_right_top.intro_right_bottom {
    padding: 2%;
}


.intro_right li {
    list-style-image: url(img/duriansmall-01-01.svg);
    padding-left: 7px;
    line-height: 2;
}

/* SVG Styling Starts Here */

.season {
    display: flex;
    background-color: none;
    position: relative;
    top: 95px;
    flex-wrap: nowrap;
    justify-content: center;
    height: 89%;
    margin-bottom: 5%;
}

.season > * {
    flex-grow: 1;
    padding-top: 5%;
    text-align: center;
    align-items: center;
    font-family: "lemongrass-script", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 48px;
    width: max-content;
    color: rgba(85, 107, 47, 0.611);
}

.may {
    background-color: #ffeb75;

}

.june {
    background-color: #ffdd55;
}

.july {
    background-color: #ffcc12;
}

.august {
    background-color: #fbaa28;
}

.mymap {
    display: inline;
    position: absolute;
    bottom: 0%;
    z-index: 1;
    opacity: 60%;
    margin-left: 20vw;
}

.mymap svg {
    height: 40vh;
    width: auto;
}

path#johor_st:hover, path#pahang_st:hover, path#sabah_st:hover, #penang_st:hover path{
    stroke-width: 3px ;
    stroke: #00cd0a;
}

path.jo.active, path.pa.active, path.sa.active, .pe.active path{
    stroke-width: 3px ;
    stroke: #00cd0a;
    opacity: 1;
}


.route {
    display: inline;
    position: absolute;
    top: 40%;
    left: 10%;
    z-index: 2;
}

#dpenang, #djohor, #dpahang, #dsabah {
    fill: url(#pointers);
}

#pointers polygon {
    fill: darkgreen;

}

#line {
    animation: dash 30s linear reverse infinite;
}

@keyframes dash {
  to {
    stroke-dashoffset: 1000;
  }
}

#penang:hover path, #johor:hover path, #pahang:hover path, #sabah:hover path {
    stroke-width: 1.5;
    fill: #668000;
    animation: bounce 3s ease-in-out infinite;
}

@keyframes bounce {
  0%,
  25%,
  50%,
  75%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-24px);
  }
  60% {
    transform: translateY(-12px);
  }
}

/* SVG styling ends here */



.grid-container {
    height: 800px;

}

.grid-hex {
    position: relative;
    display: grid;
    grid-template-columns: auto auto auto;
    justify-content: center;
    column-gap: 300px;
    height: 200px;

}

.grid-container-mobile {
    display: none;
}

.grid-hexitem  {
    width: 85px;
    height: 85px;
    background-color: #d7bb72;
    background-image: url("/img/fruit-gd4cb9a8bc_640.jpg");
    background-size: cover; 
    background-blend-mode: darken, luminosity;
    border: 5px solid rgba(85, 107, 47, 0.571);
    border-radius: 15px;
    outline: 1.5px dotted white;
    outline-offset: -13px;
    padding: 20px;
    text-align: center;
    transform: translateY(35px) rotate(45deg);
}

.grid-hexitem h3 {
    transform: translateX(-7px) rotate(-45deg);
    padding-top: 10px;
    text-transform: uppercase;
    font-family: "manofa-condensed", sans-serif ;
    font-size: 22px;
    color: #f4f4e0;
    justify-content: center;
    text-align: center;
}

.grid-hex-sub {
    position: relative;
    display: grid;
    grid-template-columns: auto auto auto;
    justify-content: center;
}

.grid-hex-subitem {
    width: 350px;
    padding: 20px;
    line-height: 1.5;
    list-style-image: url(/img/duriansmall-01-01.svg);
    border: 20px solid white;
    border-radius: 50px;
    background-color: rgba(179, 179, 37, 0.16);
}

.grid-hex-subitem ul {
    padding-inline-start: 20px;
}

.grid-hex-subitem li {
    margin-bottom: 10px;
    padding-left: 7px;
}

#leafletmap {
    height: 60vh;
    width: 80vw;
    display: inline-block;
    margin-bottom: 35px;
    margin: 0 10vw 35px;
    z-index: 0;
}

.leaflet-control {
    font-family: haboro-contrast-normal;
}

.map {
    position: relative;
    display: block;
    margin-left: 30%;
    margin-bottom: 40px;
    width: 600px;
    height: 491px;
    text-align: center;
    text-transform: uppercase;
    font-family: "manofa-condensed", sans-serif ;
    font-size: smaller;
    background-image: url(/img/Southeast_Asia_blank_political_map-01.png);
    background-size: 100% 100%;

}

.map p {
    line-height: 1.2;
    font-size: smaller;

}

.map .marker1 {
    position: absolute;
    height: 60px;
    width: 65px;
    top: 41%;
    left: 5%;
    z-index: 1;
    color: #66BC46;

}

.map .marker2 {
    position: absolute;
    text-align: center;
    height: 60px;
    width: 65px;
    top: 50%;
    left: 26%;
    z-index: 1;
    color: #FFCD05;

}

.map .marker3 {
    position: absolute;
    text-align: center;
    height: 60px;
    width: 65px;
    top: 76%;
    left: 38%;
    z-index: 1;
    color: #006933;

}


.map .rectangle {
    position: absolute;
    height: 55px;
    width: 55px;
    top: 10%;
    right: 7%;
    z-index: 1;
    border: 2px solid #fb8e00;
    border-radius: 50px;
    filter: blur(2px)
}

.map .legend {
    position: absolute;
    height: 70px;
    width: 95px;
    top: 45%;
    right: 10%;
    z-index: 1;
    border: 1px dotted darkkhaki ;
    border-radius: 10px;

}

.map .legend ul {
    list-style: none;
    padding-left: 8px;
    font-size: 12px;
    text-transform: capitalize;
    text-align: left;
    
}

.map img {
    vertical-align: middle;
}

.source {
    font-size: 11px;
    font-style: italic;
    color: rgba(85, 107, 47, 0.655);
    text-align: right;
}

#mapsource {
    text-align: center;
}

.grid-container .source {
    text-align: center;
}

.footer {
    display: block;
    text-align: center;
    color: rgba(85, 107, 47, 0.76);
    padding: 50px 5% 20px 5%;
}

.footer p {
    line-height: 1;
    font-size: 12px;

}


/* Responsive CSS */

/* Break 1 */
@media (max-width: 650px) {

    .header-container {
        height: fit-content;
        padding-bottom: 3%;
    }

    .top-nav {
        display: block;
        margin: 2% 0 0 0;
        width: 100vw;
        text-align: center;

    }

    .intro_header {
        margin-left: 0%;
        margin-top: 35%;
    }

    .intro { 
        flex-flow: column wrap;
        margin: 0;
        padding: 0 5%;
        height: fit-content;
    }

    
    .intro .intro_right li {
        padding-left: 0;
        margin-left: 0;
    }

    #box {
        display: none;
    }


    .grid-container {
        display: none;
    }

    .grid-container-mobile {
        display: block;
        margin: 2%;
    }

    .grid-hex, .grid-hex-sub {
        display: block;
        width: 75vw;
        height: fit-content;
        margin: 0;

    }


    .grid-hex-subitem {
        margin: 0%;
        width: 100%;
    }

    .grid-hexitem {
        width: 55px;
        height: 55px;
        margin-left: 35vw;
        margin-bottom: 5vh;

    }

    .grid-hexitem h3 {
        font-size: 16px;

    }

    .topicon {
        margin: 18px 20px 25px 24vw;
    }

    .banner h1 {
        margin-left: 40vw;
    }
    
    .intro_header h1{
        font-size: 60px;
    }

    .main_map {
        margin: 0 0 30px 0;
    }

    #leafletmap {
        height: 80vh;
        width: 100vw;
        margin: 0;
    }

    .map {
        position: relative;
        width: 90vw;
        background-size: contain;
        background-repeat: no-repeat;
        margin-left: 5%;
        margin-top: 5%;
        margin-bottom: 0;
    }

    .map .marker1 {
        left: 0;

    }

    .map .marker2 {
        left: 24%;

    }

    .map .marker3 {
        top: 80%;
        left: 39%;
    }
    
    .map .rectangle {
        top: 9%;
        right: 3%;
    }

    .map .legend {
        top: 40%;
    }
}

/* Break 2 - iPhone12 Pro on Chrome Developer Tools */ 
@media (max-width: 400px) {

    .grid-hex, .grid-hex-sub {
        margin: 0;
    }

    .grid-hexitem {
        margin-left: 45%;

    }

    #leafletmap {
        height:100vh;
        width: 100vw;
        margin: 0;
    }

    .map {
        height: 35%;
    }

    .map .marker2 {
        top: 45%;
        left: 24%;

    }

    .map .marker3 {
        top: 85%;
    }
    

    .map .legend {
        top: 35%;
        right: 5%

    }

    .season .item {
        padding-top: 30%;
        font-size: 25px;
    }

    .mymap {
        padding: 0;
        margin-left: 2vw;
    }

    .mymap svg {
        width: 98vw;
        height: auto;
        margin-bottom: 25vh;
    }

    .route svg {
        transform: scale(1.2,1.2);
    }

}

/* Break 3 - Tablets (iPad Mini) */
@media (max-width: 768px) and (min-width: 650px) {

    .intro_header {
        padding-bottom: 5vw;
        margin-top: 15vw;
        margin-left: 5vw;
        margin-right: 5vw;
    }

    .intro {
        flex-flow: column wrap;
        height: fit-content;
        padding: 0 5%;
    }

    .intro_left {
        text-align: center;
    }

    .topicon {
        margin-left:10vw;
    }

    .banner h1 {
        margin-left: 20vw;
    }

    .top-nav {
        margin-left: 200px;
        margin-top: -55px ;
    }


    .grid-container {
        display: none;
    }

    .grid-container-mobile {
        display: block;
    }

    .grid-hex {
        grid-template-columns: 20% 80%;
        height: fit-content;
        column-gap: 20px;
        margin: 0%;
        margin-left: 7%;
    }

    .grid-hex-subitem {
        width: 60vw;
        margin-right: 10%;
    }

    #leafletmap {
        height:70vh;
        width: 100vw;
        margin: 0;
    }

    .map {
        margin-left: 10%;

    }

    .season .item {
        padding-top: 20%;
        font-size: 25px;
    }

    .mymap {
        padding: 0;
        margin-left: 0;
    }

    .mymap svg {
        width: 100vw;
        height: auto;
        margin-bottom: 20vh;
    }

    .route svg {
        transform: scale(1.2,1.2);
    }
    
}