body {
    background-color: #F6F3EE;
}

.block {
    background-color: white;
    border-radius: 10px;
}

/*La position va dépendre du premier parent en postion RELATIVE et
de l'élément enfant qui sera ABSOLUTE. L'élément que l'on veut modifé sera
toujours ABSOLUTE, mais l'élément RELATIVE sera sur quoi l'élément ABSOLUTE
va être modifié

A voir maintenant l'exemple sur les éléments 'td' et 'i' de notre fichier css

On voulait modifier la position de l'élément 'i' dans l'élément 'td', donc étant
donné que on modifie 'i', 'i' sera ABSOLUTE, et on veut le faire bouger par rapport
à 'td', donc 'td' sera RELATIVE*/

td {
    position: relative;
}

.fa1 {
    color : rgb(22, 111, 211);
    font-size : 42px;
    background-color: #F5F6FD;
    border-radius: 100px;
    padding: 20px;
    width: 42px !important;
    height: 42px;
    position: absolute;
    top: -36px;
    left: 50%;
    transform: translateX(-42px);
    transition: all 0.5s ease;
}

.arrowr {
    color: rgb(22, 111, 211);
    font-size:30px;
    background-color: #F5F6FD;
    border-radius: 100px;
    padding: 20px;
    padding-top: 50px;
    width: 84px !important;
    height: 55px;
    position: absolute;
    top: 120px;
    /* visibility: hidden; */
    transition: all 0.5s ease;
}

/* td:hover .arrowr {
    visibility:visible;
    transition: all 0.5s ease;
} */

/*Pour le :hover, on ne mettra seulement les changements après les modifications.
Pour se qui est de la 'transition', on le mettra sur l'élément de base
comme voir sur exemple sur 'i' et td:hover.*/

td:hover fa1{
    color: #F5F6FD;
    background-color: rgb(22, 111, 211);
}

.readmore fa1{
    transition: 0.25s;
}

.readmore:hover {
    color: chartreuse;
}

h3 {
    padding-top: 30px;
    /* font-size: 40px; */
}

p {
    font-weight: 1000;
    padding: 20px;
}

.container {
    width: 1080px;
    margin: 0 auto;
}

.rounded-small-icon {
    background-color: #166FD3;
    color: #fff;
    border-radius: 100px;
    width: 25px;
    height: 19px;
    font-size: 13px;
    padding-top: 6px;
}

a {
    text-decoration: none;
    color: black;
}

.absolute {
    position: absolute;
}

.relative {
    position: relative;
}

.horiz-center {
    left: 50%;
}

.hover-td .rounded-icon {
    top: 163px;
    transform: translateY(-42px) translateX(-42px);
    background-color: white;
    opacity: 0;
    transition: all 0.5s ease-in-out;
}

.hover-td:hover .rounded-icon {
    opacity: 1;
}