@import url('https://fonts.googleapis.com/css2?family=Lalezar&family=Roboto:wght@100;400&display=swap');

body{
    font-family: 'Lalezar', system-ui;
    color: gray;
    font-size: 35px;
}



.TitrePrincipal{
    text-align: center;
}

.ligne1, .ligne2{
    display: flex;
    width: 100vw;
    flex-direction: row;
    justify-content: space-around;
    margin-top: 1em;
}

h1{
    color: rgb(111, 136, 136);
}

h2{
    text-decoration: underline;
    color: rgb(39, 39, 39);
}

.rota1, .rota2, .clr1, .clr2, .depla1, .depla2, .taille1, .taille2{
    height: 80px;
    width: 80px;
    border: 5px solid rgb(68, 68, 68);
    border-radius: 15px;
    transition: all 1s;
    align-items: normal;

}

.cube{
    display: flex;
    flex-direction: row;
    width: 300px;
    justify-content: space-around;
    margin-left: -35px;
}

.rota1:hover{
    transform: rotate(90deg);
}

.rota2:hover{
    transform: rotate(-90deg);
}


.clr1:hover{
    background-color: aquamarine;
}

.clr2:hover{
    border-color: aquamarine;
}

.depla1:hover{
    transform: translateY(2em);
}

.depla2:hover{
    transform: translateX(2em);
}

.taille1:hover{
    transform: scale(1.5);
}

.taille2:hover{
    transform: scale(0.5);
}