body
{
    background-color: rgb(210, 210, 210);
}

a.retour
{
    font-size: 25px;
    text-align: center;
    color: #58118f;
    border: solid #58118f;
    border-radius: 20%;
    box-shadow: 10px 5px 5px rgb(144, 83, 201);
    padding-left: 100px;
    padding-right: 100px;
    padding-bottom: 10px;
    padding-top: 10px;
    background-color: #c7c7c7;
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 20px;
}

h3.consigne
{
    color: rgb(236, 29, 129);
    text-align: center;
    font-size: 40px;
    margin-left: 20%;
    margin-right: 20%;
}



.conteneur
{
    display: flex;
    justify-content: center;
    margin-top: 100px;
    width: 800px;
    height: 800px;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    background-image: url("generation_fond.svg");
    background-size: 100% ;
}




img.orange
{
    margin-left: 100px;
    margin-right: 50px;
}

img.rose
{
    margin-left: 80px;
}

img.violet
{
    margin-left: 60px;
    margin-right: 45px;
}


img:hover
{
    transform: scale(1.05);
    cursor: pointer;
}

img.jaune:hover
{
    filter: drop-shadow(0 0 1rem rgb(214, 211, 32));
}

img.orange:hover
{
    filter: drop-shadow(0 0 1rem rgb(223, 120, 17));
}

img.rose:hover
{
    filter: drop-shadow(0 0 1rem rgb(196, 43, 152));
}

img.violet:hover
{
    filter: drop-shadow(0 0 1rem rgb(126, 16, 210));
}

.tortue
{
    display: flex;
    justify-content: space-around; 
    font-size: 35px;
}

p.jaune
{
    color: rgb(255, 174, 0);
}

p.rose
{
    color: #ff0077;
}

p.orange
{
    color: #dd5a02;
}

p.violet
{
    color: #5b1d9a;
}

.btn
{
    height: 100px;
    width: 100px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    right: 20px;
    bottom: 20px;
}

img.icone
{
    width: 50px;
    cursor: pointer;
}

.sortie
{
    display: flex;
    justify-content: space-between;
}

h2
{
    text-align: center;
    color: #58118f;
}