body {
    box-sizing: border-box;
    font-family: sans-serif;
    margin: 0;
}

main {
    display: flex;
    flex-direction: row;
    margin:0;

    & article {
        width:calc(100vw - 3px);
        height: calc(100vh - 3px);

        overflow: hidden;
        margin:0;
        padding:0;

        background-color: aliceblue;
        border:1px solid black;

        & section:first-of-type {

            & header {
                h1, h2 {
                    margin:0;
                }

                h1 {
                    font-size: 1.5rem;
                    font-weight: bold;
                }

                h2 {
                    font-size: 1rem;
                }
            }
        }

        section.graphs {

            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-around;
            width: 100%;
            height: 220px;

            .container {
                width:180px;
                height:calc(180px + 1rem);

                & svg {
                    height:calc(100% - 2rem);
                }
            }

            & h3 {
                font-size:0.8rem;
                text-align: center;
            }

        }

    }


}

svg#compass {

    text.compass-letter {
        text-anchor:middle;
        font-family:sans-serif;
        font-size:8pt;
    }

    text.compass-letter:first-of-type {
        fill: red;
        font-weight: bold;
    }
}

#alt-graph {
    line.axis {
        stroke:black;
        stroke-width: 0.5;
        fill:none;
    }

    & g#alt-graph-markers {
        line.marker {
            fill:none;
            stroke:black;
            stroke-width:0.5;
        }

        line.zero-line {
            stroke:gray;
            stroke-width: 0.5;
            fill:none;
        }

    }

    & g#alt-graph-texts {
        text.marker,
        text.altitude {
            fill:black;
            stroke:none;
            font-size: 4pt;


        }
        text.marker {
            text-anchor: middle;
        }

        text.altitude {
            text-anchor: end;
        }
    }

}

.mymap {
    width: calc(100vw - 10px);
    height: calc(100vh - 320px);
    border: 1px solid black;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 5px 6px 5px 0px #8C8C8C; /* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Box-shadow_generator */
}

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

    main {
        & article {
            & section.graphs {
                height:8.5rem;
                width: 100%;
                overflow-x: scroll;
                .container {
                    height:7.5rem;

                    & svg {
                        height:6rem;
                    }
                }

                & h3 {
                    font-size:0.6rem;
                    text-align: center;
                }
            }
        }
    }

    .mymap {
        height: calc(100vh - 12rem - 5px);
    }
}