/*
 * SPDX-FileCopyrightText: 2025 Noé Lopez <noelopez@free.fr>
 *
 * SPDX-License-Identifier: CC-BY-SA-4.0
 */

body {
    margin: 8px;
    font-family: serif;
    font-size: larger;
    line-height: 1.4;
    hyphens: auto;
    background-color: rgb(190, 218, 235);
    background-color: oklch(0.87 0.0384 234.48);
}

aside {
    display: none;
}

/* 720 + 16 for the body margin */
@media screen and (min-width: 736px) {
    body {
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
        font-size: 21px;
    }
}

/* 1080 + 16 */
@media screen and (min-width: 1096px) {
    body {
        max-width: 1080px;
    }

    article {
        max-width: 720px;
    }

    aside {
        display: block;
        max-width: 360px;
    }

    aside ul {
        list-style-type: none;
    }

    aside li.current-page {
        list-style-type: disc;
    }

    .content {
        display: flex;
    }
}

header {
    display: flex;
    gap: 0.5ch;
    border-bottom: 1px solid black;
}

header .site-title {
    margin-right: auto;
}

header img {
    height: 1lh;              /*line height*/
    width: 1lh;
}

footer {
    border-top: 1px dotted black;
}

h1, h2, h3, h4, h5, h6 {
    font-family: sans;
}

a {
    color: rgb(27, 51, 64);
    color: oklch(30.8% 0.03802 234.54);
}

a:active, a:target {
    color: rgb(27, 51, 64);
    color: oklch(15.1% 0.03802 234.54);
}

ul {
    list-style-position: outside;
    list-style-type: disc;
    padding-left: 0;
}

pre {
    overflow: scroll;
}

.collection a {
    text-decoration: none;
    color: unset;
}

.collection article {
    padding: 0.5em;
    border-style: solid;
    border-width: 2px;
    border-radius: 8px;
    border-color: black;
    border-left-width: 8px;
    background-color: rgb(179, 207, 224);
    background-color: oklch(0.84 0.038 234.54);
    margin-bottom: 1em;
}

.collection article .metadata {
    font-size: large;
}

.collection h4 {
    margin: 0;
    display: inline;
}

.timeline {
    display: flex;
    justify-content: space-between;
}

@media screen and (min-width: 736px) {
    .collection {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .collection a {
        flex: 1 0 40%;
    }
}

.cc-license img {
    height: 1em;
    margin-left: 3px;
    vertical-align: text-bottom;
}