html {
    height: 100vh; overflow: auto;
    /* this makes sure the display is Correct */
    background-image: url(../img/layout/science.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
body {
    margin-left: auto;
    margin-right: 0;
    /* obviously, i'm adding lovely right alignment. coz it's cute.
    nobody aligns their sites to the right these days but i LOVE IT */
    border-left: 1px solid #c00;
    background-color: #000;
    /* in case there's any accidental overlap with the background image. who knows what
    messed up screen size might be looking at this stuff. */
    min-height: 100%;
    /* gotta make that outline fill the whole monitor */
    display: flex;
    /* gotta make my elements stretch */
    flex-direction: column;
    /* but behave normally otherwise. */
}
@media (max-aspect-ratio: 6/5), (max-width: 900px) { 
    /* if the device's screen is too small to deal with my beautiful sharaku photo...
    THEN MAYBE IT DIDN'T DESERVE TO DISPLAY IT IN THE FIRST PLACE! */
    html { background-image: none; }
    body { margin: auto; border-left: 0px; }
}

header {
    border-bottom: 1px dashed #c00;
}
h1 {
    background-image: url(../img/layout/h1bottom.png), url(../img/layout/headerback.png);
    background-position: bottom;
    background-repeat: repeat-x, repeat;
}

nav ul {
    display: flex; 
    /* put it all in a row! */
    list-style-type: none; 
    /* get rid of the bullet points */
    justify-content: center; 
    /* make sure the text is in the center */
}
nav ul li:not(:last-of-type)::after {
    content: "\00a0/\00a0"
    /* a slash between links, for style. i tend to just type the slashes on my own but
    for stuff i'd like people working with or learning from i'd prefer to be proper!
    annoyingly   doesn't work in css so i have to use \00a0 instead */ 
}

main {
    flex-grow: 1;
    /* makes the "main" part take up all the space it can. this way, the footer stays at
    the bottom of your screen no matter how little content there is! */
}

footer {
    text-align: center;
    padding: 10px;
    border-top: 1px dashed #c00;
}