@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cascadia+Code:ital,wght@0,200..700;1,200..700&display=swap');

:root {
    --code-font: 'Cascadia Code', monospace;
    --primary-font: 'Roboto', sans-serif;
    --color-link: #ff9900;
    --base-font-weight: 400;
    --strong-font-weight: 600;
    --h1-top-padding: 10vh;
    --base-line-height: 1.4;
    --heading-line-height: 1.2;
    --heading-font-weight: 500;
    --list-item-gap: 1rem;
}

@media (prefers-color-scheme: light) {
    :root {
        --color-background: #f5f5f5;
        --color-background-aside: #dbdbdb;
        --color-primary-text: #4e4e4e;
        --color-secondary-text: lightgrey;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-background: #121212;
        --color-background-aside: #1e1e1e;
        --color-primary-text: #d9d9d9;
        --color-secondary-text: rgb(50, 50, 50);
    }
}


/* Height of page */
html,
body {
    font-family: var(--primary-font);
    font-size: 18px;
    min-height: 100vh !important;
    background-color: var(--color-background);
}

/* Font */

body,
p {
    line-height: var(--base-line-height);
    font-weight: var(--base-font-weight);
    color: var(--color-primary-text);
}

body strong,
p strong {
    font-weight: var(--strong-font-weight);
}

/* Headings */

h1,
h2,
h3 {
    line-height: var(--heading-line-height);
    font-weight: var(--heading-font-weight);
    color: var(--color-primary-text);
}

h1 {
    font-size: 400%;
    color: var(--color-secondary-text);
}

h2 {
    padding-bottom: 0.3rem;
    padding-top: 2rem;
    border-bottom: 2px solid var(--color-primary-text);
}

h3 {
    font-size: 100%;
    font-weight: bold;
}

a {
    color: var(--light-link-color);
    text-decoration: underline;
    text-decoration-thickness: 0.4px;
    text-underline-offset: 4px;
}

a:hover {
    color: var(--color-link)
}

aside {
    background-color: var(--color-background-aside);
    font-weight: 400;
}

aside a {
    color: var(--color-primary-text);
    text-transform: none;
    text-decoration: none;
}

aside a:hover {
    color: var(--color-link);
}

/* Linked images */
aside a img,
aside a video {
    /* filter: grayscale(100%) contrast(80%) brightness(120%) !important; */
    transition: filter 0.5s ease !important;
    background-color: var(--color-background);
    margin: 0px !important;
    padding: 20px !important;
    padding-left: 21.5px !important;
    padding-top: 21.5px !important;
}

/* Earth video - ensure it displays properly */
aside a video#earth-video {
    width: 100%;
    display: block;
}

.logo {
    float: left;
    border-radius: 5px;
    margin-right: 4em;
}

.picture {
    float: left;
    border-radius: 5px;
    margin-right: 1em;
    margin-bottom: 1em;
    border-radius: 10px;
    filter: grayscale(100%) contrast(80%) brightness(120%) !important;
    max-width: 100%;
}

.picture:hover,
aside a img:hover {
    filter: none !important;
    transition: 0.5s ease !important;
}

/* Center short page content vertically on larger screens */
main {
    display: flex;
    flex-direction: column;
}

/* Center the article block vertically when there's extra space.
When the article is taller than the viewport, the auto margins 
collapse and the article will flow normally (top-aligned). */
main>article.single {
    margin-top: auto;
    margin-bottom: auto;
}

/* Apply h1 top padding only when content is taller than the viewport.
   A small JS script toggles the 'content-taller' class on <html>. */
/* Only apply to h1 inside main so aside headings stay unaffected */
html.content-taller main h1 {
    padding-top: var(--h1-top-padding);
}

/* Small vertical gap between list items in the main content */
main ul>li,
main ol>li {
    margin-bottom: var(--list-item-gap);
}

/* Avoid extra gap after the whole list */
main ul,
main ol {
    margin-bottom: 0.5rem;
    padding-left: 1.2em;
}

figure {
    vertical-align: middle;
}

table,
tr,
td {
    border: none !important;
    padding-bottom: 2rem !important;
}

code,
pre {
    font-family: var(--code-font) !important;
    border-radius: 4px;
    background-color: var(--color-background-aside) !important;
}

.highlight {
    /* background-color: transparent !important; */
    border-radius: 5px !important;
}

pre {
    background-color: var(--color-background-aside) !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 80% !important;
    max-height: 400px;
}