/* CSS Layout */

html, body {
    height: 100%;
}

header {
    padding: 1em 0 2em 0;
}

#container {
    position: relative;
    min-height: 95%;
    max-width: 900px;
    margin: auto;
    margin-top: 1em;
}

nav {
    position: fixed;
    right: -130px;
    width: 120px;
    float: right;
    z-index: 1;
    padding: 2px 2px 25px 5px;
    margin: 1em 1.8em 0 0;
}

article {
    position: relative;
    margin: 0 2em 1em 2em;
    padding-bottom: 1em;
}

footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 20px;
}


/* === Layout iPhone 5 === */

@media only screen
    and (max-width: 320px)
    and (max-height: 568px) {
        #container {
            top: 0.2em;
            min-height: 98%;
            margin-left: 0.1em;
            margin-right: 0.1em;
        }
        header {
            padding: 0;
        }
        nav {
            position: relative;
            padding: 0;
            margin: 0em 0.5em 1.5em 0.5em;
            right: initial;
            width: initial;
            float: none;
            display: block;
        }
        /* nav ul {} */
        article {
            margin: 0 0.2em 0 0.2em;
        }
        /* footer {} */
}

/* === Layout iPhone 6, 6s, 7, 8 === */

@media only screen
    and (min-width: 375px)
    and (max-height: 667px)
    and (-webkit-device-pixel-ratio: 2) {
        header {
            padding: 0 0 1em 0;
        }

        article {
            margin: 1em 0.5em;
        }

        #container {
            margin: 0;
        }
}

/* === Layout iPhone Xs === */

@media only screen
    and (min-width: 375px)
    and (max-height: 812px)
    and (orientation: portrait)
    and (-webkit-device-pixel-ratio: 3) {
        header {
            padding: 0 0 1em 0;
        }

        article {
            margin: 1em 0.3em;
        }

        #container {
            margin: 0;
        }
}

/* || === Layout iPad === */

@media only screen
    and (min-width: 768px)
    and (max-width: 1024px)
    and (orientation: portrait) {
        #container {
            margin-left: 1em;
            margin-right: 1em;
        }
        article {
            margin-left: 1.5em;
            margin-right: 1.5em;
        }
}

@media only screen
    and (min-width: 768px)
    and (max-width: 1024px)
    and (orientation: landscape) {
        /* article {} */
        nav {
            margin-top: 0.5em;
        }
        /* footer {} */
}