html, body {
  height: 100%;
}
body {
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
}
.body-center {
    flex: 1;
    display: flex;
    justify-content: center;
}
a {
    color: #0344b5;
}
a:visited {
    color: #6a0ffc;
}
a:hover {
    color: #0f66fc;
}
a:not([href]) {
    color: black;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    background: #041023;
    color: #fff;
    width: 100%;
    padding: 15px 0;
    /* border-bottom: 1px solid #aaa; */
    box-shadow: 0px 0px 10px #041023;
    z-index: 1;
}
header nav a, 
header nav a:visited {
    color: #fff;
    text-decoration: none;
    padding: 20px 15px;
    font-size: 18px;
}
header nav a:hover {
    color: #ddd;
}
.nav-content {
    margin: 0 auto;
    max-width: 1000px;
}
.title {
    color: #fff;
    font-size: 22px;
    font-weight: 600;
}
.header-spacer {
    height: 30px;
}

.content {
    max-width: 1000px;
    margin: 20px;
    text-align: center;
    padding-bottom: 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.content h1 {
    font-size: 2.5rem;
    font-weight: 300;
    color: #041023;
    margin-top: 65px;
    position: relative;
}
.content h1:before {
    position: absolute;
    top: 1.35em;
    height: 0;
    width: 70px;
    content: '';
    border-top: 3px solid #0344b5;
}

.about {
    display: flex;
    align-items: center;
}
.about-text {
    flex: 1;
    /* padding-right: 20px; */
    text-align: left;
}
.about-picture {
    flex: 1;
    text-align: center;
    margin-right: 30px;
    max-width: 30%;
}
.about-picture img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}
@media all and (min-width: 600px) and (max-width: 800px) {
    .about-picture {
        max-width: 50%;
    }
}
@media all and (max-width: 600px) {
    .about {
        flex-direction: column;
    }
    .about-text {
        text-align: justify;
    }
    .about-picture {
        margin: 0;
        max-width: 300px;
    }
}

.publications {
    flex-direction: row;
}
.publication-abbr {
    font-style: italic;
    font-size: 0.9rem;
    color: #777;
}
.pub {
    margin: 35px 0;
    line-height: 1.2;
    text-align: left;
}
.pub-title {
    font-size: 1.2rem;
    font-weight: 600;
    text-decoration: none;
}
.pub-authors {
    margin:8px 0;
    font-weight: 400;
}
.pub-conference {
    margin: 0;
    font-weight: 300;
    font-style: italic;
}
.pub .sosp:before {
    content: "[SOSP]";
    color: black;
    font-weight: 300;
}
.pub .cidr:before {
    content: "[CIDR]";
    color: black;
    font-weight: 300;
}

footer {
    margin-top: auto;
    width: 100%;
    padding: 15px 0;
    background-color: #fafafa;
    text-align: center;
    color: #999;
    font-size: 15px;

    /* --s: 48px;
    --c1: #f3f3f3;
    --c2: #fafafa;
    --_c:5%,#0000 75%,var(--c1) 0;
    --_g:/var(--s) var(--s) conic-gradient(at var(--_c));
    --_l:/var(--s) var(--s) conic-gradient(at 50% var(--_c));
    background:
        0 calc(7*var(--s)/10) var(--_l),
        calc(var(--s)/2) calc(var(--s)/5) var(--_l),
        calc(var(--s)/5) 0 var(--_g),
        calc(7*var(--s)/10) calc(var(--s)/2) var(--_g),
        conic-gradient(at 90% 90%,var(--c1) 75%,var(--c2) 0)
        0 0/calc(var(--s)/2) calc(var(--s)/2); */

    --s: 48px; /* control the size*/
    --c1: #f0f0f0;
    --c2: #ffffff;
    --c3: #fafafa;
    
    --_g: var(--c3) 0 120deg,#0000 0;
    background:
        conic-gradient(from -60deg at 50% calc(100%/3),var(--_g)),
        conic-gradient(from 120deg at 50% calc(200%/3),var(--_g)),
        conic-gradient(from  60deg at calc(200%/3),var(--c3) 60deg,var(--c2) 0 120deg,#0000 0),
        conic-gradient(from 180deg at calc(100%/3),var(--c1) 60deg,var(--_g)),
        linear-gradient(90deg,var(--c1)   calc(100%/6),var(--c2) 0 50%,
                            var(--c1) 0 calc(500%/6),var(--c2) 0);
    background-size: calc(1.732*var(--s)) var(--s);
}
footer a, 
footer a:visited,
footer a:not([href]) {
    text-decoration: none;
    font-weight: 600;
    padding: 15px 8px;
    color: #555;
}
footer a:hover {
    color: #222;
}
footer .separator:before, footer .separator:not([href]) {
    content: '|';
    font-weight: 300;
    margin: 2px;
    color: #999;
}