html{
    --font-color:rgb(73, 59, 59);
    font-size: 3vw;
    color : var(--font-color);
}
body{
    background-image: linear-gradient(rgb(225, 171, 227),rgb(254, 190, 191));
    background-attachment: fixed; /*a regarder si possible suppression/changement ratio image background*/
    height:100vh;
}
.menu{
    height:100vh;
    display: flex;
    align-content: space-between;
    flex-wrap: wrap;
}
#title{
    display : grid;
    text-align: center;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    width: 100%;
    margin-top: 2rem;
}
#title h1{
    font-size: 5vw;
}
#navRosace{
    width: 100%;
    margin-top: 12vw;
    margin-bottom: 12vw;
    display: flex;
    justify-content: center;
}
#rosace{
    max-width: 60vw;
    display:grid;
    grid-template: 1fr 1fr / 1fr 1fr 1fr;
}
.petal{
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius:50%;
    border:1px solid var(--font-color);
    width: 18vw;
    height: 18vw;
}
.petal :hover{
    background-color: rgba(112, 117, 122, 0.25);
    height: 20%;
}

.petal a :hover{
    background-color: rgba(112, 117, 122, 0);
}
.petal a{
    color:var(--font-color);
    padding-top: 40%; /*essayer de remplacer au possible*/
    padding-bottom: 40%;
    text-align: center;
    border-radius:50%;
    width: 100%;
}
#petal1{
    margin-top: 10vw;
    margin-bottom: 5vw;
    background-color: rgba(191, 235, 255, 0.500);
}
#petal2{
    background-color: rgba(255, 191, 191, 0.500);
}
#petal3{
    margin-top: 10vw;
    background-color: rgba(255, 222, 190, 0.500);
}
#petal4{
    /*font-size: 2.5vw;!*Multilinguisme prends trop de place et déborde du petal sinon*!*/
    background-color: rgba(255, 171, 228, 0.500);
}
#petal5{
    margin-top: 10vw;
    background-color: rgba(185, 185, 255, 0.500);
}
#petal6{
    background-color: rgba(219, 248, 194, 0.500);
}
#logoHypa{
    width: 10vw;
    height:10vw;
    justify-self: center;
    display: unset;
    max-height: unset;
}
#logoNouvelleAquitaine{
    height:10vw;
    width: 20vw;
    justify-self: start;
}
#logoLaRochelleUnivesite{
    width: 10vw;
    height:10vw;
    justify-self: end;
}
.icon{
    font-size: 7vw;
}
@media screen and (min-width: 500px) {
    html{
        font-size: 3vh;
    }
    .menu{
        align-content: space-between;
    }
    #title{
        margin-top: 0;
    }
    #title h1{
        font-size: 5vh;
    }
    #navRosace{
        display: flex;
        justify-content: center;
    }
    #rosace{
        max-width: 60vh;
    }
    .petal{
        width: 18vh;
        height: 18vh;
    }
    #petal1{
        margin-top: 10vh;
        margin-bottom: 3vh;
        font-size: 7vh;
    }
    #petal3{
        margin-top: 10vh;
    }
    #petal4{
        /*font-size: 2.5vh;!*Multilinguisme prends trop de place et déborde du petal sinon*!*/
    }
    #petal5{
        margin-top: 10vh;
    }
    #logoHypa{
        width: 10vh;
        height:10vh;
    }
    #logoNouvelleAquitaine{
        height:10vh;
        width: 20vh;
    }
    #logoLaRochelleUnivesite{
        width: 10vh;
        height:10vh;
    }
    .icon{
        font-size: 7vh;
    }
}