/* chargement des fontes */
@font-face {
    font-family: Gaillarde;
    src: url("Garabosse-Gaillarde.otf");
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: Parangon;
    src: url("Garabosse-Parangon.otf");
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: Perle;
    src: url("Garabosse-Perle.otf");
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: Nonpareille;
    src: url("Garabosse-Nonpareille.otf");
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: Mignonne;
    src: url("Garabosse-Gaillarde.otf");
    font-weight: normal;
    font-style: normal;
}


/* quelque règles de bases */

* {
    /* border: 1px solid black; */
    font-weight: normal;
}

:root {
    font-size: 25px;
    --larg: 38rem;
}

html{
    background-color: #ffebae;
}

body {
    font-family: Parangon;
    margin: 0;
}

svg[height='0'] {
    position: fixed;
}

/* intro */

.intro {
    max-width: 40rem;
    font-size: 2rem;
    line-height: 120%;
    margin-left: 2rem;
    hyphens: manual;
}

/* style commun aux livres / revue / liens */


.livre,
.revue,
.these a {
    color: #ffd29b;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 1rem;
    width: var(--larg);
    margin: auto;
    gap: 1rem;
    min-height: 4rem;
    padding: 1rem;
    position: relative;
}

/* pseudo élement "before" pour que le filtre de texture
    soit en dessous du texte
 */

.livre::before,
.revue::before,
.these a::before{
    content:"";
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #821f93;
    top: 0;
    left: 0;
}


/* texte à l'intérieur des docs */

.livre span,
.revue span,
.these span {
    align-content: center;
    z-index: 9;
    text-wrap: balance;
}

.titre {
    max-width: 40%;
}

/* .livres a{
    text-decoration: none;
} */

ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-left: 0;
}


/* règles spécifiques à chaque type de documents */

.livre {
    font-family: 'Perle';
}

.livre::before{
    filter: url(#trame1);
}

.revue {
    min-height: 2rem;
    font-family: 'Gaillarde';
    width: calc(var(--larg) + 6rem);
}

.revue::before{
    filter: url(#trame2);
}

.these a {
    font-family: 'Mignonne';
    width: fit-content;
    margin: auto;
    width: calc(var(--larg) + 4rem);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}
.these a::before{
    filter: url(#trame3);
}


@keyframes rainbow {
    0% {
        color: rgba(186, 90, 218, 0.575)
    }

    10% {
        columns: rgb(148, 153, 212);
    }

    20% {
        color: rgb(186, 12, 108)
    }

    30% {
        color: purple;
    }
}

.rainbow,
.rainbow a,
.rainbow a:visited {
    animation: rainbow 1500ms infinite alternate;
    color: blueviolet;
}

footer {
    text-align: center;
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

footer p{
    margin: 0;
}

@media screen and (max-width: 1100px) {
    :root {
        font-size: 20px;
    }

    .intro {
        font-size: 1.5rem;
    }

    body {
        overflow-x: hidden;
    }

    ul {
        flex-direction: row;
        overflow-x: scroll;
        padding-bottom: 1rem;
    }

    ul li{
        margin-top: auto;
    }

    ul li:last-child{
        margin-right: 2rem;
    }

    .livre,
    .revue,
    .these a {
        width: fit-content;
        /* min-width: 4rem; */
        height: 80vh;
        margin: 0;
    }
    .livre span, .revue span, .these span{
         margin-left: auto;
        margin-right: auto;
    }

    .livre{
        margin-top: auto;
    }
    .revue{
        height: calc(80vh + 3rem);
    }
    .these a{
        height: calc(80vh + 1.5rem)
    }

    .titre {
        max-width: unset;
        max-height: 50%;
    }

    .these a{
        text-decoration-thickness: 1px;
        text-underline-offset: -1px;
    }



    @supports (-webkit-touch-callout: none) {
        /* CSS specific to iOS devices */ 
    .livre span, .revue span, .these span{
            -webkit-writing-mode: vertical-rl;
            -webkit-text-orientation: sideways-left;

    }
    .livre, .revue,.these a{
            -webkit-writing-mode: unset;
            -webkit-flex-direction: column;
    }

        .these a{
            text-decoration-thickness: 1px;
            text-underline-offset: 3px;
        }
    }

    @supports not (-webkit-touch-callout: none) {
    /* CSS for other than iOS devices */ 
        .livre, .revue, .these{
            writing-mode: vertical-rl;
            text-orientation: sideways-left;
    }
    }
}