@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&family=Boogaloo&family=Noto+Sans&family=Roboto&display=swap');

html {
    width: 100%;
    height: 100%;
    margin: 0;
}

body {
    font-family: 'Noto Sans', 'Roboto', sans-serif;
    width: 100%;
    height: 100%;
    /* width: 100vw;
    height: 100vh; */
    margin: 0;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

iframe {
    /* for survey and storymap */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border: none;
}

#top-bar {
    background-color: #efae9900;
    /* border-radius: 2px; */
    /* background-image: url("assets/paper_texture2.jpg"); */
    /* background-blend-mode: multiply; */
    /* opacity: 0.5; */
    /* grid-row: 1; */
    /* grid-column: 1 / span 2; */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1cm;
    /*match arrow button*/
    z-index: 10;

    display: flex;
    justify-content: center; /* was right. center avoids covering controls in survey */
    align-items: center;
    /* let topbar pass click through to underlying controls
    in survey and storymap iframes */
    pointer-events: none; 
}

#top-bar .menu-item {
    margin-left: 0.25cm;
    margin-right: 0.25cm;
    text-shadow:
        0px 1px 1px white,
        0px -1px 1px white,
        1px 0px 1px white,
        -1px 0px 1px white;
    text-decoration: none;
    color: black;
    pointer-events: all; /* re-enable click for actual clicky things */
}

#top-bar .menu-item:hover {
    color: blue;
}

img.help-icon {
    width: auto;
    height: 8mm;
    vertical-align: middle;
}

.important-msg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background-color: #11111180;
    margin: 0;
    padding: 10vw;
    display: flex;
    /* this shit is maddening */
    align-items: center;
    justify-content: center;
}

.important-msg>.box {
    background-color: #dfd;
    border-radius: 5px;
    padding: 1cm;
    text-align: center;
}

.important-msg .major {
    font-size: 1.8em;
}

.important-msg .minor {
    font-size: 1em;
}