html {
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
    min-height: 100%;
    background: linear-gradient(black, violet, blanchedalmond, black, deepskyblue, skyblue, lightskyblue, limegreen, sienna, saddlebrown, lightgray, darkgray, gray, slategray, dimgray, black, darkred, red, orange, red, black);
    background-repeat: no-repeat;
    background-size: cover;
}
body {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
header, nav, main, footer {
    padding: 1em;
    margin-bottom: 2em;
    box-shadow: .25em .25em .25em .25em rgb(0 0 0 / 25%);
}
header {
    background-color: MediumSeaGreen;
    text-align: center;
    border: .5em outset lightgreen;

    h1 {
        font-size: 300%;
    }
}
nav {
    background-color: saddlebrown;
    border: .5em outset sienna;

    ul {
        margin: 0;
        list-style-type: none;
        display: flex;
        justify-content: space-around;
        font-weight: bold;
        padding: 0;
    }

    a, a:visited {
        color: rgb(0, 255, 229);
    }
}
main {
    background: darkgray;
    max-width: 100%;
    border: .5em outset lightgray;
}
footer {
    background-color: dimgray;
    color: white;
    border: .5em outset black;
}

h1, h2, h3, h4, h5, h6 {
    font-family: Minecraft, 'Courier New', Courier, monospace
}

a, a:visited {
    color: blue;
}
img {
    max-width: 100%;
}

.break-all {
    word-wrap: break-word;
    word-break: break-all;
}

.flat-list {
    display: flex;
    padding: 0;
}
.flat-list::after {
    content: " |";
}
.flat-list li {
    display: inline;
    margin-left: 0.5em;
}
.flat-list li::before {
    content: " | ";
}

.works-list {
    max-width: 100%;
}

.intext-image {
    height: 1em;
    position: relative;
    bottom: -.25em;
}

.work-summary {
    border: .15em solid black;
    margin-bottom: 1em;
    border-radius: 1em;
    background-color: lightgray;
    padding: .5em;
    max-width: 100%;
    color: black;

    a {
        word-break: break-all;
        color: blue;
    }
    table {
        border-collapse: collapse;
        width: 100%;
        max-height: 100%;
    }
    th {
        text-align: left;
        padding-right: 1em;
    }
    th, td {
        padding: .5em 0;
        max-width: 100%;
    }
    tr {
        border: black .1em;
        border-style: solid none;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 100%;
    }
}

@media only screen and (min-width: 600px) {
    header h1 {
        font-size: 400%;
    }
}

@media only screen and (min-width: 768px) {
    .work-summary tr {
        display: table-row;
    }
    .work-summary td {
        text-align: right;
    }
}

@media only screen and (min-width: 1200px) {
    body {
        margin: .5em 8em;
    }
    header, nav, main, footer {
        border-width: 1em;
    }
    .works-list {
        display: grid;
        grid-template-columns: 33% 34% 33%;
    }
}