:root {
    --bg: #fff;
    --border: #e6e6e6;
    --fresh: #0645ad;
    --light: #666;
    --main: #333;
    --visited: #AE00AE;
}

body {
    display: block;
    background: var(--bg);
    color: var(--main);
    font-family: 'Literata', serif;
    font-size: 18px;
    max-width: 80rem;
    padding-right: 1rem;
    padding-left: 1rem;
    margin-left: auto;
    margin-right: auto;
}

a:link {
    color: var(--fresh);
}

a:visited {
    color: var(--visited);
}

#nav-logo {
    height: 2rem;
    width: 2rem;
}

.nav-links {
    vertical-align: top;
}

.nav-links-right {
    float: right;
}

.nav-links > a {
    margin-left: 0.1em;
    margin-right: 0.1em;
}

.nav-links a:visited {
    color: var(--light);
}

.nav-links a:link {
    color: var(--light);
}

nav > a {
    color: var(--main);
}

#nav-links > a:link {
    color: inherit;
}

#nav-links > a:visited {
    color: inherit;
}

#search-form {
    width: 80%;
}

#search-box {
    height: 2em;
}

.pagination {
    margin-top: 1em;
    margin-bottom: 1em;
    font-size: larger;
}

.pagination a:visited {
    color: var(--fresh);
}

.about-screenshot img {
    display: block;
    margin: 2em auto;
    max-width: 90%;
}

.about-h1 {
    text-align: center;
}

.about-caption {
    margin: 1em;
    text-align: center;
}

.about-row {
    display: flex;
}

@media (max-width: 800px) {
  .about-row {
    flex-direction: column;
  }
}

.about-column {
    flex: auto;
    margin-left: 1em;
    margin-right: 1em;
}

@media (min-width: 800px) {
    .about-column{
        width: 23em;
    }
}

.about-column > p {
    text-align: justify;
}

.about-last-word {
    margin: 2em;
    text-align: center
}

:target {
    background: yellow;
}

p.bookmark-date {
    margin-bottom: 0.5em;
    font-size: larger;
}

.bookmark {
    margin-bottom: 1em;
}

.bookmark-row {
    display: flex;
}

.bookmark-rest-column {
    flex: 1;
}

.bookmark-icon {
    margin-top: 0.2em;
    margin-right: 0.5em;
    margin-left: 0.5em;
}

.bookmark-icon > img {
    width: 2em;
    height: 2em;
}

.fallback-icon {
    width: 2em;
    height: 2em;
    /* FIXME: Need to actually load a fallback image from the server... */
    background: var(--bg);
}

.bookmark-link {
    margin-top: 0;
    margin-bottom: 0;
}

.bookmark-url {
    margin-top: 0;
    margin-bottom: 0;
    font-size: small;
}

.bookmark-url > a {
    margin-top: 0;
    margin-bottom: 0;
    color: var(--lighter);
    text-decoration: none;
}

.bookmark-url > a:visited {
    color: var(--light);
}


.bookmark-details {
    margin-top: 0;
    margin-bottom: 0;
}

.bookmark .bookmark-description {
    margin-left: 1.5em;
    margin-right: 1.5em;
}

.bookmark .bookmark-description blockquote {
    color: var(--light);
    border-left: 0.2em solid var(--light);
    margin-left: 1em;
    padding-left: 1em;
    font-style: oblique;
}

.bookmark-meta {
    margin-left: 0.1em;
    margin-right: 0.1em;
}

.bookmark-details a.bookmark-meta:link {
    color: inherit;
}

.bookmark-details a.bookmark-meta:visited {
    color: inherit;
}

.bookmark-quick-add-tag {
    font-size: small;
    margin-top: 0.1em;
    margin-left: 0.25em;
}

.bookmark-quick-add-tag button {
    margin-left: 0.8em;
    margin-right: 0.8em;
}

.netloc {
    color: var(--light);
    font-size: small;
    text-decoration: none;
}

.netloc:visited {
    color: inherit;
}

.netloc:link {
    color: inherit;
}

.input-copy {
    display: block;
    font-size: smaller;
}

p.radio-form-input {
    margin: 0;
}

textarea, input, button, select {
    font-family: inherit;
    font-size: inherit;
}

#url-input, #title-input {
    width: 30em;
}

#description-textarea {
    width: 100%;
    height: 10em;
}

button.remove-tag-button {
    display: inline;
    background: none;
    text-align: left;
    color: var(--light);
    background: none;
    margin: 0;
    padding: 0;
    border: none;
    cursor: pointer;
}

#register-link {
    font-weight: bold;
}

a.tag-link {
    text-decoration: none;
}

a.tag-colour-0 {
    color: #AE0057;
}

a.tag-colour-1 {
    color: #5700AE;
}

a.tag-colour-2 {
    color: #00AEAE;
}

a.tag-colour-3 {
    color: #AEAE00;
}

a.tag-colour-4 {
    color: #00AE00;
}

a.tag-colour-5 {
    color: #AE5700;
}

@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400;
  src: url('/static/fonts/literata-v15-latin-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 400;
  src: url('/static/fonts/literata-v15-latin-italic.woff2') format('woff2');
}
