html {
	background-color: darkgray ;
}

body {
	margin: 0;
    padding: 10px;
    font-family: 'Lora', serif;
    font-size: 22px;
    line-height: 1.6;
}

a {
	color: #00f;
	text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/*.caption a[target='_blank']::after {
    display: inline-block;
    content: '⧉\a0';
    transform: scale(-1, 1);
}*/

#menu {
	margin-top: 3em;
}

#nav {
    font-size: 1.4em;
    z-index: 999;
    position: fixed;
    width: 100%;
}

#navright {
    float: right;
    margin-right: 20px;
    font-family: 'Source Code Pro', monospace;
    font-size: 22px;
    color: white;
}

#content {
    margin-top: 3em;
}

ul {
	list-style-type: none;
	margin: 0 0 0 10px;
    padding: 0;
}

li {
    margin-top: 15px;
    line-height: normal;
}

.work {
    margin-bottom: 200px;
}

img {
    margin: 5px;
}

p {
    margin-left: 10px;
}

.title {
    font-family: 'Fredoka', sans-serif;
    font-size: 1.2em;
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
}

.title span {
    font-family: inherit;
    font-style: inherit;
    white-space: normal;
}

.caption {
    margin-top: 0.2em;
}

/*.caption a{
    font-family: 'Source Code Pro', monospace;
}*/

#about {
    max-width: 800px;
    margin-top: 3em;
}

@media screen and (max-device-width: 800px) {
    img { width: 100%; height: auto; margin: 5px 0; }
    #about { max-width: 100%; }
}