*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    background-color: #222;
    height: 100vh;   
}

ul {
    display: flex;
    flex-direction: column;
    height: 100%;
    align-items: center;
    justify-content: center;
    list-style-type: none;
}

p {
    display: inline;
    font-size: 24px;
    color: white;
}
/*Jusqu'ici riien de compliqué car toutes les valeurs
sont compréhensibles rien de difficile*/


/*Dans l'élément a nous allons travailler. Nous avons
deux choses que nous devons comprendre à tout prix:
1) margin: 10px 0; c'est que nous devons espacer verticalement
entre les mots(les liens), nous n'avons pas besoin d'ajouter
des marges left et right.
2) display: inline-block; va nous permettre d'appliquer les
marges que nous avons paramétrées entre les mots.
Sans inline-block rien ne va changer à ce niveau
*/
a {
    text-decoration: none;
    font-family: fantasy;
    font-size: 50px;
    font-weight: lighter;
    letter-spacing: 0.1rem;
    color: #fff;
    margin: 10px 0;
    display: inline-block;
    cursor: pointer;
}

/*Dans cette partie nous allons styliser les liens
et pour cela nous allons utiliser la propriété ::before
- on va tout d'abord utiliser la position absolute pour
occuper tout l'écran
- on va paramétrer la largeur et la hauteur à 100%
 */ 

a::before {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0; 
/*Ce top 0 permet de positionner le départ du background
à l'extrême top*/
    left: 0;
/*Ce left 0 permet de positionner le départ du background
à l'extrême left*/
    content : attr(data-text);
/*data-attr b=nous permet d'utiliser le nom donné à
l'élément liste, en l'occurence les noms des revues
un à un
Ici on va voir le menu cassé et les mots regroupés en haut
à gauche. Pour cela, nous allons utiliser les propriétés
ci-dessous:*/
    text-align: center;
    line-height: 100vh;
/*Afin de cacher l'élément ::before; nous allons utiliser
la propriété suivante avec la valeur 0:*/
    transform: scale(0);
/*La propriété z-index va nous donner la possibilité de
superposer nos éléments en position absolute permettant
à l'élément ayant une valeur positive de passer en avant
et celui dont la valeur est négative de se cacher derrière;*/
    z-index: -1;
/*Nous allons styliser le mot que l'on veut afficher en
fond de notre bacjground lorsqu'on survole chaque nom de
revue*/
    color: rgba(15, 15, 15, 0.2);
    font-size: 150px;
    transition: all 0.3s ease;
}

/*À ce moment du travail, nous allons utiliser la propriété
hover pour dire que lorsqu'on survole un élément de la liste
(le nom d'une revue) le bacjground de cet élément va
s'afficher*/

li:hover a::before {
    transform: scale(1);
}


/*Dans cette partie nous allons travailler sur les éléments
li (la liste) pour afficher le background. Pour cela, nous
allons utiliser la propriété :nth-child()
Cette propriété nous permet sur les éléments de la liste
un par un juste en les numérotant. Nous allons utiliser
également la propriété ::before pour que les styles
s'appliquent sur les deux à la fois*/

 li:nth-child(1) a::before {
    background-color: rgb(169, 240, 27);
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
 }
 li:nth-child(2) a::before {
    background-color: rgb(15, 160, 228);
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
 }
 li:nth-child(3) a::before {
    background-color: rgb(174, 50, 205);
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
 }
 li:nth-child(4) a::before {
    background-color: rgb(247, 44, 44);
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
 }
 li:nth-child(5) a::before {
    background-color: rgb(8, 196, 55);
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
 }
 li:nth-child(6) a::before {
    background-color: rgb(109, 50, 205);
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
 }
 li:nth-child(7) a::before {
    background-color: rgb(241, 165, 22);
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
 }

 @media (max-width: 900px) {
    ul {
        height: auto;
        margin-top: 100px;
    }
    li {
        height: 50px;
        padding: 40px;
    }
    a {
        font-size: 30px;
    }

    p {
        font-family: fantasy;
        font-size: 24px;
    }
    a::before {
        font-size: 110px;
}

}

@media (max-width: 480px) {
    ul {
        height: auto;
    }
    li {
        height: 30px;
    }
    a {
        font-family: fantasy;
        font-size: 20px;
    }
    p {
        font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
        font-size: 15px;
    }
    a::before {
        font-size: 80px;
    }
}