@import url(normalize.css);
:root { --gap: 24px; --content-gap: 20px; --nav-width: 1024px; --main-width: 720px; --header-height: 60px; --footer-height: 60px; --body-min-width: 400px; --main-height: calc(100vh - var(--header-height) - var(--footer-height)); --main-inner-height: calc(var(--main-height) - var(--gap) * 2); --main-inner-width: 365px; --background-color: #222222; --text-color: #BBBBBB; --dark-text-color: #888888; --header-color: #DDDDDD; --link-color: white; --button-background-color: #444444; --list-background-color: #333333; --list-text-color: #AAAAAA; }

@font-face { font-family: "DejaVu Sans"; src: url("../font/DejaVuSans.ttf") format("truetype"); }
* { box-sizing: border-box; }

body { background-color: var(--background-color); color: var(--text-color); font-size: 18px; font-family: "DejaVu Sans"; line-height: 1.5; min-width: var(--body-min-width); }

header { height: var(--header-height); max-width: var(--nav-width); display: flex; align-items: center; margin: 0 auto; padding: 0 10px; background-color: var(--background-color); position: sticky; top: 0; }
header span { margin: 0; font-size: 1.2em; font-weight: bold; }
header ul { display: inline-block; margin: 0 0 0 auto; padding-left: 0; }
header li { display: inline-block; margin: 0 10px; }

div.content { min-height: var(--main-height); max-width: calc(var(--main-width) + var(--gap)*2); margin: 0 auto; padding: var(--gap); }
div.content h1 { margin-bottom: 0; }
div.content p { margin-top: 5px; }

.dark { font-size: 0.8em; color: var(--dark-text-color); }

span.edited-date { font-style: italic; }

footer { height: var(--footer-height); }

footer div { display: flex; align-items: center; justify-content: center; height: 100%; }

a { text-decoration: none; color: var(--link-color); }

header a, footer a { text-decoration: none; color: var(--header-color); }

.content a:hover { text-decoration: underline; }

ul.listing { display: block; padding: 0; }
ul.listing li { display: block; margin-bottom: var(--content-gap); padding: 10px; border-radius: 10px; background-color: var(--list-background-color); }
ul.listing li a { text-decoration: none; }
ul.listing li a:hover { text-decoration: none; }
ul.listing li a img { width: 130px; float: left; padding-right: 10px; }
ul.listing li a h2 { color: var(--list-text-color); margin: 0; }
ul.listing li a p { color: var(--list-text-color); margin: 5px 0; }
ul.listing li a p.dark { font-size: 0.8em; color: var(--dark-text-color); }
ul.listing li a p.summary { overflow: hidden; text-overflow: ellipsis; white-space: initial; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

div.profile { min-height: var(--main-inner-height); max-width: var(--main-inner-width); margin: 0 auto; display: flex; flex-flow: column; justify-content: center; align-items: center; }

img.logo { border-radius: 50%; width: 150px; height: 150px; }

span.title { font-weight: bold; font-size: 1.2em; margin: 10px 0; }

.sociallinks img { width: 30px; }

.sociallinks a { display: inline-block; margin: 20px 10px; }

.homelinks { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; }
.homelinks a { display: inline-block; padding: 10px; margin: 10px; border-radius: 5px; text-decoration: none; background-color: var(--button-background-color); }
.homelinks a:hover { text-decoration: none; }

.error-message { min-height: var(--main-inner-height); display: flex; flex-flow: column; justify-content: center; align-items: center; margin: 0 auto; }
.error-message h1 { font-size: 8em; margin: 0; }
.error-message p { font-size: 1.5em; }