:root {
    --color-primary: black;
    --color-bg: #fff9e5;
    --color-sky: #f0f8ff;
    --color-sub: rgb(130 130 130);
    --accent-color: darkred;

    --p-lineheight: 1.4;
    --p-margin: 3;
    --p-spacing: 1em;

    --font: 15pt;
    --font-title: 25pt;
}

body {
    background: var(--color-bg);
    color: var(--color-primary);
    font-size: var(--font);
    font-family: serif;
}

body > header {
  position: relative;
  margin: 10pt 30pt;
  padding: 15pt;

  text-align: center;
  color: white;

  background-image: linear-gradient(to left, red, #f96c17);
  /* this will create the oblique shape */
  transform: skew(-10deg);;
  border: solid darkred 3pt;
  border-radius: 10pt;

  @media only screen and (max-width: 400pt) { font-size: 20pt }
}

body > header > a {
    text-decoration: none;
    color: unset;
    span { font-size: 40pt; }
}

/* LINKS in the articles
 * https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Text_styling/Styling_links
 */
article, footer {
    a {
    text-decoration: underline;
    color: var(--accent-color);
    }
    a:visited {
    color: var(--accent-color);
    }
    a:focus  {
    color: black;
    }
}

/* LINKS for navigation */
nav {
    a {
        text-decoration: underline;
        color: var(--accent-color); }
    a:link {
        text-decoration: none; }
    a:visited {
        color: var(--accent-color); }
    a:focus  {
        text-decoration: none;
        background: var(--accent-color);
        color: white; }
    a:hover {
        text-decoration: none;
        background: var(--accent-color);
        color: white;
    }
    a:active {
        text-decoration: none;
        background: none;
    }
}

/* Page design */
main {
    padding: 1rem;

    display: grid;
    grid-template-columns: 70% 30%;
    grid-template-areas:
        "left right" "rest rest";

    max-width: 1000pt;
    margin: auto;

    box-sizing: content-box;
}

/* NAV */
main > aside {
    border: 2px solid var(--accent-color);
    border-width: 0 0 0 0pt;
    padding: 0 20pt 0 10pt;
    margin: 0 0 0 30pt;

    nav > ul {
        list-style-type: none;
        text-align: left;
        font-size: var(--font);
        padding: 0;
        margin-top: 0;
    }
    nav > ul > li { margin-bottom: 8pt; }
}

/* ARTICLE */
main > article {
    box-sizing: content-box;

    >h1 {
        font-size: var(--font-title);
        font-style: italic;
        line-height: 1.0;
        margin-top: 0;

        text-align: center;

        padding: 10pt;
        border: dashed var(--accent-color) 5pt;
        color: var(--accent-color); }
    >h2 {
        border: solid var(--accent-color);
        border-width: 0 0 3pt 0;
        margin: 10pt 0;
        color: black;

        margin: 15pt 0;
        padding: 10pt 0 5pt 0; }
    >h3 {
        margin: 15pt 0;
        font-size: 20pt; }

    >p {
        margin: 0 0 var(--p-spacing) 0;
        line-height: var(--p-lineheight);
        text-justify: inter-word;
        text-align: justify; }
    >blockquote {
        border: 1pt solid black;
        border-width: 0 0 0 5pt;
        padding: 1pt 30pt;
        margin: 10pt 5pt;
        width: 70%
    }
    >figure {
        text-align: right;
        color: gray;

        padding: 15pt;
        margin: 0;
        width: 35%;
        float: right;
        img {
            display: inline-block;
            width: 100%; }
    }
    >figure.full {
        margin: 0 auto;
        width: 70%;
        float: none;
        display: block; }
    @media only screen and (max-width: 400pt) {
        >figure {
            width: 90%;
            display: block;
            margin: 0 auto;
            float: none;}
        >figure.full { width: 90%}
    }



    /* Footer of the ARTICLE */
    nav {
        display: grid;
        grid-template-columns: 45% 10% 45%;
        grid-template-areas:
            "left middle right";

        padding: 10pt 30pt 0 30pt;
        margin-top: 30pt;

        border: 2px solid gray;
        border-width: 2pt 0 0 0pt;

        --accent-color: darkred;
    }
}

/* Footer of the PAGE */
footer {
    margin-top: 100px;
    padding: 30px;

    border-top-width: 3px;
    border-top-style: dashed;
    text-align: center;

    a { text-decoration: none;
        img:hover { filter: saturate(200%) }
      }
}

@media only screen and (max-width: 800pt) {
    main { display: block; }
    .desktop-only { display: none; };
}
@media only screen and (min-width: 800pt) {
    .mobile-only { display: none; }
}

/* d’après doc mdn */
img, picture, video { max-width: 100%; }

.auteurices {
    display: grid;
    grid-template-columns: auto auto auto;

    figure {
        text-align: center;
        font-size: 18pt;
        margin: 10pt;
        img {
            object-fit: cover;
            border-radius: 50%;
            height: 200pt;
            width: 200pt;
        }
        h3 { margin: 10px 0; }
        p  { margin: 10px 0; }
    }
}
@media only screen and (max-width: 800pt) {
    .auteurices {
        display: block;
        figure {
            width: 100%;
            margin: 50pt auto;
            img { height: 300pt; width: 300pt; }
        }
    }
}

}