/* Kon me kwaad maken... */

body {
    min-height: 100%;
}

bumper {
    display:block;
    text-align: center;
    padding: 1em;
}

bumper a {
    padding: 0;
}

modal-manual {
    background-color: rgba(90,90,90,.90);
    position: fixed;
    top: 0;
    margin: 3em;
    padding: 1.5em;
    border-radius: 2em;
    color: white;
    display:none;
}

:dir(rtl) modal-manual {
    border-radius: 1em 0em 0em 1em;
    right: 3em;
}
:dir(ltr) modal-manual {
    border-radius: 0em 1em 1em 0em;
    left: -3em;
}

menu {
    display: none;
    background-color: rgba(90,90,90,.90);
    position: fixed;
    bottom: 0;
    margin: 3em;
    border-radius: 1em;
    text-align:center;
    padding: 1em;
}

#mainMenu li {
    display: inline;
}

menu.transient {
    display: none;
    top: 0;
    bottom: unset;
    left: 0;
    color: white;
}

menu li {
    list-style: none; /* dots for active or not in the menu? */
    padding: 0.75em 0.75em;
}

page-container {
    display: block;
    text-align: center;
    padding: 1.5em;
    min-height: 100%;
}

@media only screen and (device-width : 320px) {
    /* only because I love you */
    articles{
        padding: 0;
    }
    menu {
        margin: 0;
        padding: 1em;
        border-radius: 0em 1em 0em 0em;
    }
    menu.transient {
        border-radius: 0em 1em 1em 0em;
    }
    menu li {
        padding: 0.25em 0.25em;
    }
    modal-manual {
        margin: 3em 0;
        border-radius: 0em 1em 1em 0em;
    }
    :dir(rtl) modal-manual {
        border-radius: 1em 0em 0em 1em;
        right: 0em;
    }
    :dir(ltr) modal-manual {
        border-radius: 0em 1em 1em 0em;
        left: 0em;
    }
}

page-container video {
    width: 100%;
}

page-container audio {
    left: 2em;
    right: 2em;
    margin-top: 8em;
}

page-container article audio {
    width: 40%;
    margin-top: 0%;
}

page-container emoji-story {
    width: 100%;
    display: block;
}

page-container emoji-story emoji-character {
    position: relative;
    font-size: 24pt;
}

page-container emoji-story emoji-character speach-bubble {
    position: absolute;
    bottom: 1.25em;
    left: 1em;
    font-size: 16pt;
    max-width: 10em;
    text-align: left;
    border: 2pt solid gray;
    border-style: dashed;
    border-radius: 0.5em 0.5em 0.5em 0em;
}

a {
  text-decoration: none;
  color: skyblue;
}

page-container img {
  width: 100%;
}

page-container iframe {
  width: 100%;
}

.closed {
    font-size: 0pt;
    transition-property: font-size, width;
    transition-duration: 0.1s;
    transition-delay: 0s;
}

.open {
    font-size: inherit;
    transition-property: font-size, width;
    transition-duration: 0.3s;
    transition-delay: 0s;
}

modal-manual {
   display: none
}

@media (display-mode: browser) {
    modal-manual {
        display: block;
    }
}

@media only print {
    modal-manual {
        display: none;
    }
    
    bumper{
        display: none;
    }
}