body {
    /* Edit these yourself, this is the main page style */
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: white;
    
    background-color: black;
    background-size: 100%;
    background-image: url('bg3.jpg');
    background-repeat: no-repeat;
    
    box-sizing: border-box;
    /* scroll-snap-type: y mandatory; */
    margin: 0px;
}

page-container {
    font-size: 16pt;
    text-shadow: 1px 1px #000000;
}

/* The rest would be un-maintainable system styles */

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%;
}



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;
    }
}