@font-face {
    font-family: Normal;
    src: 
        local("Alegreya"),
        url(/static/Alegreya-VariableFont_wght.ttf);
}
@font-face {
    font-family: Normal;
    src: 
        local("Alegreya Italic"),
        url(/static/Alegreya-Italic-VariableFont_wght.ttf);
    font-style: italic;
}
@font-face {
    font-family: Title;
    src: url(/static/ZTBrosOskon90s-Regular.otf);
}

body {
    background: #8a6f30;
    background: url(/static/moroccan-flower.png);
    font-family: "Normal", serif;
    color: rgb(30, 30, 30);
}

.top {  
    margin-top: 10px;
    padding: 30px 0;

    background-image: url(/static/cactus.jpg);
    background-position: top right;
    background-repeat: no-repeat;
    background-size: contain;
    background-clip: border-box;
}

header {
    font-family: Title;
    font-size: 400%;
    border-bottom: 1px solid gold;
    width: 75%;
}
header a { 
    color: #8a6f30;
    text-decoration: none;
}

a {
    color: #8a6f30;
}
nav {
    position: absolute;
    top: 0px;   
    color: white;
}
nav a {
    background: #8a6f30;
    padding: 4px 6px;
    color: white;
    text-decoration: none;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}
nav a:hover {   
    background: #a8873b;
}

.content {
    background: white;
    position: relative;
    background-color: white;
    border-left: 1px solid gold;
    border-right: 1px solid gold;
    padding: 0 20px 80px 20px;
    min-height: 100vh;
}

.links .item {
    display: flex;
    padding-bottom: 5px;
}
.links .item .title,
.links .item .number 
{
    flex: 1 0 auto;
}
.links .item .dots {
    flex: 0 1 auto;
    margin: 0 5px;
    /*Allows too long content to be hidden.*/
    overflow: hidden;
}
.links .item .dots::before {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    content: 
     ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . "
 }
.links a.item {
    text-decoration: none;
    color: black;
}
.links a.item:hover .title {
    font-style: italic;
}

.post a {
    color: #8a6f30;
    border-bottom: 1px dashed gold;
}

h1 {    
    font-style: italic;
}

.pagination {
    border-bottom: 1px solid gold;
    padding: 10px 0;
}

footer {
    text-align: center;
    position: absolute;
    top: auto;
    bottom: 0;
    padding-bottom: 20px;
    color: rgb(130, 130, 130);
}
footer a, footer a:visited {    
    text-decoration: none;
    color: rgb(40, 40, 40);
}
footer a:hover {
    text-decoration: underline;
}

.highlight pre {
    padding: 5px;
    background: #fff9eb;
}
.highlight pre code {
    color: #8a6f30;
    background: #fff9eb;
    white-space: pre-wrap;
    margin-bottom: 0;
 }
p code, li code {
    background: #fff9eb;
    color: #8a6f30;
 }

.divider {
    margin: 20px auto;
    width: 50%;
    border-top: 1px solid gold;
    height: 1px;
 }

.aside {
    padding: 5px 10px;
    text-align: right;
    background: #ede0a4;
    border-radius: 10px;
    color: rgb(80, 80, 80);
    font-size: 10pt;
}
.language-plaintext + .aside {
    margin-top: -16px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: 1px solid gold;
}