@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* defining some common colors and fonts */
:root {
    /* primary colors */
    --font-color: black;
    --accent-color: red;

    /* primary fonts */
    --body-font: 'IBM Plex Serif';
    --header-font: 'IBM Plex Serif';

    /* spacing */
    --sidebar-width: 200px;
    --content-width: 600px;
    --footer-height: 30px;
    --spacing: 20px;
}

/* grid layout */

body {
    height: 100%;
    display: grid;
    grid-template-columns: 1fr var(--sidebar-width) auto 1fr;
    grid-template-rows: auto var(--footer-height);
    grid-template-areas: 
        "left sidebar content right"
        "left sidebar footer right";
    gap: var(--spacing);
}

.content {
    max-width: var(--content-width);
    width: 100%;
    grid-area: content;
}

.footer {
    grid-area: footer;
}

.navigation {
    grid-area: sidebar;
}

/* laying out the nav block */

.navigation {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.navigation .name {
    margin-bottom: var(--spacing);
}
.nav-items {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-top: var(--spacing);
}

.navigation .badges {
    margin-top: 10px;
    display: flex;
    justify-content: center;
}

.badge {
    font-size: 20px;
    color: var(--font-color);
}

.badge:hover {
    color: var(--accent-color);
    filter: brightness(80%);
}

.navigation .badges > *:not(:first-child) {
    margin-left: 10px;
}

/* laying out the content */
.content { margin-top: 10px; }
.content > *:first-child { margin-top: 0px; }

/* laying out the footer */
.footer {
    display: flex;
    flex-direction: row;
    justify-content: center; 
    flex-wrap: wrap-reverse;
}

.footer > *:not(:first-child)  {
    margin-left: var(--spacing);
}

/* laying out the paper cards */
.paper-card {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

.paper-card .location {
    width: 100px;
    text-align: right;
    flex-shrink: 0;
    margin-right: 10px;
}

.paper-card .authors, .paper-card .notes {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.author:not(:last-child) {
    margin-right: 10px;
}

ul.papers {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-bottom: var(--spacing);
}

.papers li:not(:last-child) {
    margin-bottom: 10px;
}

/* laying out project cards */

.project-card {
    display: flex;
    flex-direction: row;
}

.project-card .title {
    margin-right: 10px;
}

ul.projects {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-bottom: var(--spacing);
}

.projects li:not(:last-child) {
    margin-bottom: 10px;
}

/* general styling */

html {
    font-family: var(--body-font);
}

/* headers */
h1, h2, h3 {
    font-family: var(--header-font);
    margin-top: 0px;
    font-weight: normal;
    font-family: var(--header-font);
}

h1 {
    font-size: 1.953em;
    text-align: right;
}
h2 { font-size: 1.563em; }
h3 { font-size: 1.250em; }

img {
    max-width: 100%;
    height: auto;
}

.vega-embed {
    padding-right: 0px !important;
}
.vega-lite {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: var(--spacing);
    margin-bottom: var(--spacing);
}

/* navigation */
.navigation .name {
    font-size: 1.953em;
}

/* generic link styling */
a {
    text-decoration: none;
    color: var(--accent-color);
}

a:hover {
    filter: brightness(80%);
}

/* paper cards */
.paper-card .author {
    font-style: italic;
}
.paper-card .note {
    font-weight: bold;
}

/* project cards */
.project-card {
    display: flex;
    flex-direction: column;
}
.project-card .title {
    font-size: 1.25em;
}
.project-card .summary {
    font-style: italic;
}

.keywords {
    list-style: none;
    display: flex;
    margin: 0px;
    padding: 0px;
}

.keywords .keyword:not(:first-child) {
    margin-left: var(--spacing);
}

.keywords .keyword:before {
    content: "#";
}

.keywords .keyword {
    font-size: 0.75em;
    border-radius: 15px;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    display: inline-block;
    color: white;
    background-color: var(--accent-color);
}