/************************************************************
Vous vous en rendrez compte, je pense, le CSS c'est mon dada.
************************************************************/


/************** Fonts **************/
@font-face {
    font-display: swap;
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/barlow-v12-latin-regular.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/barlow-v12-latin-700.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 900;
    src: url('../fonts/fraunces-v31-latin-900.woff2') format('woff2');
}

:root {
    --dark-cyan: #0e8784;
    --dark-grey-blue: #333D4B;
    --pale-orange: #FDD6BA;
    --light-cream: #fefcf7;
    --grey: #83888F;

    --txt: var(--dark-grey-blue);
    --bg: var(--light-cream);
    --accent: var(--dark-cyan);
}

:focus-visible {
    outline: .2rem solid var(--accent);
}

@media screen and (prefers-color-scheme: dark) {
    :root {
        --txt: var(--light-cream);
        --bg: var(--dark-grey-blue);
        --accent: var(--pale-orange);
    }
}

body {
    display: grid;
    gap: 2rem;
    font-family: barlow, sans-serif;
    font-size: 1rem;
    line-height: 1.625;
    font-weight: 400;
    font-style: normal;
    color: var(--txt);
    background-color: var(--bg);
}

/************** Typographie **************/

:is(h1, h2, h3, .h1, .h2, .h3) {
    font-family: Fraunces, serif;
    font-weight: 900;
    color: var(--txt);
    line-height: 1;
}

h1, .h1 {
    font-size: 2.5rem;
}

h2, .h2 {
    font-size: 2rem;
}

h3, .h3 {
    font-size: 1.5rem;
}

a {
    color: var(--accent);
    word-break: break-all;
}

/************** Layout **************/

.container {
    margin-inline: auto;
    width: min(100% - 3rem, 80rem);
}


/************** Skip links **************/

.skip-links a {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    display: block;
    padding: 1rem;
    color: var(--txt);
    text-align: center;
    background-color: var(--bg);
    transform: translateY(-100vw);
}

.skip-links a:focus {
    transform: translateY(0);
}

/************** Header **************/

.main-header .container {
    display: grid;
    gap: 1rem;
    align-items: center;
    padding-block: 2rem;
    .portrait {
        justify-self: center;
        img {
            border-radius: 50%;
        }
    }
}

@media (min-width: 52em) {
    .main-header .container {
        grid-template-columns: auto 1fr;
        .portrait {
            grid-row: span 3;
        }
        address {
            grid-column: 2 / -1;
        }
    }
}

@media (min-width: 70em) {
    .main-header .container {
        grid-template-columns: auto 1fr auto;
        .portrait {
            grid-area: 1 / 1 / 4 / 2;
        }
        address {
            grid-area: 1 / -1 / 4 / -2;
        }
    }
}

/************** Sections **************/

section .container {
    h2 {
        position: relative;
        padding-block: 1rem;
        margin-block: 2rem;
        &::after {
            content: '';
            position: absolute;
            inset-block-end: 0;
            inset-inline: 0;
            height: .1rem;
            background-color: var(--txt);
        }
    }

    li {
        display: grid;
        margin-block-end: 1rem;
        p:first-child {
            font-weight: 700;
        }
    }
}

@media (min-width: 52em) {
    section li {
        grid-template-columns: 30% 1fr;
        gap: 2rem;
    }
}