header {
    details[open] nav {
        background-image: url("../img/background_grain_opt.png");
        box-shadow: var(--shadow);
        z-index: 1001;
        padding: 8px;
        border: 2px solid rgba(255, 255, 255, 0.1);
    }
}

body {
    height: 100vh;
    .main-container {
        height: 100vh;
        padding: 0;
    }
}

.map {
    position: relative;
    width: 100%;
    height: 100%;

    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
}

.map-overlay {
    position: absolute;
    z-index: 1000;
    padding: 8px 16px;
    border-radius: 4px;
    background-color: rgba(239, 239, 239, 0.8);
    right: 16px;
}

#map-info {
    width: 240px;
    top: 16px;
}

#map-radio {
    bottom: var(--default-pad);
}

.maplibregl-popup {
    max-width: 540px !important;
    width: 540px;
}

.maplibregl-popup-content {
    border-radius: 16px;
    padding: 0;
    box-shadow: var(--shadow);
}

.maplibregl-popup-close-button {
    color: var(--chill);
    font-size: var(--font-size-big);
    line-height: var(--line-height-big);
}

#obs-popup {
    display: flex;
    flex-direction: column;

    #obs-popup-header {
        display: flex;
        padding: var(--default-pad);
        gap: 16px;
        div {
            display: flex;
            flex-direction: column;
        }

        p {
            margin: 0;
            font-size: var(--font-size-small);
            line-height: var(--line-height-small);
            font-style: italic;
        }

        p:first-child {
            color: var(--happy);
        }

        p:last-child {
            color: var(--grey);
        }

        h2 {
            margin: 0;
        }

    }

    #obs-popup-image-main {
        background: var(--mild);
        padding: var(--default-pad);
        display: flex;
        gap: 8px;
        justify-content: space-between;

        div {
            display: flex;
            flex-direction: column;

            p {
                font-size: var(--font-size-small);
                line-height: var(--line-height-small);
                margin: 0;
            }
            p:first-child {
                font-weight: var(--font-weight-bold);
            }
            p:not(:first-child) {
                color: var(--grey);
                font-size: var(--font-size-super-small);
                line-height: var(--line-height-super-small);
            }
        }
    }

    #obs-popup-audio-main {
        .audio {
            border-radius: 0;
        }
    }

    #obs-popup-footer {
        padding-bottom: 8px;
        text-align: right;
        color: var(--chill);
        font-size: var(--font-size-regular);
        line-height: var(--line-height-regular);

        svg {
            fill: var(--chill);
            stroke: var(--chill);
            padding-top: 12px;
        }
    }
}

#avatar {
    width: 80px;
    height: auto;
    margin-bottom: auto;
    border-radius: var(--normal-radius);
}

#obs-img {
    width: 160px;
    height: auto;
    border-radius: var(--normal-radius);
}

.map-popup, .map {
    font-family: var(--default-font-family);
}

#hide {
    position: absolute;
    right: 4px;
    top: 4px;
    svg {
        fill: var(--chill);
        stroke: var(--chill);
        stroke-width: 0px;
    }
}