/*global variables*/
:root {          
    --weight: 300;
    --weight: 100;
} 

.name {
    display: block;
    font-family: "Cossette Texte", sans-serif;
    color: rgb(202, 255, 97);
    background-color:rgb(194, 192, 152);
    font-size:xx-large;
    width: 200px;
    transform: rotate(3deg);
    margin:50px;
}

.exercise-name {
    color: rgb(97, 105, 255);
    background-color:rgb(194, 192, 152) ;
    transform: rotate(3deg);
    font-family: "Cossette Texte", sans-serif;
    font-size: var(--weight);
    width: 100px;
    margin:10px auto;
}

.exercise-work {
    color: rgb(202, 255, 97);
    background-color:rgb(97, 105, 255) ;
    transform: rotate(3deg);
    font-family: "Cossette Texte", sans-serif;
    font-size: var(--weight);
    width: 100px;
    margin:10px auto;
}

a.exercise-work {
    color: rgb(202, 255, 97);
    background-color:rgb(97, 105, 255) ;
    transform: rotate(3deg);
    font-family: "Cossette Texte", sans-serif;
    font-size: var(--weight);
    width: 100px;
    display: block;
    margin:10px auto;
}

a.exercise-work:hover {
    color: rgb(202, 255, 97);
    background-color:rgb(97, 105, 255) ;
    transform: rotate(10deg);
    font-family: "Cossette Texte", sans-serif;
    font-size: var(--weight);
    width: 100px;
    height: 30px;
    display: block;
    margin: 20px auto;
}

p {
    color: black;
    display: block;
   
    font-family: "Cossette Texte", sans-serif;
    height:20px;
    width: 100px;
    margin:70px auto;
}


.evoke {
    color: rgb(97, 105, 255);
    background-color:rgb(194, 192, 152) ;
    transform: rotate(3deg);
    font-family: "Cossette Texte", sans-serif;
    font-size: var(--weight);
    width: 600px;
    margin:0px auto;

}

.number {
    display: block;
    font-family: "Cossette Texte", sans-serif;
    color: rgb(202, 255, 97);
    background-color:rgb(194, 192, 152);
    font-size:xx-large;
    width: 50px;
    margin:50px;
}

.article-body p {

    width:500px;
    margin:50px auto;
    font-size: small;

}

a {
    color: rgb(194, 192, 152);
    display: inline-block;
    background-color:rgb(97, 105, 255);
    transform: skewY(1deg);
    font-family: "Cossette Texte", sans-serif;
    width:400px;
    margin: 10px;
    

}
a:hover { /* link on hover */
    display: inline-block;
    color:rgb(202, 255, 97);
    background-color: rgb(97, 105, 255);
    transform: skewY(-5deg);
    font-family: "Cossette Texte", sans-serif;
    width: 400px;
    height: 50px;
    }


body{
   background-color: whitesmoke;
} 

.next-page {
    position:fixed;
    bottom: 0px;
    width: 300px;
    margin: 20px;
    right:-100px;
    
    color: rgb(97, 105, 255);
    display: inline-block;
    background-color: rgb(202, 255, 97);
    transform: skewY(-1deg);
    
}

.next-page:hover {
    position:fixed;
    bottom: 0px;
    background-color:black;
    transform: skewY(5deg);
    
}

.back-page {
    position:fixed;
    bottom: 0px;
    width: 300px;
    margin: 20px;
    left:-10px;
    
    color: rgb(97, 105, 255);
    display: inline-block;
    background-color: rgb(202, 255, 97);
    transform: skewY(1deg);
    
}

.back-page:hover {
    position:fixed;
    bottom: 0px;
    background-color:black;
    transform: skewY(-5deg);
    
}