/* THEMES */

@font-face {
  font-family: 'lora';
  src: url('lora.woff2') format('woff2');
}

@font-face {
  font-family: 'roboto';
  src: url('roboto.woff2') format('woff2');
}

[data-theme=light],
:root:not([data-theme=dark]),
:host(:not([data-theme=dark])) {
  color-scheme: light;
  --pico-font-size: 110%;
  --pico-color: #373c44;
  --pico-background-color: #fff;
  --pico-font-family: roboto;
  --pico-primary: #f1e9e4;
  --pico-primary-background: #3AA6A6;
  --pico-primary-hover: var(--pico-contrast);
  --pico-primary-hover-background: #40b6b6;
  --pico-primary-hover-border: var(--pico-primary-hover-background);
  --pico-secondary: #B0846D;
  --pico-contrast: #062837;
  --pico-code-kbd-background-color: var(--pico-primary-background);
  --pico-code-kbd-color: var(--pico-background-color);
  --pico-h1-color: #2d3138;
  --pico-h2-color: #373c44;
  --pico-h3-color: #424751;
  --pico-h4-color: #4d535e;
  --pico-h5-color: #5c6370;
  --pico-h6-color: #646b79;
  --pico-form-element-background-color: var(--pico-primary);
  --pico-form-element-selected-background-color: var(--pico-background-color);
  --pico-form-element-border-color: var(--pico-primary);
  --pico-form-element-color: var(--pico-color);
  --pico-form-element-active-background-color: var(--pico-background-color);
  --pico-form-element-active-border-color: var(--pico-primary-border);
  --pico-form-element-focus-color: var(--pico-primary-border);
}


/* REUTILISABLE */

a   {
    color: var(--pico-primary-background);
    font-weight: bold;
}
    a:hover {color: var(--pico-contrast);}

h1 {
    font-family: lora;
}

h2 {
    text-align: center; 
    padding-top: 2rem; 
    margin-bottom: 2rem;
}

hr {
    margin-bottom: 2rem; 
    margin-left: 4rem; 
    margin-right: 4rem;
    border-color: grey;
}

section {
    margin:0;
    padding-bottom: 2rem;
}

.container-fluid {
    padding: 0;
    margin: 0;
}


/* SPECIFIQUE A CHAQUE SECTION */

#portrait {
    height: 100vh;
    background-image: url("bg.svg");
    background-repeat: repeat-x;
    background-size: 20%;
    background-position: bottom;
}
    #portrait > div {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        height: 100vh;
        background-color: #fff;
        padding: 10px;
    }

#intro {background-color: var(--pico-secondary);}
    #intro > div > h2, #intro > div > p {color: var(--pico-primary);}
    #intro > div > hr {border-color: var(--pico-primary);}
    #intro > div > p > a {
        color: var(--pico-primary);
        text-decoration: underline;
    }
    #intro > div > p > a:hover {
        color: #fff;
    }


article > div {
    display: flex;
    flex-wrap: nowrap;
    margin-bottom: 0.5rem;
}
    article > div > div {margin-right: 2rem;}

#formation {background-color: var(--pico-primary);}

#contact {background-color: var(--pico-contrast);}
    #contact > div > h2 {color: var(--pico-primary);}