@import url(https://fonts.bunny.net/css?family=aboreto:400|aclonica:400|acme:400|albert-sans:300);
body, html {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    margin: 0px;
    padding: 0px;
    background: linear-gradient(to bottom, #abc, #bca);
    height: 100%;
    overflow: hidden;
}

header h1 {
    margin: 1rem;
    font-family: 'Aboreto', display;
    font-weight: 300;
    text-shadow: 3px 3px 3px #ababab;
}

header {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    background: #eee;
    border-width: 3px;
    border-style: solid;
    border-image: linear-gradient(to left, purple,rgba(0, 0, 0, 0)) 1 10%;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.3));
    height: 85px;
}

header span:first-child {
    font-size: 5rem;
}

summary {
    cursor: pointer;
    margin: 0.5rem 1rem 0;
}

summary::marker {
    margin: 1rem;
    color: #e162bf;
    font-size: 1.2em;
}

summary h1 {
    font-family: 'Acme', sans-serif;
    margin-top: 20px;
    display: inline-block;
    cursor: pointer;
}

summary ol li.work {
    padding: 1rem;
    background: #efefef;
}

details[open] {
    padding-bottom: 1rem;
    opacity: 1;
    transition: all 0.9s ease-in-out;
}

details {
    display: block;
    background: linear-gradient(to right, #efefef, transparent);
    margin-left: 1rem;
    margin-right: 1rem;
    opacity: 0.4;
    transition: all 0.9s ease-in-out;
}

details:hover {
    opacity: 1;
    transition: all 0.3s ease-in-out;
}

details ol {
    display: none;
}

details[open] ol {
    display: block;
    transition: all 0.9s ease-in-out;
}

main {
    height: 100%;
    overflow: scroll;
}

aside {
    width: 6rem;
    margin-top: 0px;
    top: 0;
    height: 100%;
    position: fixed;
    margin-top: 90px;
}

aside span {
    margin-left: 3.5rem;
    margin-top: 10px;
    display: block;
    height: 100%;
    width: 1px;
    background: linear-gradient(to top, purple, transparent);
}

article {
    width: 70%;
    margin-left: 7rem;
    margin-bottom: 7rem;
}

aside, article {
    display: block;
    float: left;
}

footer span {
    display: inline-block;
    font-family: 'Aclonica', display;
    font-weight: 700;
    text-shadow: 3px 3px 3px #777;
    font-size: 2rem;
    opacity: 0.8;
    position: absolute;
    bottom: 1rem;
    right: 1rem;
}

footer span a, footer span a:visited {
    color: #000;
}

ol li {
    font-family: 'albert-sans', sans-serif;
    line-height: 1.5;
    font-size: 1.5rem;
}

ol li a, ol li a:visited {
    color: #444;
}

ol li span.date {
    font-size: 0.6rem;
}
ol li span.date:before {
    content: '('
}
ol li span.date:after {
    content: ')'
}