main {
    display: block;
}

h1, h2, h3, h4 {
    font-family: 'Syncopate', sans-serif;
}

li {
    margin-bottom: 0em;
    margin-top: 0em
}

a {
    color: white;
}

p, li {

    font-size: 14pt;
}

li p {
    margin-top: 0px;
}

section {
    width: 100%;
    padding: 3em;
    padding-top: 0em;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
}


#map {

    z-index: 3;
    margin-top: 2em;
    width: 60%;
    height: 80vh;
    border: 3px solid white;
}

#map section {
    padding: 0em;
}
#map p {
    font-size: 10pt;
}

hr {
    margin-bottom: 0px;
    border: 1px solid #ffffff80;
}
#routeInfo {

    width: 40%;
    padding: 1em;
    padding-left: 0px;
}

.flex {
    display: flex;
    justify-content: center;
    gap: 1em;
}

.scroll {
    max-height: 40vh;
    overflow: scroll;

}

#important {
    background-color: rgba(200, 50,50, 0.4);
    font-style: normal;
    border-radius: 10px;
    padding-bottom: 1em !important;
}

#important h2 {
    text-align: center;
}


.transportInfo {
    background-color: var(--site-pink-transparent);
    padding: 1em;
    max-width: 45%;
    padding-bottom: 0em;
    border: 1px solid #ffffff00;
    /* filter: drop-shadow(3px 3px 3px black) */

}

.transportInfo:hover {
    border: 1px solid #ffffff70;
}

.transportInfo h2 {
    text-align: center;
}

.transportInfo h3 {
    margin-bottom: 0px;
}
.transportInfo p {
    margin-left: 0.5em
}

.collapsible {
    width: 100%;
    display: block;
    border: none;
    background-color: #00000000;
    color: white;
    cursor: pointer;
}

.collapsible:hover {
    background-color: #ffffff10
}

.collapsible.active {
    background-color: #eeeeee;
    color: black;
}

.collapsibleContent {
    border-left: 1px solid #ffffff40;
    padding-left: 1em;
    margin-left: 3em
}
.collapsible h2 {
    text-align: left;
}


@media (max-width: 768px) {

    #map {
        width: 100%;
        height: 60vh;
    }
    #routeInfo {

        width: 100%;
        padding: 0em;
    }

    .flex {
        display: block
    }
    .transportInfo {

        max-width: 100%;
    }


    .marginTop {
        margin-top: 2em;
        max-width: 100%;
    }

}