html {
    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;
}
header {
    background-color: MediumSeaGreen;
    text-align: center;
    border: .5em outset lightgreen;
}
header h1 {
    font-size: 300%;
}
nav {
    background-color: saddlebrown;
    border: .5em outset sienna;
}
nav ul {
    margin: 0;
    list-style-type: none;
    display: flex;
    justify-content: space-around;
    font-weight: bold;
    padding: 0;
}
nav a, nav 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: " | ";
}

.flex {
    display: flex;
    justify-content: space-around;
    max-width: 100%;
    flex-wrap: wrap;
}

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

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